我想用javascript创建雪花动画。帧率为200毫秒时看起来还不错，但并不是100％流畅。下面的示例使用20ms是可以的，还是完全效率低下并浪费CPU？
window.setInterval(snow.draw, 20);
example
snow = {
count: 60,
delay: 20,
flutter: 0.2,
wind: 1.0,
w1: 1,
minSpeed: 0.3,
maxSpeed: 4,
cv: null,
flakes: [],
toggle: function() {
if(window.snowtimer)
snow.stop();
else
snow.start();
},
resize: function() {
snow.cv.width = innerWidth;
snow.cv.height = innerHeight;
snow.gt = snow.ct.createLinearGradient(0,0,0,snow.cv.height);
snow.gt.addColorStop(0.0, '#6666ff');
snow.gt.addColorStop(1.0, '#ffffff');
snow.ct.fillStyle = snow.gt;
},
start: function() {
snow.cv = document.createElement('canvas');
snow.cv.width = snow.cv.height = 10; // set initial size
snow.cv.id = 'backgroundSnowCanvas';
document.body.appendChild(snow.cv);
snow.createFlake();
snow.ct = snow.cv.getContext('2d'),
snow.cv.style.position = 'absolute';
snow.cv.style.top = 0;
snow.cv.style.left = 0;
snow.cv.style.zIndex = -1;
snow.resize();
var c = snow.count;
snow.flakes = [];
do {
snow.flakes.push(new snow.flake());
} while(--c);
snow.ct.fillRect(0,0,snow.cv.width,snow.cv.height);
window.snowtimer = window.setInterval(snow.draw, snow.delay);
window.addEventListener('resize',snow.resize);
},
stop: function() {
window.clearInterval(window.snowtimer);
var c = document.getElementById('backgroundSnowCanvas');
c.parentNode.removeChild(c);
window.snowtimer=snow=null;
},
draw: function() {
var ct = snow.ct, f = snow.flakes, c = snow.count;
ct.fillRect(0,0,snow.cv.width,snow.cv.height);
do {
if(f[--c].draw(ct) && ++fdone) { };
} while(c);
snow.wind += Math.cos(snow.w1++ / 180.0);
},
flake: function() {
this.draw = function(ct) {
ct.drawImage(snow.flakeImage,this.x + snow.wind,this.y,this.sz,this.sz);
this.animate();
};
this.animate = function() {
this.y += this.speed;
this.x += this.flutter * Math.cos(snow.flutter * snow.flutter * this.y);
if(this.y > innerHeight)
this.init(1);
};
this.init = function(f) {
this.speed = snow.minSpeed + (Math.random() * (snow.maxSpeed - snow.minSpeed));
this.sz = ~~(Math.random() * 40) + 20;
this.flutter = ~~(Math.random() * snow.flutter * (60-this.sz));
this.x = (Math.random() * (innerWidth + this.sz)) - this.sz;
this.y = f ? -this.sz : Math.random() * innerHeight;
};
this.init();
},
createFlake: function() {
snow.flakeImage = document.createElement('canvas');
snow.flakeImage.width = snow.flakeImage.height = 40;
var c = snow.flakeImage.getContext('2d');
c.fillStyle = '#fff';
c.translate(20,20);
c.beginPath();
c.rect(-5,-20,10,40);
c.rotate(Math.PI / 3.0);
c.rect(-5,-20,10,40);
c.rotate(Math.PI / 3.0);
c.rect(-5,-20,10,40);
c.closePath();
c.fill();
},
};
最佳答案
20ms太快了。 50FPS对雪景影响太大。如果您想节省处理时间，通常的眼睛为20fps，但为25fps。
30FPS或更高质量。
最终答案：您应该将其设置为30ms。如果您希望图形能够以最快的人眼呈现，这不是浪费。如果您愿意，可以40ms（25fps）的速度尝试一下，这样可以节省您的处理时间，而且不会影响视觉效果。