web动画小结

Posted 2021-01-12 覃

前端写动画，无非两种方案，一种是通过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.文章排版还有待加强