高性能动画JSON动画

animejs

它是一个js动画库，是对transform进行封装，使其受js控制、拥有更高性能和很好的兼容。
最重要的是：

1. 提供了很多回调、监听方法。eg:每帧回调、每次循环回调、循环开始的回调。
2. 提供了一个时间轴概念，赋予其属性继承和控制动画执行顺序的能力。
   https://www.animejs.cn/documentation/#cssSelector

lottie - web

以往实现动画方式有三种（不谈游戏）：keyframe、transform、gif。痛点是我们很难实现复杂动画，而js + canvas/svg 应该是目前前端实现复杂动效的最优方案了——lottie移动应用动画效果框架
JSON的信息

lottie-web库的使用:

动画用AE设计动画，导出JSON文件，前端通过库解析就能渲染出来，开发对动画0开发。
import lottie from ‘lottie-web’;
import animationJsonData from ‘xxx-demo.json’; // json 文件

const lot = lottie.loadAnimation({
container: document.getElementById(‘lottie’),
renderer: ‘svg’, //或canvas
loop: true,
autoplay: false,
animationData: animationJsonData,
});

// 开始播放动画
lot.play();

关于svg和canvas的选择

至于为啥，看下面

lottie的svg原理

本质就是利用transform 和 opacity操作图层，

1. 渲染图层，初始化所有图层的 transform 和 opacity
2. 根据帧率 ，计算每一帧对应的 transform 和 opacity 并修改 DOM（大白话就是拿着一堆图片移动、隐藏。只不过这个过程很快很快）

lottle的canvas原理
他和canvas原理一样，即：绘图、擦去、绘图。不断快速地重复。

踩坑：
1.不必要的序列帧。Lottie 的主要动画思想是绘制某一个图层不断的改变 CSS 属性，如果设计师偷懒用了一些插件实现的动画效果，可能会造成每一帧都是一张图，如下图所示，那就会造成这个 JSON 文件非常大，注意和设计师提前进行沟通。
2.部分AE特效不支持。有少量的 AE 动画效果，Lottie 无法实现，有些是因为性能问题，有些是没有做，注意和设计师提前沟通
3.渲染不出来99%情况：设计师输出json问题、库版本问题。

备注

剖析 lottie-web 动画实现原理