引言

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师只需要使用 After Effectes （之后简称 AE）设计出动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android 和 React Native之上，无需关心中间的实现细节。

问题描述

公司使用lottie-web动画框架，设计师给了一个带有图片资源的json文件，渲染出来之后会发现具有动画效果，但是图片未加载出来，如下图：

设计师给的文件如下：

**.json

images/**.png

前端代码如下：

import ExchangeSuccessJson from 'static/json/exchange_v_success1.json';
lottie.loadAnimation({
  container: ele,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: ExchangeSuccessJson,
});
复制代码

解决方法

其实 Lottie 动画所需要的图片资源也是可以集成在动画的 JSON 文件中，因此解决方法就是将图片资源整合到动画的 JSON 文件。

我在这篇文章Lottie 动画里有图片怎么办？设计师小姐姐也能帮你减少开发量！里看到了一些解决方案，但是我发现需要跟设计师沟通，让设计师去将图片整合进动画资源，然后再重新生成发给前端。然而作为一名有追求的前端工程师，是否可以自己去快速解决这个问题呢？有的！

前端快速整合图片进动画文件

把文件打包成gzip，上传到design.alipay.com/lolita，压缩以后导出成单独一个json文件。项目中使用这个新的json文件即可。

自己动手，丰衣足食！到此就可以轻松加载图片，并还原动画效果了。

额外：实现lottie动画前几帧播放一次，后面所有的帧数重复播放

上述使用的动画，图片问题已经解决了，但是设计师说他想要的动画效果是前几帧播放一次，后面所有的帧数重复播放。而设计师做出来的lottie动画肯定是播放一次的，前端需要就后几帧进行重复播放，如何做？

import ExchangeSuccessJson from 'static/json/exchange_v_success1.json';
lottieAnimate.current = lottie.loadAnimation({
  container: ele,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: ExchangeSuccessJson,
});
lottieAnimate.current.addEventListener('complete', () => {
  // 假设0-43帧播放一次后，后续的所有循环播放
  lottieAnimate.current && lottieAnimate.current.goToAndPlay(43, true);
});