Aha Lottie | Lottie 还可以做这些？

Chaos

大盘不会再跌了

什么是 Lottie

Lottie 是 Airbnb 开源的一套动画解决方案 http://airbnb.io/lottie/

这套方案最优秀的地方在于，解放了前端开发者，让设计师可以直接对接到动画实现上

以往前端需要与设计师大量沟（si）通（bi），并且编写大量代码才能实现动画

有了 Lottie 之后就省事多了，只需要设计师通过 AE （最常用的动效设计软件）的插件导出一个 JSON 文件，然后前端通过相应类库调用 play() 方法就行了

所有的动画细节都在 JSON 内，设计师想做任何调整，只需要重新导出 JSON 就行了，前端同学从此解放

可以上 https://lottiefiles.com/popular 看看一些流行的 Lottie 动效

那么 Lottie 看起来只是一个「动效方案」这么简单嘛？还有没有其他的用法？下面就举一些神奇的例子

可控制的动画

由于 Lottie 动画是可以通过程序控制播放的，不少营销活动页上的动画可以考虑采用 Lottie 来实现

比如很常见的「大转盘」「抽奖机」这样的抽奖交互形式，如果设计师做出一个更精致的抽奖动画，我们只需要在用户点击抽奖时，调用 .play() 控制 Lottie 播放就可以了，页面体验会更高大上，比如看下一年多前我们的一个业务例子

Lottie - 可控动画https://www.zhihu.com/video/1196026688327213056

初始化页面时，将 Lottie 控制在第一帧静止，点击抽奖按钮后播放

// 初始化
const animation = lottie.loadAnimation({
  container: element, // the dom element
  loop: true,
  autoplay: false,
  path: 'https://something.com/lottie.json',
});
animation.goToAndStop(1, true);

// 抽奖
btn.addEventListener('click', () => {
  animation.play();
  fetch('/trigger').then(() => {
    animation.stop();
    // 展示抽奖结果
  });
})