先发表一下感慨，作为一个二流后台码农，想要做前端（面试阿里，被一个简单问题直接问挂，问题就是只用js实现一个1秒内的元素滑动效果），发现很多基础都不会，所以我就差一些基础的东西补补。
本文除了上面的牢骚都是翻译 -> 原文
大部分的时候，是框架帮助我们实现动画。
但是有的时候我们会想知道用纯js动画到底怎么写，用纯js写动画的一些坑。
即使有框架的帮助，要构建复杂的动画仍然要求我们掌握这项技能。
基础
js动画的实现是通过渐变DOM的styles或者是创建canvas。
整个动画过程被分为一个个小部分，每一个小部分被叫做timer。因为timer的间隔很短所以动画看起来是连续的。
伪代码如下：
var id = setInterval(function(){
/*展示当前的状态（帧）*/
if(/*完成了*/) clearInterval(id);
}, 10)
这里，每个帧是10ms, 也就是每秒钟100帧。
大多数的js框架默认使用10 ~15ms。 当浏览器足够快的时候，间隔越短看起来越顺滑流畅。 但是如果这个动画需要很高计算量，以至于使用了100%的cpu，那么动画就看起来卡爆了，在这个时候，我们应该适当的提高间隔的时间，例如45ms（也就是1秒钟25帧左右），也接近于电影24帧的效果了。
用
setInterval而不是setTimeout
由于我们希望固定秒数内执行完一帧，而不是每一帧之间固定秒数。这里有文章讲setInterval和setTimeout
例子
假如我们需要通过改变element.style.left以每10ms 10ps 移动一个元素从0px到100px。
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="/files/tutorial/browser/animation/animate.css">
<script>
function move(elem) {
var left = 0
function frame() {
left++ // update parameters
elem.style.left = left + 'px' // show frame
if (left == 100) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 10) // draw every 10ms
}
</script>
</head>
<body>
<div onclick="move(this.children[0])" class="example_path">
<div class="example_block"></div>
</div>
</body>
</html>
动画重构
为了使我们的动画函数具有通用性，我们引入一些变量：
- delay：帧之间的间隔
- duration: 整个动画的用时
- start: 动画开始时间
- timePassed: 动画已经消耗的时间
- progress: 动画的时间进度（timePassed/duration）0~1
- delta(progress): 这是一个函数，代表时间进度（progress）和动画进度的关系。
例如：
Paste_Image.png
但是我们也许希望我们的动画开始的时候慢一些，然后后面加速，例如在时间0.5的时候动画进度0.25，然后越来越快，知道100%。
Paste_Image.png
delta(progress)是时间进度和动画进度的对应关系。
动画进度不是height而是currentHeight/height，是一个比值。
文章后面我们将通过例子研究几种delta。
- step(delta)：这个函数是真正执行动画的函数，它接受delta参数，应用delta来处理element.style，对于高度的例子，将是：
function step(delta){
elem.style.height = 100 * delta + '%';
}
总结一下这些主要的参数：
- delay 是 setInterval 第二个参数
- duration 是这个动画需要多长时间完成
- progress 是时间的进度（currentTime/duration）
- delta 是时间进度和动画进度的对应关系，根据当前时间来算出动画的进度。
- step 真正执行动画（操作
elem.style）的函数。它接受当前动画进度，然后应用到element上。
通用的动画函数
让我们利用上面讨论的这些参数来实现一个轻量的，可扩展的动画核心。
动画函数仅仅管理动画的时间，把其他工作留给delta和step。（这符合一般的设计原理，把固定的东西抽离出来，这里是时间的管理）。
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration;
if(progress > 1) progress = 1;
var delta = opts.delta(progress);
opts.step(delta);
if(progress == 1) clearInterval(id);
}, opts.delay || 10);
}
opts应该包括：
- delay
- duration
- step
- delta
例子
function move(element, delta, duration) {
var to = 500
animate({
delay: 10,
duration: duration || 1000, // 1 sec by default
delta: delta,
step: function(delta) {
element.style.left = to*delta + "px"
}
})
}
用户提供duration, duration, delta 然后把工作托付给animate。
delta = function(p){ return p; }：代表动画是线性的。
step：利用delta的结果（0~1）来处理动画。
用法如下：
<div onclick="move(this.children[0], function(p) {return p})" class="example_path">
<div class="example_block"></div>
</div>
网友评论