2

ブラウザでパーティクルの周りを描画してから50000停止するにはどうすればよいですか。パーティクルの無限のアニメーションを作成する方法は知っていますが、パーティクルの描画が完了したら停止するアニメーションを作成するにはどうすればよいですか。

編集

したがって、本質的にはパーティクルの描画の時間を計りたいのですが、タイマーを攻撃すると、アニメーションが停止しないため、変更が得られません。

var scene = new Scene(),
  particles = [],
  len = 40000,
  height = document.body.offsetHeight,
  width = document.body.offsetWidth;

function Particle() {
  this.x = 0;
  this.y = 0;
  this.size = 0;
  this.depth = 0;
  this.vy = 0;
}
Particle.prototype = {
  constructor: Particle,
  update: function (width, height) {
    if (this.y > height) {
      this.y = 1 - this.size;
    }
    this.y += this.vy;
  }
};
for (var i = 0; i < len; i++) {
  var particle = new Particle();
  particle.x = Math.random() * width;
  particle.y = Math.random() * height;
  particle.depth = Math.random() * 10 | 0;
  particle.size = (particle.depth + 1) / 8;
  particle.vy = (particle.depth * .25) + 1 / Math.random();
  particles.push(particle);
}

function falling_particles(scene) {
  for (var i = 0, l = particles.length; i < l; i++) {
    var particle = particles[i];
    for (var w = 0; w < particle.size; w++) {
      for (var h = 0; h < particle.size; h++) {
        var pData = (~~(particle.x + w) + (~~(particle.y + h) * scene.width)) * 4;
        scene.idata.data[pData] = 255;
        scene.idata.data[pData + 1] = 255;
        scene.idata.data[pData + 2] = 255;
        scene.idata.data[pData + 3] = 255;
      }
    }
    particle.update(scene.width, scene.height);
  }
  return scene.idata;
}
scene.setup(document.getElementById('canvas'), falling_particles, width, height, !0);
scene.animate();
window.onresize = function () {
  height = scene.height = scene.canvas.height = document.body.offsetHeight;
  width = scene.width = scene.canvas.width = document.body.offsetWidth;
};

リンクはこちら: http://jsfiddle.net/MdSP4/

4

1 に答える 1

0

正確に何をしたいのかわかりませんが、追加する場合

setTimeout(function(){
    scene.paused = true;
},1000);

その後、すべての描画が 1 秒後に停止します。

于 2013-03-03T21:32:04.280 に答える