前言
前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现，有些手机的动画会“快”一点，有些手机的动画会“慢”一点，有些慢得还不是一两点。
通过查找资料发现，基于帧的算法（Frame-based）来实现动画会导致不同帧率的平台体验不一致，而基于时间（Time-based）的动画算法可以很好地改良这种情况，让不同帧率的情况下都能达到较为统一的速度上的体验。
本文介绍的就是基于帧动画算法和基于时间动画算法的差异，以及对基于时间算法的改良。
基于帧的动画算法（Frame-based）
相信做过前端的人对使用JavaScript实现动画的原理都很熟悉。现在让你实现一个让一个div从左到右来回移动的JS代码，你可能嗖嗖就写出来了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
function moveDiv(div, fps) {
var left = 0;
var param = 1;
function loop () {
update();
draw();
}
function update() {
left += param * 2;
if (left > 300) {
left = 300;
param = -1;
} else if (left 0) {
left = 0;
param |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
| 
注册
登录
