动画的可接受帧速率有多高

How high is an acceptable framerate for animation?

本文关键字：帧速率 可接受 动画      更新时间：2024-04-22

我想用javascript创建一个雪动画。在200毫秒的帧速率下，它看起来不错，但不是100%流畅。下面的例子使用20ms是可以的，还是完全低效和浪费CPU？

window.setInterval(snow.draw, 20);

示例

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。如果你想让图形在最快的人眼附近渲染，这并不是浪费。如果你喜欢的话，可以在40毫秒（25帧/秒）的速度下尝试它，它可以节省你的处理时间，而且不会影响视觉效果。

我认为每秒30帧是合理的。传统电影的播放速度约为每秒24帧。大多数现代视频游戏的帧速率都在30帧左右（高端显卡为60帧）。

实际上，人眼平均每秒处理20帧左右，当生存本能或恐慌袭来时，最高可达60帧

1000/30ms略高于30fps。

普通人可以看到24-30帧/秒的画面。15帧/秒是典型的网络动画。高质量的电影使用大约30帧/秒。高质量的电视动画大约是每秒24帧。

所以

window.setInterval(snow.draw,your choice);

有一堆依赖函数，所以你可能想用行业标准作为平均值来玩你的fps，而不是偏离太大。24帧/秒在我看来相当不错。

然而，如果你不满意，你也可以使用48帧/秒的多次刷新率，重复帧2次。

尽管如此，在资源差异很大的网络浏览器中，处理的数量可能会产生巨大的差异。在几年前的旧时代，这可能会对包括动画在内的任何事物的流动性产生巨大影响。尽量减少是件好事。你能把什么组合起来吗？

维基百科有一篇关于帧速率的好文章，并指出了以下几点。

The human eye and its brain interface, the human visual system, can process 10 to 12 separate images per second, perceiving them individually.

以及电影和视频制作人使用24p，即使他们的作品不会转移到电影中，这仅仅是因为屏幕上的（低）帧速率与本地电影相匹配。

以下是有关动画fps的一些信息。

动画看起来"平滑"的关键之一是帧速率是常数。对于计算机来说，这意味着帧速率需要是显示器帧速率的偶数：对于目前常用的60Hz显示器来说，这就意味着60FPS、30FPS、15FPS等。

大多数人可以感知15FPS帧速率的单个帧，有些人可以感知30FPS。如果你的程序能画得那么快（尤其是在涉及快速运动的情况下），我会选择60FPS（16ms），如果不能，我会选30FPS（33ms）。

相关文章：