亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

AE動(dòng)畫轉(zhuǎn)Web代碼工具指北-Lottie

SexySix / 3007人閱讀

摘要：簡(jiǎn)單來(lái)說(shuō)，就是一個(gè)可以將動(dòng)畫轉(zhuǎn)成可運(yùn)行在上的插件。使用工具使用前請(qǐng)確保已安裝這以下工具。更詳細(xì)內(nèi)容可參考官網(wǎng)庫(kù)最后再分項(xiàng)目框架提供兩個(gè)的庫(kù)

簡(jiǎn)介 
Lottie 是 Airbnb 開源的一套跨平臺(tái)的完整的動(dòng)畫效果解決方案，設(shè)計(jì)師可以使用 Adobe After Effects 設(shè)計(jì)出漂亮的動(dòng)畫之后，使用 Lottic 提供的 Bodymovin 插件將設(shè)計(jì)好的動(dòng)畫導(dǎo)出成 JSON 格式，就可以直接運(yùn)用在 iOS、Android、Web 和 React Native之上，無(wú)需其他額外操作。

簡(jiǎn)單來(lái)說(shuō)，Lottie就是一個(gè)可以將AE動(dòng)畫轉(zhuǎn)成可運(yùn)行在IOS、Android、Web、React Native上的AE插件。

使用 工具

使用前請(qǐng)確保已安裝這以下工具。

插件：bodymovin.zxp

解壓：ZXP Installer

其他。

Lottie預(yù)覽：https://www.lottiefiles.com/p...

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

使用步驟

安裝并解壓bodymovin

打開AE，添加bodymovin擴(kuò)展

導(dǎo)出data.json文件

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

API

由bodymovin導(dǎo)出的data.json實(shí)際就是動(dòng)畫的數(shù)據(jù)文件，我們引入的bodymovin.js庫(kù)會(huì)對(duì)其做相應(yīng)的解析。接下來(lái)我們只需要添加簡(jiǎn)單的初始化代碼就可以在運(yùn)行代碼看到相應(yīng)的動(dò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 [默認(rèn)]
// false: 使用ae原本的fps
5. 事件監(jiān)聽(tīng) 
animation.onComplete = function () {} // 動(dòng)畫結(jié)束
animation.onLoopComplete = function () {} // 當(dāng)前循環(huán)結(jié)束
// 使用addEventListener方式
animation.addEventListener("complete", function () {})
animation.addEventListener("loopComplete", function () {})

一般來(lái)說(shuō)以上的api即可滿足大部分的動(dòng)畫展示需求了。更詳細(xì)內(nèi)容可參考官網(wǎng)～

Bodymovin庫(kù)

最后再分項(xiàng)目框架提供兩個(gè)bodymovin的庫(kù)

react：react-bodymovin

vue：vue-lottie

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104031.html

相關(guān)文章

  • Lottie-前端實(shí)現(xiàn)AE動(dòng)效

    摘要：經(jīng)調(diào)研發(fā)現(xiàn)，是個(gè)簡(jiǎn)單高效且性能高的動(dòng)畫方案。換言之，設(shè)計(jì)師用把動(dòng)畫效果做出來(lái)，再用導(dǎo)出相應(yīng)地文件給到前端，前端使用庫(kù)就可以實(shí)現(xiàn)動(dòng)畫效果。 項(xiàng)目背景 在海外項(xiàng)目中，為了優(yōu)化用戶體驗(yàn)加入了幾處微交互動(dòng)畫，實(shí)現(xiàn)方式是設(shè)計(jì)輸出合成的雪碧圖，前端通過(guò)序列幀實(shí)現(xiàn)動(dòng)畫效果：?showImg(https://segmentfault.com/img/bVbp6jB);序列幀：showImg(https...

    supernavy 評(píng)論0 收藏0

  • 前端動(dòng)畫調(diào)研-V1

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

    ddongjian0000 評(píng)論0 收藏0

  • 2017-10-20 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選作者的構(gòu)思和演繹翻譯新特性大殺器和把動(dòng)畫轉(zhuǎn)換成原生動(dòng)畫菜鳥的學(xué)習(xí)之路中文舊文與知乎專欄舊文新讀解釋閉包需要幾行代碼知乎專欄前端校招總結(jié)個(gè)人文章函數(shù)式編程系列優(yōu)雅的使用進(jìn)行函數(shù)編程掘金微軟谷歌三星將一起構(gòu)建的統(tǒng)一文檔 2017-10-20 前端日?qǐng)?bào) 精選 React作者的構(gòu)思和演繹（翻譯）Make React Great Again —— React v16 新特性大殺器Bo...

    Genng 評(píng)論0 收藏0

  • H5頁(yè)面內(nèi)使用JSON動(dòng)畫

    摘要：?jiǎn)栴}背景有一天我們的設(shè)計(jì)師找到我說(shuō)，要把頁(yè)面中我自己用程序?qū)懙膭?dòng)畫，換成他們給的動(dòng)畫，原因是有的動(dòng)畫很復(fù)雜，自己寫起來(lái)達(dá)不到他們的預(yù)期效果寫到這里我突然想到一個(gè)問(wèn)題，這么復(fù)雜的動(dòng)畫為什么不使用。。。。 問(wèn)題背景 有一天我們的UI設(shè)計(jì)師找到我說(shuō)，要把頁(yè)面中我自己用程序?qū)懙膭?dòng)畫，換成他們給的json動(dòng)畫，原因是有的動(dòng)畫很復(fù)雜，自己寫起來(lái)達(dá)不到他們的預(yù)期效果（寫到這里我突然想到一個(gè)問(wèn)題，這么...

    anonymoussf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<