HTML5キャンバスアニメーションを停止する

Question

5秒後にこのhtml5キャンバスアニメーションを停止するにはどうすればよいですか？

私はhtml5キャンバスの初心者です。私は知っているすべてのコードを試しましたが、それは再生または破損し続けます。

おそらく、このための簡単な解決策があります。

EDIT：5秒後にサイクルの生産を停止する必要がありますが、アニメーション を続行する必要があります。

ご協力いただきありがとうございます。

window.requestAnimFrame = (function() { 
 
    return window.requestAnimationFrame || 
 
    window.webkitRequestAnimationFrame || 
 
    window.mozRequestAnimationFrame || 
 
    window.oRequestAnimationFrame || 
 
    window.msRequestAnimationFrame || 
 
    function(callback) { 
 
     window.setTimeout(callback, 1000/60); 
 
    }; 
 
})(); 
 

 
var c = document.getElementById('canv'), 
 
    $ = c.getContext('2d'); 
 

 
    c.width = window.innerWidth; 
 
    c.height = window.innerHeight; 
 

 
window.addEventListener('resize', function(){ 
 
    c.width = window.innerWidth; 
 
    c.height = window.innerHeight; 
 
}, false); 
 

 
var arr = []; 
 

 
var go = function() { 
 
    $.fillStyle = "hsla(0,0%,10%,.8)"; 
 
    $.fillRect(0, 0, c.width, c.height); 
 
    
 
    var p = new Part(c.width/2 , c.height); 
 
    p.vx = Math.random() * 10-5; 
 
    arr.push(p); 
 

 
    for (var i in arr) { 
 
    var p = arr[i]; 
 
    p.disp($); 
 
    p.upd(); 
 
    } 
 

 
    if (arr.length > 500) { 
 
    arr.shift(); 
 
    } 
 
} 
 

 
var rnd = function(min, max) { 
 
    return Math.random() * (max - min) + min; 
 
} 
 

 
var Part = function(px, py) { 
 
    this.px = px; 
 
    this.py = py; 
 
    this.vy = rnd(1.1, 2)*-8*1.1; 
 
    this.vx = rnd(1.1, 2)*5*1.1; 
 
    
 
    this.grav = 0.1; 
 
    this.col = 0; 
 
    this.rad = rnd(5,30); 
 
    this.disp = function($) { 
 
    $.fillStyle = "hsla(" + this.col + ", 95%, 60%, .8)"; 
 
    $.beginPath(); 
 
    $.arc(this.px, this.py, this.rad, 0, Math.PI*2); 
 
    $.fill(); 
 
    } 
 
    
 
    this.upd = function() { 
 
     this.vy += this.grav; 
 
     this.py += this.vy*1.1; 
 
     this.px += this.vx* 1.1; 
 
     this.col += 2; 
 
    } 
 
} 
 

 
var run = function() { 
 
    window.requestAnimFrame(run); 
 
    go(); 
 

 
} 
 
run();

body{ 
 
    width:100%; 
 
    margin:0; 
 
    overflow:hidden; 
 
    background:hsla(0,0%,10%,1); 
 
}

<canvas id = 'canv'></canvas>

Answer 1

このスニペットは、5秒後に作成されることから、新たな泡を停止しますまだ、まだ残っているアニメーションが表示されます。

キーは、新しいアイテムの生成を呼び出すコードの周囲に条件を作成することです。グローバル変数time_switchを使用すると、その条件を他の関数で使用することができます。次のようにタイマーと機能は以下のとおりです。

var time_switch = 0; 
window.setTimeout("pauser();",5000); 
function pauser() { 
    time_switch = 1; 
} 

window.requestAnimFrame = (function() { 
 
    return window.requestAnimationFrame || 
 
    window.webkitRequestAnimationFrame || 
 
    window.mozRequestAnimationFrame || 
 
    window.oRequestAnimationFrame || 
 
    window.msRequestAnimationFrame || 
 
    function(callback) { 
 
     window.setTimeout(callback, 1000); 
 
    }; 
 
})(); 
 

 
var c = document.getElementById('canv'), 
 
    $ = c.getContext('2d'); 
 

 
    c.width = window.innerWidth; 
 
    c.height = window.innerHeight; 
 

 
window.addEventListener('resize', function(){ 
 
    c.width = window.innerWidth; 
 
    c.height = window.innerHeight; 
 
}, false); 
 

 
var arr = []; 
 

 
var go = function() { 
 
    
 
    $.fillStyle = "hsla(0,0%,10%,.8)"; 
 
    $.fillRect(0, 0, c.width, c.height); 
 

 
    if (time_switch !== 1) { 
 
     var p = new Part(c.width/2 , c.height); 
 
     p.vx = Math.random() * 10-5; 
 
     arr.push(p); 
 
    } 
 

 
    for (var i in arr) { 
 
     var p = arr[i]; 
 
     p.disp($); 
 
     p.upd(); 
 
    } 
 

 
    if (arr.length > 500) { 
 
     arr.shift(); 
 
    } 
 
    
 
} 
 

 
var rnd = function(min, max) { 
 
    return Math.random() * (max - min) + min; 
 
} 
 

 
var Part = function(px, py) { 
 
    this.px = px; 
 
    this.py = py; 
 
    this.vy = rnd(1.1, 2)*-8*1.1; 
 
    this.vx = rnd(1.1, 2)*5*1.1; 
 
    
 
    this.grav = 0.1; 
 
    this.col = 0; 
 
    this.rad = rnd(5,30); 
 
    this.disp = function($) { 
 
    $.fillStyle = "hsla(" + this.col + ", 95%, 60%, .8)"; 
 
    $.beginPath(); 
 
    $.arc(this.px, this.py, this.rad, 0, Math.PI*2); 
 
    $.fill(); 
 
    } 
 
    
 
    this.upd = function() { 
 
     this.vy += this.grav; 
 
     this.py += this.vy*1.1; 
 
     this.px += this.vx* 1.1; 
 
     this.col += 2; 
 
    } 
 
} 
 
var time_switch = 0; 
 
window.setTimeout("pauser();",5000); 
 
function pauser() { 
 
    time_switch = 1; 
 
} 
 
var run = function() { 
 
    //if (time_switch !== 1) { 
 
    window.requestAnimFrame(run); 
 
    //} 
 
    
 
    go(); 
 

 
} 
 
run();

body{ 
 
    width:100%; 
 
    margin:0; 
 
    overflow:hidden; 
 
    background:hsla(0,0%,10%,1); 
 
}

<canvas id = 'canv'></canvas>