码迷,mamicode.com
首页 > 移动开发 > 详细

移动端动画小结

时间:2020-04-30 23:24:21      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:开启   方法   form   硬件加速   ram   demo   手机   直接   过渡效   

一丶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动画的执行。

移动端动画小结

标签:开启   方法   form   硬件加速   ram   demo   手机   直接   过渡效   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12811506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!