点赞

昨天在群里闲聊的时候，有个朋友突然录了这样一个视频，然后问了一句：

当然可以，有一种高逼格的解决方案不用我们前端写多少代码就能快速实现。

他就是大名鼎鼎的 Lottie。俗称「老铁」

五分钟后，我就给这位同学写了一个 动画 demo。

Lottie 是 Airbnb 开发的一款能够为几乎所有的客户端添加动画效果的开源工具，目前我已经在 iOS、Android、RN、小程序、web 上都使用过 Lottie 来添加我的动画。

只需要花两分钟时间，我们就可以知道如何实现这种比较炫酷的动画效果。

第一步，获取动画源文件

Lottie 原理是播放一个动画文件，我们可以通过该动画内容支持的开始、结束、暂停、是否循环等方式来选择合适的操作方式。因此，动画源文件的来源就变得非常重要。

最理想的方式是选择一个适合你当前项目的 UI 风格，因此设计该动画的职责就需要你们项目团队的 UI 设计师来完成。UI 设计师可以通过 Adobe After Effects 来设计充满想象力的动画效果，然后使用 Lottie 提供的 Bodymovin 插件将设计好的动画导出为一个 JSON 文件。

拿到这个 JSON 文件之后，就开始在页面上开始快速实现该动画了。

如果你们团队没有厉害的 UI 设计师，需要我们前端自己去寻找风格相近的动画，我们也可以在下面这个网站上去寻找，这里有大量的已经做好的 Lottie 动画。

该网站提供了部分免费的 Lottie 动画，还有许多你满意的动画源文件是收费的，我们可以通过开发者工具，找到对应动画的DOM节点，直接获取 JSON 内容。

除此之外，蚂蚁设计团队还给我们提供了一个 Lottie 动画在线设计工具：犸良动画平台。

这里提供了大量的插图、金币红包、人物、按钮、氛围、图标等动画效果，我们可以自由组合设计，最后导出生成我们需要的 JSON 文件。

第二步：找到对应的 npm 包

此处以 React 为例，我们在 npm 上找到一个名为 react-lottie 的包，引入到你的项目中，结合刚才得到的 JSON 动画源文件，就可以快速实现了。

demo 代码如下：

import React, { useState } from 'react';
import Lottie from 'react-lottie'
import * as animateData from './01.json'
import * as data2 from './02.json'
export default function LittieDemo() {
  const [play, setPlay] = useState(false)
  const [paused, setPaused] = useState(false)
  const option = {
    loop: true,
    autoplay: true,
    animationData: animateData,
    renderSettings: {
      preserveAspectRatio: 'xxx'
    }
  }
  const option2 = {
    loop: true,
    autoplay: true,
    animationData: data2,
    renderSettings: {
      preserveAspectRatio: 'xxx'
    }
  }
  return (
    <div>
      <Lottie options={option} height={200} width={200} isPaused={paused} />
      <Lottie options={option2} height={200} width={200} isPaused={paused} />
    </div>
  )
}

OK，我好了。