如何实现一个动画库

原生js做动画?我们都知道最简单的方式就是用setInterval/setTimeout来不断地调用某个绘制函数,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var interval = null;
var button = document.getElementById('test');
var end = 500;
function step() {
var w = parseInt(button.style.width, 10);
var v = Math.min(w + 10, end);
button.style.width = w + 10 + 'px';
if(v >= end) {
clearInterval(interval);
}
}
function start() {
interval = setInterval(step, 1000/ 60);
}
button.onclick = start;

运行此示例:

    
    

但是这种实现方法并不具备一般性,比如不好应用线性、淡入、淡出等缓动函数,更具一般性的动画应该具备以下元素:

  • 帧率,fps,理想状态下,该值应该接近于屏幕刷新频率60HZ
  • 动画持续时间,duration
  • 动画开始时间,startTime
  • 动画已花费时间,passedTime
  • 已花费时间百分比,percent,取值范围0~1
  • 缓动函数,delta = easing(percent),通常在这一步中,我们可以应用一些函数来改变动画的变化效果,比如由慢到快或者由快到慢等等
  • 重绘dom元素,step(delta)

例如:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 动画库雏形
function animate(options) {
var startTime = +new Date;
var interval = setInterval(
function() {
var passedTime = +new Date() - startTime;
var percent = passedTime / options.duration;
if(percent > 1) {
percent = 1;
}
var delta = options.easing(percent);
options.step(delta);
if(percent == 1) {
clearInterval(interval);
}
},
1000 / (options.fps || 60)
);
}
// 示例
function move() {
var from = parseInt(button2.style.width, 10);
var to = 500;
animate({
duration: 400,
fps: 60,
easing: function(percent) {
// 这里就简单地以"线性变化"来演示
// 你可以改成其他缓动函数试试
return percent;
},
step: function(delta) {
button2.style.width = from + (to - from) * delta + 'px';
}
});
}
button2.onclick = move;

运行此示例:

    
    

ok,到此我们就完成了一个动画库的雏形,在实际应用中,还有不少细节需要完成,比如动画队列、自动计算初始样式值等。