資訊專(zhuān)欄INFORMATION COLUMN
摘要：背景使用來(lái)實(shí)現(xiàn)比較復(fù)雜動(dòng)畫(huà)的時(shí)候往往力不從心。所以網(wǎng)上看到的大多數(shù)專(zhuān)題基本上都是使用或者來(lái)做的，但是要對(duì)這些的有一定的了解才能做出來(lái)，而且還要各種代碼，過(guò)程相當(dāng)繁雜。容器該就是的插件導(dǎo)出的文件參考文章
背景
使用css3來(lái)實(shí)現(xiàn)比較復(fù)雜動(dòng)畫(huà)的時(shí)候往往力不從心。所以網(wǎng)上看到的大多數(shù)專(zhuān)題基本上都是使用svg或者canvas來(lái)做的， 但是要對(duì)這些的api有一定的了解才能做出來(lái)，而且還要各種代碼，過(guò)程相當(dāng)繁雜。最近在github上面看到的一個(gè)神奇的插件：bodymovin，可以實(shí)現(xiàn)在 After Effect（可視化操作，不用碼代碼）上面導(dǎo)出 svg的json數(shù)據(jù)，然后在html上引入bodymovin.js，簡(jiǎn)單的初始化就可以在網(wǎng)頁(yè)上面實(shí)現(xiàn)svg動(dòng)畫(huà)。amazing!
安裝github上面的使用教程 https://github.com/bodymovin/...
具體的插件安裝也可參考文章
http://www.mq2014.com/after-e...
html
html頁(yè)面引入 bodymovin.js
詳情語(yǔ)法和選項(xiàng)請(qǐng)參考 github， wrapper為要出現(xiàn)動(dòng)畫(huà)的DOM，path為匯出的json檔位置。
var svgContainer = document.getElementById(‘container’);
var animItem = bodymovin.loadAnimation({
wrapper: svgContainer,//svg容器
animType: ‘svg’,
loop: true,
path: ‘data.json’ //該json就是 After Effect的 bodymovin插件導(dǎo)出的json文件
});
參考文章
http://www.mq2014.com/after-e...
http://www.jianshu.com/p/d887...
https://github.com/bodymovin/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/81457.html
摘要：簡(jiǎn)單來(lái)說(shuō)，就是一個(gè)可以將動(dòng)畫(huà)轉(zhuǎn)成可運(yùn)行在上的插件。使用工具使用前請(qǐng)確保已安裝這以下工具。更詳細(xì)內(nèi)容可參考官網(wǎng)庫(kù)最后再分項(xiàng)目框架提供兩個(gè)的庫(kù) 簡(jiǎn)介 Lottie 是 Airbnb 開(kāi)源的一套跨平臺(tái)的完整的動(dòng)畫(huà)效果解決方案，設(shè)計(jì)師可以使用 Adobe After Effects 設(shè)計(jì)出漂亮的動(dòng)畫(huà)之后，使用 Lottic 提供的 Bodymovin 插件將設(shè)計(jì)好的動(dòng)畫(huà)導(dǎo)出成 JSON 格式，...
摘要：經(jīng)調(diào)研發(fā)現(xiàn)，是個(gè)簡(jiǎn)單高效且性能高的動(dòng)畫(huà)方案。換言之，設(shè)計(jì)師用把動(dòng)畫(huà)效果做出來(lái)，再用導(dǎo)出相應(yīng)地文件給到前端，前端使用庫(kù)就可以實(shí)現(xiàn)動(dòng)畫(huà)效果。 項(xiàng)目背景 在海外項(xiàng)目中，為了優(yōu)化用戶體驗(yàn)加入了幾處微交互動(dòng)畫(huà)，實(shí)現(xiàn)方式是設(shè)計(jì)輸出合成的雪碧圖，前端通過(guò)序列幀實(shí)現(xiàn)動(dòng)畫(huà)效果：?showImg(https://segmentfault.com/img/bVbp6jB);序列幀：showImg(https...
摘要：什么是是一個(gè)可以通過(guò)插件來(lái)解析動(dòng)畫(huà)，并生成格式的文件。對(duì)于復(fù)雜的動(dòng)畫(huà)，開(kāi)發(fā)同學(xué)要用很長(zhǎng)的時(shí)間來(lái)實(shí)現(xiàn)，并且還有可能無(wú)法達(dá)到設(shè)計(jì)同學(xué)的最初的效果。是一個(gè)基于的動(dòng)畫(huà)效果實(shí)現(xiàn)組件。它基于開(kāi)源項(xiàng)目，可以將導(dǎo)出的文件渲染成動(dòng)畫(huà)效果。 什么是Lottie Lottie是一個(gè)可以通過(guò)bodymovin插件來(lái)解析Adobe After Effects動(dòng)畫(huà)，并生成json格式的文件。該json文件可以通過(guò)...
閱讀 2629·2021-11-23 09:51
閱讀 861·2021-09-24 10:37
閱讀 3612·2021-09-02 15:15
閱讀 1962·2019-08-30 13:03
閱讀 1881·2019-08-29 15:41
閱讀 2624·2019-08-29 14:12
閱讀 1424·2019-08-29 11:19
閱讀 3301·2019-08-26 13:39
