YUISlide——针对移动设备的动画性能优化
YUISlide这是一个集选项卡切换和幻灯切换功能于一体的小插件，基于YUI3实现，之前主要用在普通的PC终端里，在网厅项目中灵玉同学对Slide进行了改进，增加了手持设备里的小功能，比如手指滑动事件。但Slide的动画在移动端的表现出人意外的糟糕。
在普通的PC平台里，动画的实现大都是通过setInterval函数来完成，jQuery和YUI以及Kissy中亦是如此，只不过帧频有所差异。后来都各自添加了对内置css3 transition的检测，优先使用css3 animation，动画在现代浏览器中的性能又上升了一个台阶。Slide使用了YUI的Anim，在iphone/ipad/android平台中使用的是css3 animation，却依然不流畅，更流畅的动画则需要开启webkit的硬件加速。可以参照之前的一个ppt来了解js动画编程的一些背景知识。
首先要清楚css3的transitions和transform有着细微的差别，css3 transform本质上是将元素的内容作平移，而非直接对元素作属性渐变，因此性能更好，通过Demo可以看出，移动端的Dom操作性能要比css3 animation慢几个数量级。因此要在Slide运行当中尽量减少Dom操作，因此这里对Slide里的跑马灯的实现原理做了微调，即在初始化的时候就处理好待用的Dom节点，而不用在每次执行next()时剪切Dom节点。
另外还有一个css3动画相关属性就是keyframe，这个是用来辅助作复杂动画时用的，通过设定关键帧来作动画，Slide中的简单动画暂时用不到。因此css3动画的几个属性小结如下：
- css3 transition：平滑的改变CSS属性值，和setInterval原理类似，但速度更快
- css3 2d transform：二维变换，CSS属性值未渐变，未用到webGL加速，速度有提升，但提升程度有限
- css3 3d transform：三维变换，CSS属性值未渐变，开启WebGL加速，速度明显提升
- css3 animation：即使用keyframe来模拟动画，用来实现复杂动画，和性能无关
判断是否开启内置动画：
// true:支持，false:不支持 var nativeTransition = "webkitTransition" in document.body.style;
在支持transition的平台中使用translate3d来启用webGL进行硬件加速，注意这里使用transform代替了transition：
animNode.setStyles({
'-webkit-transition-duration': speed + 's',
'-webkit-transform':'translate3d('+dic+',0,0)'
});
最后比较下改造前和改造后的Slide在移动终端里的性能，在Ipad/Iphone中打开下面这两个Demo：
改造前，使用css3 2d transform（性能糟糕）：Demo
改造后，使用css3 3d transform（动画流畅）：Demo
