移动端动画小结

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端动画小结相关的知识,希望对你有一定的参考价值。

一丶jq/zepto animate()方法

  • 可以细化操作,回调方法,但是在移动端(安卓)卡顿

二丶css3 animation

  • 可以用@keyframes细化过渡效果,没有回调操作,只能监控animation/transition是否已完成。

三丶transform 过渡top/left 导致重绘,手机性能不好时依然卡顿

  • 使用绝对位置定位页面上的动画元素,将其脱离文档流,可以有效的防止重排。
  • 使用transform:translateY/X来移动元素 scale()缩放元素
  • 加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速
  • [参考链接]http://blog.csdn.net/majun000...

四丶RequestAnimationFrame

如果你需要细化过渡效果,但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况,我就遇到了这样的情况。 setTimeout会存在过度绘制,会造成帧丢失,继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因(16.7 = 1000 / 60, 即每秒60帧)。而requestAnimationFrame是跟着浏览器绘制来的,不会存在过度绘制,也就不会出现动画卡顿的情况。
参考链接代码

五丶遇到的坑

  • 元素display:none的时候是拿不到transform的值(其他属性没试),解决办法:用visibility: hidden;
  • 过渡动画的时候,先让元素display:block 马上执行css3动画,结果浏览器直接忽略过渡动画,渲染最后的结果。

    解决办法:使用延时器(1ms),延迟一点css3动画的执行。

以上是关于移动端动画小结的主要内容,如果未能解决你的问题,请参考以下文章

移动端代码规范小结

移动端开发经验小结

移动端滑屏全应用移动端动画贞动画函数mTween封装

移动端常见问题(动画演示)

vue移动端转场动画

vue移动端转场动画