AE動畫轉Web代碼工具指北-Lottie

SexySix 發布于2019-08-23 17:14 / 2896人閱讀

摘要：簡單來說，就是一個可以將動畫轉成可運行在上的插件。使用工具使用前請確保已安裝這以下工具。更詳細內容可參考官網庫最后再分項目框架提供兩個的庫

簡介

Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，設計師可以使用 Adobe After Effects 設計出漂亮的動畫之后，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就可以直接運用在 iOS、Android、Web 和 React Native之上，無需其他額外操作。

簡單來說，Lottie就是一個可以將AE動畫轉成可運行在IOS、Android、Web、React Native上的AE插件。

使用工具

使用前請確保已安裝這以下工具。

插件：bodymovin.zxp

解壓：ZXP Installer

其他。

Lottie預覽：https://www.lottiefiles.com/p...

web bodymovin cdn: https://cdnjs.com/libraries/b...

使用步驟

安裝并解壓bodymovin

打開AE，添加bodymovin擴展

導出data.json文件

詳細可參考：炫酷神器，AE插件Bodymovin.zxp的安裝與使用

API

由bodymovin導出的data.json實際就是動畫的數據文件，我們引入的bodymovin.js庫會對其做相應的解析。接下來我們只需要添加簡單的初始化代碼就可以在運行代碼看到相應的動畫效果了。

以下是最常用的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. 跳轉之某幀并播放

animation.gotoAndStop(time)
OR animation.gotoAndStop(frame)
----
animation.gotoAndPlay(time)
OR animation.gotoAndPlay(frame)

4. 設置fp

animation.setSubframe()
// true: 使用本地環境的fps [默認]
// false: 使用ae原本的fps

5. 事件監聽

animation.onComplete = function () {} // 動畫結束
animation.onLoopComplete = function () {} // 當前循環結束
// 使用addEventListener方式
animation.addEventListener("complete", function () {})
animation.addEventListener("loopComplete", function () {})

一般來說以上的api即可滿足大部分的動畫展示需求了。更詳細內容可參考官網～

Bodymovin庫

最后再分項目框架提供兩個bodymovin的庫

react：react-bodymovin

vue：vue-lottie

GPU云服務器云服務器 js跳轉頁面動畫效果 html免費動畫代碼動畫html代碼大全 Lottie

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104031.html

Lottie-前端實現AE動效

摘要：經調研發現，是個簡單高效且性能高的動畫方案。換言之，設計師用把動畫效果做出來，再用導出相應地文件給到前端，前端使用庫就可以實現動畫效果。項目背景在海外項目中，為了優化用戶體驗加入了幾處微交互動畫，實現方式是設計輸出合成的雪碧圖，前端通過序列幀實現動畫效果：?showImg(https://segmentfault.com/img/bVbp6jB);序列幀：showImg(https...

supernavy 2019-08-23 16:06 評論0 收藏0
前端動畫調研-V1

摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...

ddongjian0000 2019-08-23 11:00 評論0 收藏0
2017-10-20 前端日報

摘要：前端日報精選作者的構思和演繹翻譯新特性大殺器和把動畫轉換成原生動畫菜鳥的學習之路中文舊文與知乎專欄舊文新讀解釋閉包需要幾行代碼知乎專欄前端校招總結個人文章函數式編程系列優雅的使用進行函數編程掘金微軟谷歌三星將一起構建的統一文檔 2017-10-20 前端日報精選 React作者的構思和演繹（翻譯）Make React Great Again —— React v16 新特性大殺器Bo...

Genng 2019-08-21 17:08 評論0 收藏0
H5頁面內使用JSON動畫

摘要：問題背景有一天我們的設計師找到我說，要把頁面中我自己用程序寫的動畫，換成他們給的動畫，原因是有的動畫很復雜，自己寫起來達不到他們的預期效果寫到這里我突然想到一個問題，這么復雜的動畫為什么不使用。。。。問題背景有一天我們的UI設計師找到我說，要把頁面中我自己用程序寫的動畫，換成他們給的json動畫，原因是有的動畫很復雜，自己寫起來達不到他們的預期效果（寫到這里我突然想到一個問題，這么...

anonymoussf 2019-08-30 15:55 評論0 收藏0