javascript - 可接受的动画帧率是多少？

Question

我想用 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();
},

};

Answer 1

20 毫秒太快了。 50FPS 对于雪景效果来说太多了。 20fps 是典型的眼睛，但 25fps 如果您想节省处理时间。

30FPS 或更高质量。

最终答案:您应该将其设置为30ms。如果你想让图形渲染速度接近人眼最快的速度，这不是浪费。以 40 毫秒 (25fps) 的速度尝试，如果您愿意，它会节省您的流程并且不会影响视觉效果。