Lottie，让你的动画打开新世界大门
点赞
昨天在群里闲聊的时候，有个朋友突然录了这样一个视频，然后问了一句：
当然可以，有一种高逼格的解决方案不用我们前端写多少代码就能快速实现。
他就是大名鼎鼎的 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，我好了。
我是这波能反杀，关注我解锁更多前端技能！
网友评论