常见大屏实现动效的方法

动效实现常见方法

        css3 :transition;animation

        js:定时器；requestAnimationFrame

        canvas

        svg

        图片：gif，APNG,webP

        视频：MP4

        json:lottie

        引擎：three.js

        各种方法组合使用

各类实现方法的优缺点

      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文件信息实现动画效果，性能好，但是无法交互，不支持加载文字