Lottie，讓你的動畫打開新世界大門
昨天在群里閑聊的時候囤官，有個朋友突然錄了這樣一個視頻萌焰，然后問了一句：
當然可以，有一種高逼格的解決方案不用我們前端寫多少代碼就能快速實現(xiàn)陕见。
他就是大名鼎鼎的 Lottie。俗稱「老鐵」
五分鐘后味抖，我就給這位同學寫了一個 動畫 demo评甜。
Lottie 是 Airbnb 開發(fā)的一款能夠為幾乎所有的客戶端添加動畫效果的開源工具，目前我已經在 iOS仔涩、Android忍坷、RN、小程序熔脂、web 上都使用過 Lottie 來添加我的動畫佩研。
只需要花兩分鐘時間，我們就可以知道如何實現(xiàn)這種比較炫酷的動畫效果霞揉。
第一步旬薯，獲取動畫源文件
Lottie 原理是播放一個動畫文件，我們可以通過該動畫內容支持的開始适秩、結束绊序、暫停、是否循環(huán)等方式來選擇合適的操作方式秽荞。因此骤公，動畫源文件的來源就變得非常重要。
最理想的方式是選擇一個適合你當前項目的 UI 風格扬跋，因此設計該動畫的職責就需要你們項目團隊的 UI 設計師來完成阶捆。UI 設計師可以通過 Adobe After Effects 來設計充滿想象力的動畫效果，然后使用 Lottie 提供的 Bodymovin 插件將設計好的動畫導出為一個 JSON 文件。
拿到這個 JSON 文件之后趁猴，就開始在頁面上開始快速實現(xiàn)該動畫了刊咳。
如果你們團隊沒有厲害的 UI 設計師，需要我們前端自己去尋找風格相近的動畫儡司，我們也可以在下面這個網站上去尋找，這里有大量的已經做好的 Lottie 動畫余指。
該網站提供了部分免費的 Lottie 動畫捕犬，還有許多你滿意的動畫源文件是收費的，我們可以通過開發(fā)者工具酵镜，找到對應動畫的DOM節(jié)點碉碉，直接獲取 JSON 內容。
除此之外淮韭，螞蟻設計團隊還給我們提供了一個 Lottie 動畫在線設計工具：犸良動畫平臺垢粮。
這里提供了大量的插圖、金幣紅包靠粪、人物蜡吧、按鈕、氛圍占键、圖標等動畫效果昔善，我們可以自由組合設計，最后導出生成我們需要的 JSON 文件畔乙。
第二步：找到對應的 npm 包
此處以 React 為例君仆，我們在 npm 上找到一個名為 react-lottie 的包，引入到你的項目中牲距，結合剛才得到的 JSON 動畫源文件返咱，就可以快速實現(xiàn)了。
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牍鞠，我好了咖摹。
我是這波能反殺，關注我解鎖更多前端技能皮服！
