web动画小结

前端写动画,无非两种方案,一种是通过css,另一种是js

css的方案:

1.transform的单独使用 (IE9+)

rotate(90deg) 2d旋转,也可以理解为沿着3D的Z轴旋转

rotateX(90deg) 沿着3D的X轴旋转,同理还有rotateY rotateZ

translate(100px, 50px) 沿着X方向 Y方向移动100px, 50px

scale(2) 缩放定义 2D 缩放转换。

skew 斜切沿着 X 和 Y 轴的 2D 倾斜转换(平行四边形、梯形的实现)

更详细的transform属性请点击http://www.w3school.com.cn/cssref/pr_transform.asp

2.transition的单独使用 (IE10及以上)

元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终需要的值

特点:需要事件(hover,focus,js)触发,不能重复,不能定义中间状态

transition-property css属性名称(所有属性 'all')

transition-duration 过渡时间

transition-timing-function 速度曲线

transition-delay 延迟时间

四个属性可以简写,如 transition: width 1s ease 0.2s

3.animation单独使用(IE10及以上)

animation-name key-frame名称

animation-duration 过渡时间

animation-timing-function 速度曲线

animation-delay 延迟

animation-iteration-count 播放次数 无限'infinite'

animation-direction是否应该轮流反向播放

六个属性可以简写

transition和animation的差异:

1.transition动画的执行过程就是声明关键帧的过程,而animation动画的事先声明关键帧(@keyframes),然后再调用关键帧

2.transition动画的执行需要有事件(hover、点击事件)来驱动,而animation动画的执行不一定需要驱动

3.transition 不能无限循环,不能指定播放次数,只能定义头尾帧。

animation与transform的混合应用demo:

.App-logo {

position: absolute;

top: 10px;

left: 10px;

animation: App-logo-spin infinite 2s linear;

height: 80px;

}

@keyframes App-logo-spin {

50% {

transform: translate(100px, 100px) // 使用translate代替absolute

// top: 100px;

// left: 100px;

}

}

js的方案

1.setTimeOut/setInterval (不推荐)

2.requestAnimationFrame(兼容性ie10以上)

关于requestAnimationFrame

window.requestAnimationFrame()接收一个函数作为回调,返回一个id

window.cancelAnimationFrame()传入id取消动画

为什么推荐使用requestAnimationFrame而不是setTimeOut/setInterval?

1.requestAnimationFrame 会把每一帧的所有DOM操作集中起来,在一次重绘或回流中完成。且重绘或回流的时间间隔紧跟随浏览器的刷新频率

3.在隐藏或不可见的元素中,requestAnimationFrame将不会重绘和回流,节省的CPU、GPU、内存使用

4.requestAnimationFrame是浏览器专为动画提供的API,浏览器会自动优化方法的调用,若页面不是激活状态,动画自动暂停,节省CPU

最后的总结

1. 尽可能的使用CSS 关键帧动画或者CSS transition。浏览器可以优化大量绘制和组合的时间。

2. 如果一定使用基于JS的动画,尽量使用requestAnimationFrame。尽量不要使用setTimeout, setInterval。

3. 尽量不要在每一帧上改变inline元素,浏览器可以在多方面优化css中声明式动画。

4. 使用2D transforms来代替position:absolution将会显著的提高FPS(每秒传输帧数),因为2D transform有更少的绘制时间和更流畅的动画。 通过改变元素top/left进行动画,在每一帧内,cpu都需要计算该元素的其他样式,特别是相对需要复杂计算的盒阴影,渐变,圆角等样式,最后都需要将这些样式应用到该元素内。从这个角度看,如果对于较为老旧的移动设备进行相对复杂的动画,那么效果肯定不理想。

而通过调用translate,会启动硬件加速,即在GPU层对该元素进行渲染。这样,CPU就会相对解放出来进行其他的计算,GPU对样式的计算相对较快,且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。

5. chrome(版本69.0)可以通过Timeline Frams模式来观测什么让你变慢

6.chrome(版本69.0)可以通过animations来对动画进行微调

6.文章排版还有待加强

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181012G1P3BB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券