資訊專欄INFORMATION COLUMN
摘要：什么是是一個可以通過插件來解析動畫，并生成格式的文件。對于復(fù)雜的動畫，開發(fā)同學(xué)要用很長的時間來實現(xiàn)，并且還有可能無法達(dá)到設(shè)計同學(xué)的最初的效果。是一個基于的動畫效果實現(xiàn)組件。它基于開源項目，可以將導(dǎo)出的文件渲染成動畫效果。
什么是Lottie
Lottie是一個可以通過bodymovin插件來解析Adobe After Effects動畫，并生成json格式的文件。該json文件可以通過Lottie開源庫在iOS,Android,macOS,React Native中進(jìn)行解析生成動畫效果。
下面是一些官網(wǎng)給出的動畫效果：
一直以來我們的設(shè)計同學(xué)都是使用設(shè)計軟件，設(shè)計動畫效果，開發(fā)同學(xué)再通過代碼來實現(xiàn)動效。對于復(fù)雜的動畫，開發(fā)同學(xué)要用很長的時間來實現(xiàn)，并且還有可能無法達(dá)到設(shè)計同學(xué)的最初的效果。
還有一種實現(xiàn)動畫的方式就是gif圖。然而Android并不支持gif圖，而且gif圖對于移動端還有占用過多空間的問題。
那么，Lottie為我們做了什么呢。
首先，設(shè)計同學(xué)在Adobe After Effects上設(shè)計了動畫效果，通過bodymovin插件，可以將動畫導(dǎo)出成一個json文件。
然后，開發(fā)同學(xué)就可以通過Lottie將前面生成的json文件渲染成動畫效果。
這樣就可以高效的實現(xiàn)很多復(fù)雜動畫效果啦。
對于現(xiàn)在十分流行的前端框架vuejs，當(dāng)然有支持Lottie的組件。
vue-lottie是一個基于vuejs的動畫效果實現(xiàn)組件。它基于lottie開源項目，可以將After Effects導(dǎo)出的json文件渲染成svg/canvas/html動畫效果。
vue-lottie安裝通過NPM安裝
npm install --save vue-lottievue-lottie使用
Speed: x{{animationSpeed}}
輪子工廠--一個分享優(yōu)秀的vue,angular組件的網(wǎng)站
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85108.html
摘要：簡單來說，就是一個可以將動畫轉(zhuǎn)成可運行在上的插件。使用工具使用前請確保已安裝這以下工具。更詳細(xì)內(nèi)容可參考官網(wǎng)庫最后再分項目框架提供兩個的庫 簡介 Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，設(shè)計師可以使用 Adobe After Effects 設(shè)計出漂亮的動畫之后，使用 Lottic 提供的 Bodymovin 插件將設(shè)計好的動畫導(dǎo)出成 JSON 格式，...
摘要：經(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...
閱讀 1085·2023-04-26 02:56
閱讀 23608·2021-11-23 09:51
閱讀 1980·2021-09-26 10:14
閱讀 3073·2019-08-29 13:09
閱讀 2211·2019-08-26 13:29
閱讀 639·2019-08-26 12:02
閱讀 3627·2019-08-26 10:42
閱讀 3065·2019-08-23 18:18
