移动前端工做的那些事---前端制做之动画效率问题简析

动画特效方面，尤为兼容安卓系统，就和互联网端兼容IE6同样麻烦。好多效果不错的创意都由于不兼容安卓系统而夭折。归根到底仍是由于安卓浏览 器性能的问题。这里篇外话一下，安卓手机的硬件能够甩苹果一条街。但在浏览器上表现的则相反。如今安卓系统已经发展到android 4.X了.可分配给浏览器的内存仍是少的可怜！貌似不足10%; 因此一些很流畅的动画效果在IOS上跑一点压力没有。但在android上跑卡的要命！但愿android 5.0时能够多给点内存在浏览器上，尽可能提高一下浏览器的性能比。

 

言归正传，在移动端动画效果上，使用css3动画要比jquery动画效率高的多。在安卓手机上表现尤为明显！因此移动端动画以css3动画为优先。

 

咱们知道css3动画分为两大类： animation和transform，这二者根据实际项目需求来分别使用。前者为关键帧动画，后者为变换动画。关键帧动画多用于可循环动画。而变换动 画多用于一次性动画。固然这也不是绝对的。二者是能够相互转换使用的。究竟这二者在移动端那个更省浏览器性能，我参考了大量的文档也没有得出什么结论来。 总之我的认为差很少吧。关键仍是代码写的是否合理。方法是否应用得当。

 

经过作这个实际项目的大量效果测试得出一些本身的观点。你们仅供参考。

 

第一，先说说transform：

 

好比有一个需求，我须要将一个总体元素从下至上移动到屏幕上，这里有不少办法来加以实现。举例：要想让一个元素动起来，咱们须要给这个元素先加一个原始的动画样式；

#erjidiv{

position: absolute; 

width: 100%; 

heigth:600px;

top: 0px; 

left: 0px; 

background-color:#000; 

-webkit-transform:translateY(100%);  

-webkit-transition:-webkit-transform 0s 0s;

}

而后经过某些事件接口修改这个样式便可

$("#erjidiv").css({

     "-webkit-transform":"translateY(0%)",

     "-webkit-transition":"-webkit-transform 0.5s ease-out 1s",

 })

 

这样经过位移Y轴translateY的方式.延迟1s 由快变慢的方式完成了动画。

 

在互联网中运用的CSS3样式。你们很习惯都使用 "-webkit-transition":"all 0.5s ease-out 1s",

但在移动端为了性能问题不推荐这么作。all所包含的是全部属性。若是只是某一处只运用了该动画的话。那么没有什么太大的区别，至少肉眼看不出来。但若是 在同一时间实行多处元素动画的话。使用all属性就会有卡顿现象。而只写改变某个属性的话则该现象基本能够杜绝了。尤为在安卓上表现明显。因此此处我只使 用了-webkit-transform属性。

 

有童靴会问，我改变其top的坐标值不是同样能够移动嘛；好比这样：

 

#erjidiv{

position: absolute; 

width: 100%; 

heigth:600px;

top: -600px; 

left: 0px; 

background-color:#000; 

-webkit-transition:top 0s 0s;

}

 

 

$("#erjidiv").css({

     "top":"0px",

     "-webkit-transition":"top 0.5s ease-out 1s",

 })

 

是的，这样依然能够达到该效果。但这么作显然在动画效率上不高。我参考了一些文章，说这么作效果还不如jquery动画效率高。这点我没有拿jquery 动画和这个比较过。但这个和前者比较过。确实从流畅度来说不如前者。尤为是同一时间多个元素同时执行动画。另外，像top、left、width、 height等这些css基础属性在移动端不到无可奈何的状况下仍是少参与动画的好。真的是很影响动画效率。咱们使用css3的-webkit- transition的方式来作动画。与其门当户对配合的也应该是css3的属性-webkit-transform，二者完美结合才能在最大程度上提高 动画效果。下降浏览器内存损耗。

 

此外，有童靴极可能使用互联网作动画的方式来作移动端动画（之前我也这么干过……）好比一个元素在静止状态时，采用了样式A。当它:hover时采用样式 B。这样就实现了动画。把这种制做动画的方式搬到移动端同样也是能够的。其原理无非是两个样式的切换。那么根据这个原理上面的需求还能够变成这样：

 

 

 

.style1{

position: absolute; 

width: 100%; 

heigth:600px;

top: 0px; 

left: 0px; 

background-color:#000; 

-webkit-transform:translateY(100%);  

-webkit-transition:-webkit-transform 0s 0s;

}

 

 

.style2{

position: absolute; 

width: 100%; 

heigth:600px;

top: 0px; 

left: 0px; 

background-color:#000; 

-webkit-transform:translateY(0%);  

-webkit-transition:-webkit-transform 0.5s ease-out 1s;

}

 

$("#erjidiv").removeClass("style1").addClass("style2");

 

这样，经过移除和添加样式也能够实现上面的需求。那么这种办法是否是效率也比较高呢？

经过实际测试，当多个元素同时动画的时候。使用修改其样式也就是第一种办法要比这种添加和删除样式高效的多。因此，若是使用-webkit- transform这种动画方式的时候，最好的方案就是第一种，使用js修改其动画样式的效率是最高的。其余的方法效率都不高。不推荐在移动端上使用。

 

 

第二，再说说animation：

 

严格意义上来说。transform方式不算是动画。只能算是变换。而animation才是正宗的动画。使用animation方式作动画，咱们不得不 提到关键帧@-webkit-keyframes。经过对其起始状态和终点状态之间的过程设置来造成动画。关于关键帧动画的使用就不举例说明了。百度一下 有不少。

 

animation动画我我的理解多用于循环动画的地方。在这种动画需求下使用效率是最高的。优势是能够任意添加动做状态。缺点我的认为是不易进行控制。 最大的缺陷是使用js没法获取到关键帧里面的动画状态参数。我想动态的改变关键帧里的变化数值，但没法作到。这里面的值只能写死或是使用百分比来代替具体数值。在移动端各类适配的需求下。很难有太灵活的变化。不过好像有js插件能够写关键帧动画。但我因为时间问题，尚未这方

面的详细研究。若是哪位同仁有这方面的经验，能够赐教一二。

 

之因此说它不易控制是没有一个好的启动切入点。目前我所知的办法就是当我要启动一个关键帧动画的时候，我须要给这个元素临时添加一个样式。

 

这个样式里写入了引用关键帧动画的-webkit-animation-name：XXX，而后设置周期、播放次数、变化方式等等参数。好比：

 

.fangda {

-webkit-animation-name: fangda;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: ease-out;

-webkit-animation-iteration-count: infinite;

}

 

@-webkit-keyframes fangda {

  0% {-webkit-transform:scale(1,1)}

 50% {-webkit-transform:scale(1.2,1.2); }

100% {-webkit-transform:scale(1,1); }

}

 

 

$("#erjidiv").addClass("fangda");

 

这样当我给元素添加样式后，动画开始启动。这种方法其实又回到了刚才在谈到transform方式时的用到的第三种方法。当我一瞬间同时使用好几个关键帧 动画时，使用这种添加的方式没有修改其样式的效率高。会形成一瞬间卡顿的现象。这个尤以在安卓系统手机上表现明显。但第一种方法可使用JS修改其样式。 而关键帧动画却修改不了。

 

后来为了提升性能。想到不如先把样式加上。但我先让其暂停。想让它运行的时候再使用，因而乎想到了关键帧动画里有animation-play- state这个属性来控制暂停和运行。测试后果真能够。测试系统（android4.0以上，IOS6以上）。经过对比这种控制暂停，而后再让其启动的方 式比单一添加样式的效率高不少。

 

.fangda {

-webkit-animation-name: fangda;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: ease-out;

-webkit-animation-iteration-count: infinite;

-webkit-animation-play-state:paused;

}

 

 

@-webkit-keyframes fangda {

  0% {-webkit-transform:scale(1,1)}

 50% {-webkit-transform:scale(1.2,1.2); }

100% {-webkit-transform:scale(1,1); }

}

 

$("#erjidiv").css("-webkit-animation-play-state","running");//根据需求再启动

 

 

经过以上的修正能够大大提升css3动画在移动端浏览器上效果的提高。即使在安卓浏览器上也能有较好的体现。

 

最后，再说说其余方面的我的心得；考虑到移动端浏览器性能问题。尽可能避免同时多个动画。关键帧动画不用时，要么暂停掉。要么直接删除样式。我的更倾向于后者。有时候为了提升流畅度。必要时还要打开其渲染3d功能。在全局样式中进行设置以下样式：

 

-webkit-transform-style:preserve-3d;

-webkit-backface-visibility:hidden;

-webkit-transform:translate3d(0,0,0)

 

另外，浏览器在加载过程当中会有一个预存渲染功能（专业术语叫什么忘记了，我的命名的便于理解），就是当要触发某些动画样式的时候，最好浏览器事先有过渲 染，这样在执行起来的时候就会更加流畅。（由于节省了渲染时间）这也就很好的解释了为何采用添加的方式没有改变其样式效率高！不添加动画样式时。浏览器 事先是没有渲染的。添加时它须要临时渲染再执行动画，这须要时间。而改变样式倒是在浏览器事先已经渲染好了动画，只不过不执行或是在暂停状态。须要时就可 以立刻启动。因此正是由于有了这个预存渲染的功能。再采用合适的方式时，就能缩短浏览器渲染时间，减小卡顿现象的产生的可能！真正的作到了提升移动端浏览 器css3动画的效率问题！

 

 

原文：http://blog.sina.com.cn/s/blog_3f1fc8950102v0un.html