資訊專欄INFORMATION COLUMN
摘要：什么是是一個可以通過插件來解析動畫，并生成格式的文件。對于復雜的動畫，開發同學要用很長的時間來實現，并且還有可能無法達到設計同學的最初的效果。是一個基于的動畫效果實現組件。它基于開源項目，可以將導出的文件渲染成動畫效果。
什么是Lottie
Lottie是一個可以通過bodymovin插件來解析Adobe After Effects動畫，并生成json格式的文件。該json文件可以通過Lottie開源庫在iOS,Android,macOS,React Native中進行解析生成動畫效果。
下面是一些官網給出的動畫效果：
一直以來我們的設計同學都是使用設計軟件，設計動畫效果，開發同學再通過代碼來實現動效。對于復雜的動畫，開發同學要用很長的時間來實現，并且還有可能無法達到設計同學的最初的效果。
還有一種實現動畫的方式就是gif圖。然而Android并不支持gif圖，而且gif圖對于移動端還有占用過多空間的問題。
那么，Lottie為我們做了什么呢。
首先，設計同學在Adobe After Effects上設計了動畫效果，通過bodymovin插件，可以將動畫導出成一個json文件。
然后，開發同學就可以通過Lottie將前面生成的json文件渲染成動畫效果。
這樣就可以高效的實現很多復雜動畫效果啦。
對于現在十分流行的前端框架vuejs，當然有支持Lottie的組件。
vue-lottie是一個基于vuejs的動畫效果實現組件。它基于lottie開源項目，可以將After Effects導出的json文件渲染成svg/canvas/html動畫效果。
vue-lottie安裝通過NPM安裝
npm install --save vue-lottievue-lottie使用
Speed: x{{animationSpeed}}
輪子工廠--一個分享優秀的vue,angular組件的網站
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85108.html
摘要：簡單來說，就是一個可以將動畫轉成可運行在上的插件。使用工具使用前請確保已安裝這以下工具。更詳細內容可參考官網庫最后再分項目框架提供兩個的庫 簡介 Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，設計師可以使用 Adobe After Effects 設計出漂亮的動畫之后，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，...
摘要：經調研發現，是個簡單高效且性能高的動畫方案。換言之，設計師用把動畫效果做出來，再用導出相應地文件給到前端，前端使用庫就可以實現動畫效果。 項目背景 在海外項目中，為了優化用戶體驗加入了幾處微交互動畫，實現方式是設計輸出合成的雪碧圖，前端通過序列幀實現動畫效果：?showImg(https://segmentfault.com/img/bVbp6jB);序列幀：showImg(https...
閱讀 964·2023-04-26 02:56
閱讀 9438·2021-11-23 09:51
閱讀 1850·2021-09-26 10:14
閱讀 2980·2019-08-29 13:09
閱讀 2154·2019-08-26 13:29
閱讀 571·2019-08-26 12:02
閱讀 3562·2019-08-26 10:42
閱讀 3000·2019-08-23 18:18
