react使用lottie-web实现动画

Lottie是现在前端快速实现动画的一种形式，在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。在实际项目开发者，如果lottie库中的动画不满足我们的需求，我们可以叫设计师同学通过 AE 完成动画后，可以使用 AE 的扩展程序 Bodymovin 导出一份 JSON 格式的动画数据，然后我们把json格式的动画导入我们的项目中，实现动画。

lottie官网 http://airbnb.io/lottie/#/web

lottie使用的优点

1. 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
2. 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
3. 设计制作动画，前端展现动画，专业人做专业事，分工合理；
4. 卖家秀即买家秀，还原程度百分之百；
5. 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。

lottie的方法
play: 播放动画
stop: 停止播放动画
pause: 暂停动画
goToAndStop: 跳到某一帧动画，并停止
setDirection: 设置播放方向
setSpeed: 设置播放速度
事件方法
onComplete: 动画播放完成触发
onLoopComplete: 当前循环播放完成触发
onEnterFrame: 播放一帧动画的时候触发
onSegmentStart: 开始播放一个动画片段的时候触发
监听方法
complete
loopComplete
enterFrame
segmentStart
config_ready (when initial config is done)
data_ready (when all parts of the animation have been loaded)
DOMLoaded (when elements have been added to the DOM)
destroy

其他可以参考官网

我的使用

// 引用
import lottie from 'lottie-web';
// hook 用一个state状态接收
 const [btnLottie, setBtnLottie] = useState<any | null>(null);

// 某个条件触发之后set进去 可以自动播放
setBtnLottie(
	lottie?.loadAnimation({
   
	container: btnRef.current,
    renderer: 'svg',
    loop: true,
    assetsPath:'https://xxx.cos.xxxx.myqcloud.com/xxx/xxx/images/',
    path: 'https://xxx.cos.xxxx.myqcloud.com/xxx/xxx/btn.json',
 	// animationData: dataJson, 这里放到了cos上面 用的cdn 所以不用本地引用json
    }),
 );
// 监听动画结束之后 进行一些操作
 stateLottie?.addEventListener('complete', () => {
   
    // 操作
  });

踩坑
1、这里虽然setState了，但是没有给他一个触发提交，也就是我说的play()方法，所以使用的是setTimeout,并且好几个动画同步执行的话，都是异步形式 所以用setTimeout包着
2、设计师可以给的json包含图片也可以图片和json一起给你，一起给你的话 ，本地引用json可以成功；但是如果图片跟json是分开的，由于json里面设置了图片源路径，所以会找不到，同时json也在这个项目域名下面查找

这里无解，没有找到解决办法，后面选择扔到cdn上面，如上面的assetsPath和Path路径

设计师给的json

{
   "v":"5.9.6","fr":15,"ip":0,"op":45,"w":618,"h":101