常见大屏实现动效的方法css3 :transition;animation js:定时器；requestAnimatio

动效实现常见方法

css3 （transition;animation）：

1. 简单流畅（不触发DOM重绘的前提下不会进入主线程渲染，尽量使用transform和opcacity）

js（定时器；requestAnimationFrame）：

1.定时器是异步任务，只有当主线程任务执行完后才会执行队列中的任务，时间间隔与屏幕刷新间隔一致，易卡顿抖动或丢帧；

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

canvas与svg：

1.canvas依赖分辨率，通过对画布重绘来实现动效效果

2.svg是矢量图形，可以通过改变某个节点来实现动画效果

图片（gif，APNG,webP）：
1.Gif 上一代动画图像，支持广泛，制作简单，但是易失真齿边，不支持透明。

2.APNG:色彩丰富，支持半透明，兼容性相对较差（chrome59+）,文件较大

3.webP:下一代动画图像，色彩丰富，支持半透明，浏览器兼容性好，文件小

视频（MP4）：

1.使用简单，文件大，局限性较多

json（lottie）:

1.通过读取json文件信息实现动画效果，性能好，但是无法交互，不支持加载文字