簡介

Lottie是Android和iOS的移動圖書館，用于解析Adobe After Effects動畫，并以Bodymovin作為json導出，并在手機和網絡上本機呈現。

該項目在GitHub已經獲得三個端累計3萬+的star。

在Lottie社區提供了更多的動畫下載。

如果你是一個設計師還可以將自己制作的作品發布到該社區。

圖片來源Lottie

兼容平臺

優勢

使用方便、簡單

無需擔心屏幕尺寸適配問題

減少項目開發時間，增加交互的趣味性

針對平臺包括了緩存和預加載功能，增加動畫的流暢性

可以通過網絡Json地址加載

制作動畫

由于Lottie是使用AE制作，并且使用Bodymovin插件導出。

所以設計師要掌握一些AE的動畫的制作基礎，并且需要給AE安裝插件。

下面教程 部分來自Lottie設計制作官方文檔

設計師需要的工具：

PhotoShop或Sketch，Adobe Illustrator，Adobe After Effects和Bodymovin

1、導出為.SVG的文件

需要使用ps，或者Sketch將作品以組的形式導出為SVG

2、導出為.AI的文件

使用Adobe Illustrator導入SVG文件，另存為.AI文件

3、將.AI導入到Adobe After Effects

使用前需要安裝Bodymovin插件，該插件主要用于后面導出Json格式

1.下載 bodymovin壓縮文件

2.下載 AE插件安裝器 ZXP Installer

3.將bodymovin.zip文件解壓，找到文件build/extension/bodymovin.zxp

將該文件使用安裝器ZXP installer打開。

4.打開After Effects，然后修改 AE 的設置：Go to Edit > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"，開啟腳本。

導出Json需要四個步驟：

.1

將導入的文件拖到項目面板底部的小組合圖標。

.2

進入菜單，然后選擇組合>合成設置( Composition > Composition settings)。設置fps幀

.3

選擇組合中的圖層，然后在圖層菜單中選擇“從矢量圖層創建形狀”，然后根據您的插畫藝術品創建一個新的“形狀圖層”，該圖形藝術品具有圖形的可編輯向量屬性，如路徑，筆畫，填充等

.4

打開AE窗口 ：Window > Extensions > Bodymovin.導出就完成了

Android使用

1.在Android中引入只需要在app中的Build.gradle添加一行代碼

dependencies {

compile 'com.airbnb.android:lottie:2.2.0'

}

2.將Json文件拷貝到app>src>main>assets

3.在

//代碼中：

mLottieLove.setAnimation("lottie.json");

mLottieLove.loop(true);

mLottieLove.playAnimation();

或者

//布局中：

android:id="@+id/loading_animation"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center_horizontal"

app:lottie_fileName="permission.json"

app:lottie_loop="true"

app:lottie_autoPlay="true"/>

總結

以上是生活随笔為你收集整理的用Android打出马奔跑的动画,一款非常好用的动画库Lottie的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。