animation动画在ios掉帧闪烁的问题

当你在使用@keyframes 动画时,如果做的动画比较复杂的话,就会发现一个问题,那就是不流畅,掉帧,可能在PC端还不是很明显,但在移动端你就会发现严重地掉帧。这是因为,如果@keyframes 改变的属性是与layout相关的话,就会触发重新布局,导致渲染和绘制的时间会更加地长。 所以,我们应该尽可能地使用不会触发重新布局的属性完成我们的动画。

触发重新布局的属性有: width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
不会出发重新布局的属性有:transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,774评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,826评论 0 11
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,008评论 25 709
  • 假日第二天,基本所有人经历了不同程度的堵车后部都到达了他们的目的地,然后大部分人开始陪娃晒娃。我们留了在原地...
    前晚阅读 1,683评论 0 1
  • .春有百花秋有月,夏有凉风冬有雪;若无闲事挂心头,便是人间好时节。 --宋.无门慧开 这一首诗偈,是无门慧开禅师写...
    朝今朝阅读 1,781评论 0 0