44.【javascript】——css动画，js动画(2021-09-27)

JS动画：

• 优点：

1. 过程控制，可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

2. 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。

3. CSS3有兼容性问题，而JS大多时候没有兼容性问题。

• 缺点：

1. JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。

2. 代码的复杂度高于CSS动画。

CSS动画：

• 优点（浏览器可以对动画进行优化）：

1. 集中所有DOM，一次重绘重排，刷新频率和浏览器刷新频率相同。

2. 代码简单，方便调试

3. 不可见元素不参与重排，节约CPU

4. 可以使用硬件加速（通过 GPU 来提高动画性能）。

• 缺点：

1. 运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件，无进度报告。

2. 代码冗长。

1.css动画

  动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes 规定动画

animation 所有动画的简写属性

animation-name 需要绑定到选择器的keyframe属性

animation-timing-function 动画的速度曲线

animation-delay 动画开始之前的延迟

animation-iteration-count 动画应该播放的次数

animation-diretion 是否应该轮流反向播放动画

2.js动画

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。

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

【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销