指定FPS帧频，requestAnimationFrame播放动画

Flash制作动画，最基础的概念就是帧，但在Flash中，帧频的控制比较简单，只需要编译前指定一下目标帧频就可以了。

实际运行时，不需要我们关心定时器的问题，flash player会定时触发EnterFrame消息，推动Movieclip播放。

在js这一侧，需要我们设定一个定时器，并推动相应的绘制逻辑执行。

最简单：

var FPS = 60;setInterval(draw, 1000/FPS);

这个简单做法，如果draw带有大量逻辑计算，导致计算时间超过帧等待时间时，将会出现丢帧。除外，如果FPS太高，超过了当时浏览器的重绘频率，将会造成计算浪费，例如浏览器实际才重绘2帧，但却计算了3帧，那么有1帧的计算就浪费了。

成熟做法：

引入requestAnimationFrame，这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。

这个函数类似setTimeout，只调用一次。

function draw() { requestAnimationFrame(draw); // ... Code for Drawing the Frame ...
}

递归调用，就可以实现定时器。

但是，这样完全跟浏览器帧频同步了，无法自定义动画的帧频，是无法满足需求的。

接下来需要考虑如何控制帧频。

简单做法：

var fps = 30;
function tick() {setTimeout(function() {requestAnimationFrame(tick);draw(); // ... Code for Drawing the Frame ...}, 1000 / fps);
}
tick();

这种做法，比较直观的可以发现，每一次setTimeout执行的时候，都还要再等到下一个requestAnimationFrame事件到达，累积下去会造成动画变慢。

自行控制时间跨度：

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;function tick() {requestAnimationFrame(tick);now = Date.now();delta = now - then;if (delta > interval) {// 这里不能简单then=now，否则还会出现上边简单做法的细微时间差问题。例如fps=10，每帧100ms，而现在每16ms（60fps）执行一次draw。16*7=112>100，需要7次才实际绘制一次。这个情况下，实际10帧需要112*10=1120ms>1000ms才绘制完成。then = now - (delta % interval);draw(); // ... Code for Drawing the Frame ...}
}
tick();

针对低版本浏览器再优化：

如果浏览器没有requestAnimationFrame函数，实际底层还只能用setTimeout模拟，上边做的都是无用功。那么可以再改进一下。

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;function tick() {if(window.requestAnimationFrame){requestAnimationFrame(tick);now = Date.now();delta = now - then;if (delta > interval) {// 这里不能简单then=now，否则还会出现上边简单做法的细微时间差问题。例如fps=10，每帧100ms，而现在每16ms（60fps）执行一次draw。16*7=112>100，需要7次才实际绘制一次。这个情况下，实际10帧需要112*10=1120ms>1000ms才绘制完成。    then = now - (delta % interval);draw(); // ... Code for Drawing the Frame ...   }}else{setTimeout(tick, interval);　　　　draw();}
}
tick();

最后，还可以加上暂停。

var fps = 30;
var pause = false;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;function tick() {if(pause)return;if(window.requestAnimationFrame){...}else{...}
}
tick();

指定FPS帧频，requestAnimationFrame播放动画相关推荐

JS：指定FPS帧频，requestAnimationFrame播放动画
Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...
cocosBuilder播放动画
Working with Animations 动画 You can use CocosBuilder for creating character animations, animating com ...
Android PowerImageView实现，可以播放动画的强大ImageView
本文转载自:http://blog.csdn.net/guolin_blog/article/details/11100315 转载请注明出处:http://blog.csdn.net/guolin_ ...
Android 入门第九讲01-音频（本地音乐播放，暂停，继续播放，获取播放时间，快进到指定位置，变速播放，播放data/data/目录下的音频文件，播放网络歌曲）
Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲) 准备 1.储存在raw文件夹 2. ...
CSS 帧动画播放动画
CSS3 帧动画 amimation @keyframes 在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些 ...
[UWP]使用离散式关键帧播放动画
这篇文章介绍离散式关键帧,并使用它做些有趣的动画. 1. 什么是离散式关键帧以DoubleAnimationUsingKeyFrames为例,它支持四种Double的关键帧,其中EasingDoub ...
【游戏开发】定时器循环播放动画
//Windows窗口头文件 #include <windows.h>//swprintf_s函数包含的头文件 #include <tchar.h>//PlaySound函数包 ...
让任务管理器播放动画
一.源起原先在B站上看到各式各样拿Windows任务管理器播放动画的视频,感觉很新奇,也有人无私分享代码.有些视频中的动画是后期加上的,也有些是实时渲染的.不管怎样,像实时渲染这类程序就非常&quo ...
android 自定义view 动画效果,Android自定义view----音乐播放动画
先给大家看一下效果,因为我也不知道这个东西具体叫什么,标题上面写的是"音乐播放动画",可能描述的不太准确. 效果图.gif 前言最近项目中做了一个音频播放的功能,播放条上需要一个 ...

指定FPS帧频，requestAnimationFrame播放动画

指定FPS帧频，requestAnimationFrame播放动画相关推荐

最新文章

热门文章