JavaScript动画漫谈

动画现在基本是web站点必备项，各大JS框架都封装了相应的代码。QWrap也内置了一个实现，支持常见的动画效果和算子及队列播放，这里有示例。JS动画的实现有多种方式，各自有哪些区别，QWrap使用的哪一种？本文闲聊这个话题。

一、使用浏览器的定时器（setInterval/setTimeout）。这种动画实现方式很早就被大家广泛使用，原理简单，兼容性好。最核心的原理就是利用定时器，在一定时间内（duration），以一定的间隔（frameTime）执行动画函数（callback）。在动画函数里可以改变元素大小、位置（css属性值）；可以改变元素滚动条位置（scrollTop/scrollLeft）；甚至用来改变文本内容（倒计时）。

动画间隔决定了动画的每秒帧数（FPS），一般的，FPS越高，动画就表现得越流畅，FPS偏低，动画就会不流畅、卡顿。JQuery中，动画间隔默认为13ms，也就是说理想状态下，动画的每秒帧数是70多。实际上，由于JS定时器精度问题，间隔不可能太小；在计算机资源占用比较大时，这个间隔也没办法得到保证；更为严重的是，新一点的浏览器在页面不可见时（例如切换到其他tab，浏览器被最小化），会自动提高定时器执行间隔，firefox5开始，setInterval的间隔在浏览器最小化之后至少被提高到1000ms。

动画时长 = 播放总帧数 * 帧间隔平均值。由于帧间隔不可控，可能被提高到1000ms甚至更高，那么实现动画时面临两个选择：要保证播放总帧数，动画时长就会增加；要保证动画时长，就必须牺牲掉总帧数。实际上我们一般采用第二种方式，也就是丢帧保时的策略来实现动画，来看一个简单的例子：

function start() {
startTime = new Date;
timerId = setInterval(animFun, frameTime);
}
</script>
<div id="animated" onclick="start()" style="position: absolute; left: 0px; padding: 50px;background: crimson; color: white">Click Me</div>
在动画开始时记录一个初始时间，动画函数里用当前时间减去初始时间，得到的时间差除以总时长，可以得到动画执行进度（per）。再根据per去改变元素的css属性值，就实现了一个最简单的动画。

上面例子中，方块运动是匀速的，平淡无奇。想要运动轨迹更有趣，就需要引入动画算子。动画算子是一个函数，把动画进度per转换为另外一个值，在上面例子基础上改进下：

function start() {
startTime = new Date;
timerId = setInterval(animFun, frameTime);
}
</script>
<div id="animated" onclick="start()" style="position: absolute; left: 0px; padding: 50px;background: crimson; color: white">Click Me</div>
这下方块运动就有趣多了，上面例子中的bounceOut就是一个算子。有些动画组件算子可能会接受更多参数（运动距离、时间等），但是QWrap中，算子都只需要传per。这里有QWrap内置算子的演示。

二、W3C有一份WindowAnimationTiming interface规范，也可以用来实现动画。它的核心方法是requestAnimactionFrame和cancelRequestAnimationFrame。各大浏览器新版都有实现，这部分内容我之前介绍过，不了解的同学可以点过去看，看完记得再回来。

可以看到，W3C这份规范提供的动画没有帧间隔时间这个概念，也就是何时触发下一帧完全由浏览器控制。其它方面跟setInterval动画几乎一样，上面的算子也可以直接拿来用。下面说下我遇到的几个坑：

首先是firefox：在11之前的某个版本开始，firefox实现了mozRequestAnimationFrame，却没有提供对应的mozCancelRequestAnimationFrame，那时网上有文章会提到通过“注册、移除moz私有的beforepaint事件”来模拟这个事件。坑爹的是，firefox11开始有了mozCancelRequestAnimationFrame，但老方案直接抛异常。

webkit下也有坑：某个诡异的webKit版本下，webkitRequestAnimationFrame没有给回调函数传time参数，更神奇的是一些webkit居然传递错误格式的time。为此，在webkit下我们通常不用参数里的time，改为自己new Date。

综上，由于各浏览器对标准实现的不一致和bug，最终我们在QWrap中并没有使用基于原生动画函数的版本。不过也可以像下面这样变通使用，来绕过那些坑：

if(!requestAnimationFrame) { alert('你的浏览器不支持requestAnimationFrame！'); }

function start() {
    startTime = new Date;
    timerId = 1;
    requestAnimationFrame(animFun);
}
</script>
<div id="animated" onclick="start()" style="position: absolute; left: 0px; padding: 50px;background: crimson; color: white">Click Me</div>
三、CSS3动画。css3中的Transition可以用来平滑改变css属性值。简而言之，给元素设置下面这样的css样式后，再改变transition-property指定属性的值，浏览器会自动处理剩下的事情：

transition-property :* //需要动画的css属性，如height，all表示全部属性
transition-duration:*//持续时间，duration，单位s
transition-delay:* //延迟时间，单位s
transition-timing-function:*//动画算子，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
通常，我们在css里写好transition规则，再改变元素class就可以拥有css3动画了。但是为了使用更方便，我们也可以把这个过程封装成为js组件。监听动画执行结束，也需要依赖js。

具体的代码就不贴了，后面例子里都有，这里说一些需要关注的地方。本来，检测浏览器是否支持css3动画可以通过创建临时元素，判断'transitionProperty' in el.style是否为true就可以了；但是，万恶的浏览器厂商前缀（就是那些-webkit-、 -moz-、-o-、-ms-），使这个过程变得复杂多了。最坑爹的是IE，css里可以用“-ms-transition-property”，js中对应的style，却是“el.style.msTransitionProperty”。QWrap在设置css的函数中，会先调用StringH.camelize函数处理属性名，会把“-ms-xxx-ooo”变成“MsXxxOoo”，IE不认！其他浏览器则无论首字母是否大小都支持。<

补充：web前端 , JavaScript ,