阻止雨水落下

Question

我正在嘗試將粒子發射器切換為打開或關閉。 我有一些Reactjs代碼，可以使用canvas元素創建雨/雪粒子。 我提出的正確殺死動畫的每個想法仍然會導致內存泄漏（在這種情況下，我認為它只是在舊畫布上投影了一個新畫布，並且仍在內存中運行原始動畫）。 這是Codepen。

這是頁面代碼：

class CanvasComponent extends React.Component {
    componentDidMount() {

   this.BtnOnOff();
}  
constructor() {
    super();
    this.toggleState = this.toggleState.bind(this);
    this.state = {
      isActive : false

    }
  }

  toggleState() {
    this.setState({isActive:!this.state.isActive});
    this.BtnOnOff();
   //console.log(this.state.isActive);
  }  


snowMaker() {
    // Ref canvas & get context
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

     // Weather Types/////////////
     var liteSnow = 13;     //code 13 for snow light fluries.  
     var snow = 16;         //code 13 for snow fluries. 
     var hevySnow = 41;     //code 41 for Heavy snow. 
     var hevySnow2 = 43;    //code 43 for Heavy snow.  
     var DRain = 9;          //code 9 for drizzel
     var HRain = 3;          //code 3/4 for Thunderstorms/severe thunderstorms

     var Code = 43; // Code will take in the current weather code.

    // Resize canvas
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    // Variables

         if (Code === 13) {                       /// Make it snow (light fluries)
            var drops = [];
            var dropColour = "rgba(255,255,255,1)";
            var dropLengths = [3, 3, 3, 3, 3, 3, 3];
            var dropSkews = [-2, -1, 0, 1, 2];
            var maxDrops = 100;
            var velocity = 8;
            var flutter = 5;

          }  
            else if (Code === 16){                  /// Make it snow (fluries)
            var drops = [];
            var dropColour = "rgba(255,255,255,1)";
            var dropLengths = [3, 3, 3, 3, 3, 3, 3];
            var dropSkews = [-2, -1, 0, 1, 2];
            var maxDrops = 500;
            var velocity = 7;
            var flutter = 5;

          }
             else if (Code === 41||Code === 43){                  /// Make it Heavy snow
            var drops = [];
            var dropColour = "rgba(255,255,255,1)";
            var dropLengths = [3, 2, 3, 2, 3, 2, 3];
            var dropSkews = [-3, -1, 0, 1, 3];
            var maxDrops = 800;
            var velocity = .5;
            var flutter = 8;

          }
            else if (Code === 9){                  /// Make it rain
            var drops = [];
            var dropColour = "rgba(255,255,255,0.41)";
            var dropLengths = [4, 5, 3, 6, 2, 3, 3];
            var dropSkews = [0, 0.2, 0, 0, 0.1];
            var maxDrops = 100;
            var velocity =1;
            var flutter = 1;   
          }
             else if (Code === 3||Code === 4){                  /// Make it ThunderStorms
            var drops = [];
            var dropColour = "rgba(255,255,255,0.5)";
            var dropLengths = [10, 8, 8, 8, 7, 15, 9];
            var dropSkews = [-0.2, -0.3, -0.2, -0.2, 0.1];
            var maxDrops = 1000;
            var velocity = .8;
            var flutter = .1;   
          }



    // Raindrop class
    class Droplet {
      constructor(x, y, length, skew) {
        this.x = x;
        this.y = y;
        this.length = length;
        this.skew = skew;
      }
      // Move method
      move() {
        // Increment x & y 
        this.y += this.length / velocity;
        this.x += this.skew / flutter;
        // Set limits
        if (this.y > height) {
          this.y = 0;
        }
        if (this.x > width || this.x < 0) {
          this.y = 0;
          this.x = Math.floor(Math.random() * width);
        }
      }
        // Draw method
        draw(ctx) {
          ctx.beginPath();
          ctx.moveTo(this.x, this.y);
          ctx.lineTo(this.x + this.skew, this.y + this.length);
          ctx.strokeStyle = dropColour;
          ctx.stroke();
        }
      }

      // Create drops and push to array
      for (let i = 0; i < maxDrops; i++) {
        let instance = new Droplet(
          Math.floor(Math.random() * width),
          Math.floor(Math.random() * height),
          randVal(dropLengths),
          randVal(dropSkews)
        );
        drops.push(instance);
      }

        // Animation loop
        function loop() {
          // Clear Canvas  
          ctx.clearRect(0, 0, width, height);
          // Draw / Move drops
          for (let drop of drops) {
            drop.move();
            drop.draw(ctx);
          }
          // Animation Frame
          requestAnimationFrame(loop)
        }
          // Begin animation
          loop();

      // Resize canvas - responsive
   window.addEventListener('resize', resize);
      function resize() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
      }

      // Function for random array values
      function randVal(array) {
        return array[Math.floor(Math.random() * array.length)];
      } 


}////////End of update canvas
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

snowKiller() {
    // Ref canvas & get context
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

     var Code = 13; 

    // Resize canvas
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    // Variables

         if (Code === 13) {                       /// Make it snow (light fluries)
            var drops = [];
            var dropColour = "";
            var dropLengths = [0];
            var dropSkews = [0];
            var maxDrops = 0;
            var velocity = 0;
            var flutter = 0;

          }  

    // Raindrop class
    class Droplet {
      constructor(x, y, length, skew) {
        this.x = x;
        this.y = y;
        this.length = length;
        this.skew = skew;
      }
      // Move method
      move() {
        // Increment x & y 
        this.y += this.length / velocity;
        this.x += this.skew / flutter;
        // Set limits
        if (this.y > height) {
          this.y = 0;
        }
        if (this.x > width || this.x < 0) {
          this.y = 0;
          this.x = Math.floor(Math.random() * width);
        }
      }
        // Draw method
        draw(ctx) {
          ctx.beginPath();
          ctx.moveTo(this.x, this.y);
          ctx.lineTo(this.x + this.skew, this.y + this.length);
          ctx.strokeStyle = dropColour;
          ctx.stroke();
        }
      }

      // Create drops and push to array
      for (let i = 0; i < maxDrops; i++) {
        let instance = new Droplet(
          Math.floor(Math.random() * width),
          Math.floor(Math.random() * height),
          randVal(dropLengths),
          randVal(dropSkews)
        );
        drops.push(instance);
      }

        // Animation loop
        function loop() {
          // Clear Canvas  
          ctx.clearRect(0, 0, width, height);
          // Draw / Move drops
          for (let drop of drops) {
            drop.move();
            drop.draw(ctx);
          }
          // Animation Frame
          requestAnimationFrame(loop)
        }
          // Begin animation
          loop();

      // Resize canvas - responsive
   window.addEventListener('resize', resize);
      function resize() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
      }

      // Function for random array values
      function randVal(array) {
        return array[Math.floor(Math.random() * array.length)];
      } 


}////////End of update canvas

 BtnOnOff(){
     const OnOff =$('#Button').attr('class');

     if(OnOff=== "active"){
       // alert('this is on!')

       this.snowMaker();
        }else {

           this.snowKiller();
         // alert('this is off!');
        }
     console.log(OnOff); 

  } 


    render() {    
        return (
          <div>

           <button id="Button" className={this.state.isActive ? 'inactive' : 'active'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>

           <canvas id="canvas"/>

          </div>
        );
    }
}

ReactDOM.render(<CanvasComponent/>, document.getElementById('app'));

從概念上講，解決方案將類似於清除requestAnimationFrame，但我似乎無法弄清楚。 幫助將非常感激。 謝謝

Answer 1

（代碼tl; dr），您始終可以使用requestAnimationFrame()返回的request-ID，如下所示：

var reqID;

function loop() {
  // rain
  reqID = requestAnimationFrame(loop);
}

// start loop same way
reqID = requestAnimationFrame(loop);

然后，當您想要停止它時：

cancelAnimationFrame(reqID);

使用空的“ reqID ”進行調用是安全的。