資訊專欄INFORMATION COLUMN
摘要：簡單來說，就是一個可以將動畫轉(zhuǎn)成可運行在上的插件。使用工具使用前請確保已安裝這以下工具。更詳細內(nèi)容可參考官網(wǎng)庫最后再分項目框架提供兩個的庫
簡介
Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，設(shè)計師可以使用 Adobe After Effects 設(shè)計出漂亮的動畫之后，使用 Lottic 提供的 Bodymovin 插件將設(shè)計好的動畫導(dǎo)出成 JSON 格式，就可以直接運用在 iOS、Android、Web 和 React Native之上，無需其他額外操作。
簡單來說，Lottie就是一個可以將AE動畫轉(zhuǎn)成可運行在IOS、Android、Web、React Native上的AE插件。
使用 工具使用前請確保已安裝這以下工具。
插件：bodymovin.zxp
解壓：ZXP Installer
其他。
Lottie預(yù)覽：https://www.lottiefiles.com/p...
web bodymovin cdn: https://cdnjs.com/libraries/b...
使用步驟安裝并解壓bodymovin
打開AE，添加bodymovin擴展
導(dǎo)出data.json文件
詳細可參考：炫酷神器，AE插件Bodymovin.zxp的安裝與使用
API由bodymovin導(dǎo)出的data.json實際就是動畫的數(shù)據(jù)文件，我們引入的bodymovin.js庫會對其做相應(yīng)的解析。接下來我們只需要添加簡單的初始化代碼就可以在運行代碼看到相應(yīng)的動畫效果了。
以下是最常用的api
1. 初始化let animation = bodymovin.loadAnimation({
animationData, // [必須] data.json文件
path, // data.json文件路徑(animationData/path選其一傳入即可)
container，// [必須] 父容器
renderer, // [必須] 渲染方式
loop,
autoplay
})
2. 暫停/停止/播放
bodymovin.play() bodymovin.pause() bodymovin.stop() // 回到第0幀3. 跳轉(zhuǎn)之某幀并播放
animation.gotoAndStop(time) OR animation.gotoAndStop(frame) ---- animation.gotoAndPlay(time) OR animation.gotoAndPlay(frame)4. 設(shè)置fp
animation.setSubframe() // true: 使用本地環(huán)境的fps [默認] // false: 使用ae原本的fps5. 事件監(jiān)聽
animation.onComplete = function () {} // 動畫結(jié)束
animation.onLoopComplete = function () {} // 當(dāng)前循環(huán)結(jié)束
// 使用addEventListener方式
animation.addEventListener("complete", function () {})
animation.addEventListener("loopComplete", function () {})
一般來說以上的api即可滿足大部分的動畫展示需求了。更詳細內(nèi)容可參考官網(wǎng)～
Bodymovin庫最后再分項目框架提供兩個bodymovin的庫
react：react-bodymovin
vue：vue-lottie
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104031.html
摘要：經(jīng)調(diào)研發(fā)現(xiàn)，是個簡單高效且性能高的動畫方案。換言之，設(shè)計師用把動畫效果做出來，再用導(dǎo)出相應(yīng)地文件給到前端，前端使用庫就可以實現(xiàn)動畫效果。 項目背景 在海外項目中，為了優(yōu)化用戶體驗加入了幾處微交互動畫，實現(xiàn)方式是設(shè)計輸出合成的雪碧圖，前端通過序列幀實現(xiàn)動畫效果：?showImg(https://segmentfault.com/img/bVbp6jB);序列幀：showImg(https...
摘要：支持動畫狀態(tài)的，在動畫開始，執(zhí)行中，結(jié)束時提供回調(diào)函數(shù)支持動畫可以自定義貝塞爾曲線任何包含數(shù)值的屬性都可以設(shè)置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現(xiàn)的能更方便的實現(xiàn)幀動畫，替代復(fù)雜的定義方式。 動畫調(diào)研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應(yīng)用場景，比如...
摘要：前端日報精選作者的構(gòu)思和演繹翻譯新特性大殺器和把動畫轉(zhuǎn)換成原生動畫菜鳥的學(xué)習(xí)之路中文舊文與知乎專欄舊文新讀解釋閉包需要幾行代碼知乎專欄前端校招總結(jié)個人文章函數(shù)式編程系列優(yōu)雅的使用進行函數(shù)編程掘金微軟谷歌三星將一起構(gòu)建的統(tǒng)一文檔 2017-10-20 前端日報 精選 React作者的構(gòu)思和演繹（翻譯）Make React Great Again —— React v16 新特性大殺器Bo...
摘要：問題背景有一天我們的設(shè)計師找到我說，要把頁面中我自己用程序?qū)懙膭赢?，換成他們給的動畫，原因是有的動畫很復(fù)雜，自己寫起來達不到他們的預(yù)期效果寫到這里我突然想到一個問題，這么復(fù)雜的動畫為什么不使用。。。。 問題背景 有一天我們的UI設(shè)計師找到我說，要把頁面中我自己用程序?qū)懙膭赢?，換成他們給的json動畫，原因是有的動畫很復(fù)雜，自己寫起來達不到他們的預(yù)期效果（寫到這里我突然想到一個問題，這么...
閱讀 1541·2023-04-26 02:03
閱讀 4734·2021-11-22 13:53
閱讀 4642·2021-09-09 11:40
閱讀 3807·2021-09-09 09:34
閱讀 2140·2019-08-30 13:18
閱讀 3513·2019-08-30 11:25
閱讀 3308·2019-08-26 14:06
閱讀 2555·2019-08-26 13:52
