摘要:經(jīng)調(diào)研發(fā)現(xiàn),是個簡單高效且性能高的動畫方案。換言之,設(shè)計師用把動畫效果做出來,再用導(dǎo)出相應(yīng)地文件給到前端,前端使用庫就可以實現(xiàn)動畫效果。
項目背景
在海外項目中,為了優(yōu)化用戶體驗加入了幾處微交互動畫,實現(xiàn)方式是設(shè)計輸出合成的雪碧圖,前端通過序列幀實現(xiàn)動畫效果:
?
序列幀:
動畫效果:
序列幀:
幀動畫的缺點和局限性比較明顯,合成的雪碧圖文件大,且在不同屏幕分辨率下可能會失真。經(jīng)調(diào)研發(fā)現(xiàn),Lottie是個簡單、高效且性能高的動畫方案。
Lottie是可應(yīng)用于Android, iOS, Web和Windows的庫,通過Bodymovin解析AE動畫,并導(dǎo)出可在移動端和web端渲染動畫的json文件。換言之,設(shè)計師用AE把動畫效果做出來,再用Bodymovin導(dǎo)出相應(yīng)地json文件給到前端,前端使用Lottie庫就可以實現(xiàn)動畫效果。
關(guān)閉AE
下載并安裝ZXP installer
https://aescripts.com/learn/z...
下載最新版bodymovin插件
https://github.com/airbnb/lot...
把下載好的bodymovin.zxp拖到ZXP installer
打開AE,在菜單首選項->常規(guī)中勾選??允許腳本寫入文件和訪問網(wǎng)絡(luò)(否則輸出JSON文件時會失?。?br>
在AE中制作動畫,打開菜單窗口->拓展->Bodymovin,勾選要輸出的動畫,并設(shè)置輸出文件目錄,點擊render
打開輸出目錄會看到生成的JSON文件,若動畫里導(dǎo)入了外部圖片,則會在images中存放JSON中引用的圖片
靜態(tài)URL
https://cdnjs.com/libraries/l...
NPM
npm install lottie-web
調(diào)用loadAnimation
lottie.loadAnimation({ container: element, // 容器節(jié)點 renderer: "svg", loop: true, autoplay: true, path: "data.json" // JSON文件路徑 });vue-lottie
也可以在vue中使用lottie
import lottie from "../lib/lottie"; import * as favAnmData from "../../raw/fav.json"; export default { props: { options: { type: Object, required: true }, height: Number, width: Number, }, data () { return { style: { width: this.width ? `${this.width}px` : "100%", height: this.height ? `${this.height}px` : "100%", overflow: "hidden", margin: "0 auto" } } }, mounted () { this.anim = lottie.loadAnimation({ container: this.$refs.lavContainer, renderer: "svg", loop: this.options.loop !== false, autoplay: this.options.autoplay !== false, animationData: favAnmData, assetsPath: this.options.assetsPath, rendererSettings: this.options.rendererSettings } ); this.$emit("animCreated", this.anim) } }loadAnimation參數(shù)
container | 用于渲染動畫的HTML元素,需確保在調(diào)用loadAnimation時該元素已存在 |
renderer | 渲染器,可選值為"svg"(默認(rèn)值)/"canvas"/"html"。svg支持的功能最多,但html的性能更好且支持3d圖層。各選項值支持的功能列表在此 |
loop | 默認(rèn)值為true??蓚鬟f需要循環(huán)的特定次數(shù) |
autoplay | 自動播放 |
path | JSON文件路徑 |
animationData | JSON數(shù)據(jù),與path互斥 |
name | 傳遞該參數(shù)后,可在之后通過lottie命令引用該動畫實例 |
rendererSettings | 可傳遞給renderer實例的特定設(shè)置,具體可看 |
Lottie提供了用于監(jiān)聽動畫執(zhí)行情況的事件:
complete
loopComplete
enterFrame
segmentStart
config_ready(初始配置完成)
data_ready(所有動畫數(shù)據(jù)加載完成)
DOMLoaded(元素已添加到DOM節(jié)點)
destroy
可使用addEventListener監(jiān)聽事件
// 動畫播放完成觸發(fā) anm.addEventListener("complete", anmLoaded); // 當(dāng)前循環(huán)播放完成觸發(fā) anm.addEventListener("loopComplete", anmComplete); // 播放一幀動畫的時候觸發(fā) anm.addEventListener("enterFrame", enterFrame);控制動畫播放速度和進度
可使用anm.pause和anm.play暫停和播放動畫,調(diào)用anm.stop則會停止動畫播放并回到動畫第一幀的畫面。
使用anm.setSpeed(speed)可調(diào)節(jié)動畫速度,而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定幀數(shù),也可結(jié)合anm.totalFrames控制進度百分比,比如可傳anm.totalFrames - 1跳到最后一幀。
anm.goToAndStop(anm.totalFrames - 1, 1);
這樣的好處是可以把相關(guān)聯(lián)的JSON文件合并,通過anm.goToAndPlay控制動畫狀態(tài)的切換,如下圖例中一個JSON文件包含了2個動畫狀態(tài)的數(shù)據(jù):
JSON文件里assets設(shè)置了對圖片的引用:
若想統(tǒng)一修改靜態(tài)資源路徑或者設(shè)置成絕對路徑,可在調(diào)用loadAnimation時傳入assetsPath參數(shù):
lottie.loadAnimation({ container: element, renderer: "svg", path: "data.json", assetsPath: "URL" // 靜態(tài)資源絕對路徑 });功能支持列表
即使用bodymovin成功輸出了JSON文件(沒有報錯),也會出現(xiàn)動效不如預(yù)期的情況,比如這是在AE中構(gòu)建的形象圖:
但在頁面中渲染效果是這樣的:
這是因為使用了不支持的Merge Paths功能
因此對設(shè)計師而言,創(chuàng)建Lottie動畫和往常制作AE動畫有所不同,此文檔記錄了Bodymovin支持輸出的AE功能列表,動畫制作前需跟設(shè)計師溝通好,根據(jù)動畫加載平臺來確認(rèn)可使用的AE功能。
除此之外,盡量遵循官方文檔里對設(shè)計過程的指導(dǎo)和建議:
動畫簡單化。創(chuàng)建動畫時需時刻記著保持JSON文件的精簡,比如盡可能地綁定父子關(guān)系,在相似的圖層上復(fù)制相同的關(guān)鍵幀會增加額外的代碼,盡量不使用占用空間最多的路徑關(guān)鍵幀動畫。諸如自動跟蹤描繪、顫動之類的技術(shù)會使得JSON文件變得非常大且耗性能。
建立形狀圖層。將AI、EPS、SVG和PDF等資源轉(zhuǎn)換成形狀圖層否則無法在Lottie中正常使用,轉(zhuǎn)換好后注意刪除該資源以防被導(dǎo)出到JSON文件。
設(shè)置尺寸。在AE中可設(shè)置合成尺寸為任意大小,但需確保導(dǎo)出時合成尺寸和資源尺寸大小保持一致。
不使用表達式和特效。Lottie暫不支持。
注意遮罩尺寸。若使用alpha遮罩,遮照的大小會對性能產(chǎn)生很大的影響。盡可能地把遮罩尺寸維持到最小。
動畫調(diào)試。若輸出動畫破損,通過每次導(dǎo)出特定圖層來調(diào)試出哪些圖層出了問題。然后在github中附上該圖層文件提交問題,選擇用其他方式重構(gòu)該圖層。
不使用混合模式和亮度蒙版。
不添加圖層樣式。
全屏動畫。設(shè)置比想要支持的最寬屏幕更寬的導(dǎo)出尺寸。
設(shè)置空白對象。若使用空白對象,需確保勾選可見并設(shè)置透明度為0%否則不會被導(dǎo)出到JSON文件。
預(yù)覽效果由于以上所說的功能支持問題會導(dǎo)致輸出動畫效果不確定性,設(shè)計師和前端之間有個動畫效果聯(lián)調(diào)的過程,為了提高聯(lián)調(diào)效率,設(shè)計師可先進行初步的效果預(yù)覽,再把文件交付給前端。
方法1:輸出預(yù)覽HTML文件渲染前設(shè)置所要渲染的文件
勾選??Demo選項
在輸出的文件目錄中就可找到可預(yù)覽的demo.html文件
把生成的JSON文件傳到LottieFiles平臺,可播放、暫停生成文件的動畫效果,可設(shè)置圖層顏色、動畫速度,也可以下載lottie preview客戶端在iOS或Android機子上預(yù)覽。
LottieFiles平臺還提供了很多線上公開的Lottie動畫效果,可直接下載JSON文件使用
Lottie的不足之處是沒有對應(yīng)的API操縱動畫層,若想做更細化的動畫處理,只能直接操作節(jié)點來實現(xiàn)。比如當(dāng)播放完左圖動畫進入驚訝狀態(tài)后,若想實現(xiàn)右圖隨鼠標(biāo)移動而控制動畫層的簡單效果:
開啟調(diào)試面板可以看到,lottie-web通過使用
當(dāng)元素已添加到DOM節(jié)點,找到想要控制的
onIntroDone() { const Gs = this.refs.svg.querySelectorAll("svg > g > g > g"); Gs.forEach((node, i) => { // 過濾需要修改的節(jié)點 ... // 獲取transform屬性值 const styleArr = node.getAttribute("transform").split(","); styleArr[0] = styleArr[0].replace("matrix(", ""); styleArr[5] = styleArr[5].replace(")", ""); const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]}, ${styleArr[5]})`; // 使用Rematrix解析 const transform = Rematrix.parse(style); this.matrices.push({ node, transform, prevTransform: transform }); } }
監(jiān)聽鼠標(biāo)移動,設(shè)置新的transform屬性值。
onMouseMove = (e) => { this.mouseCoords.x = e.clientX || e.pageX; this.mouseCoords.y = e.clientY || e.pageY; let x = this.mouseCoords.x - (this.props.browser.width / 2); let y = this.mouseCoords.y - (this.props.browser.height / 2); const diffX = (this.mouseCoords.prevX - x); const diffY = (this.mouseCoords.prevY - y); this.mouseCoords.prevX = x; this.mouseCoords.prevY = y; this.matrices.forEach((matrix, i) => { let translate = Rematrix.translate(diffX, diffY); const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply); const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`; matrix.prevTransform = product; matrix.node.setAttribute("transform", css); }) }進一步優(yōu)化
看到一個方法,在AE中將圖層命名為#id格式,生成的SVG相應(yīng)的圖層id會被設(shè)置為id,命名為.class格式,相應(yīng)的圖層class會被設(shè)置為class
試了下的確可以,如下圖,因此可通過這個方法快速找到需要操作的動畫層,進一步簡化代碼:
Lottie的缺點在于若在AE動畫制作的過程不注意規(guī)范,會導(dǎo)致數(shù)據(jù)文件大、耗內(nèi)存和性能的問題;Lottie-web的官方文檔不夠詳盡,例如assetsPath參數(shù)是在看源碼的時候發(fā)現(xiàn)的;開放的API不夠齊全,無法很靈活地控制動畫層。
而優(yōu)點也很明顯,Lottie能幫助提高開發(fā)效率,精簡代碼,易于調(diào)試和維護;資源文件小,輸出動畫效果保真;跨平臺——Android, iOS, Web和Windows通用。
總的來說,Lottie的引用可以替代傳統(tǒng)的GIF和幀動畫,靈活利用好提供的屬性和方法可以控制動畫的播放,但需注意規(guī)范設(shè)計和開發(fā)的流程,才可以更高效地完成動畫的制作與調(diào)試。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102697.html
摘要:支持動畫狀態(tài)的,在動畫開始,執(zhí)行中,結(jié)束時提供回調(diào)函數(shù)支持動畫可以自定義貝塞爾曲線任何包含數(shù)值的屬性都可以設(shè)置動畫倉庫文檔演示功能介紹一定程度上,也是一個動畫庫,適用所有的屬性,并且實現(xiàn)的能更方便的實現(xiàn)幀動畫,替代復(fù)雜的定義方式。 動畫調(diào)研-V1 前言:動畫從用途上可以分為兩種,一種是展示型的動畫,類似于一張GIF圖,或者一段視頻,另一種就是交互性的動畫。這兩種都有具體的應(yīng)用場景,比如...
摘要:如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到,本文搬運自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度?-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始~ 這是一個存在很久的歷史問題了,對于這樣一個具有普遍性的問題...
摘要:什么是是一個可以通過插件來解析動畫,并生成格式的文件。對于復(fù)雜的動畫,開發(fā)同學(xué)要用很長的時間來實現(xiàn),并且還有可能無法達到設(shè)計同學(xué)的最初的效果。是一個基于的動畫效果實現(xiàn)組件。它基于開源項目,可以將導(dǎo)出的文件渲染成動畫效果。 什么是Lottie Lottie是一個可以通過bodymovin插件來解析Adobe After Effects動畫,并生成json格式的文件。該json文件可以通過...
閱讀 1231·2021-11-23 09:51
閱讀 678·2021-11-19 09:40
閱讀 1337·2021-10-11 10:58
閱讀 2347·2021-09-30 09:47
閱讀 3726·2021-09-22 15:55
閱讀 2160·2021-09-03 10:49
閱讀 1250·2021-09-03 10:33
閱讀 698·2019-08-29 17:12