Lottie設計與開發使用方法

前言

官網地址：airbnb.design/lottie/

Lottie是一種新的開發動畫的方式. 學會使用Lottie,會極大改善你和開發小哥哥撕逼的狀況, 由於動畫咱們都給作好了他只須要給播放一下就行了!!

有一個 LottieFiles 的網站，其內提供了不少設計師上傳的 Lottie 動畫，並提供預覽的效果，只要咱們看中了，就能夠下載下來使用，很是的方便。 本文主要介紹設計對於Lottie的使用方法，開發的使用方法會在文章末尾有連接介紹（對於一個設計來講前端還好，後端真心頭大，天書同樣，o(╥﹏╥)o）

從AE開始（AE大神可自行跳過）

1.安裝AE

After Effects(儘可能選擇17之後的版本)

具體下載地址在這我就很少介紹了，萬能的度娘能讓你找到各式各樣的下載地址還有破解器（固然直接Adobe官網購買正版的土豪例外）

2.安裝bodymovin插件

想了解此插件能夠參看該插件的GitHub頁面.

選項1：

從aescripts + aeplugins下載： http ：//aescripts.com/bodymovin/
點擊連接進入網站下載(ps:價格改爲0 ，就是免費嘍)

選項2：

從adobe商店 creative.adobe.com/addons/prod… CC 2014及以上版本獲取。

選項3：

提取內容並/ build / extension獲取.zxp文件

安裝：

• 使用aescripts.com上的ZXP安裝程序。

• 手動安裝

  • 先關閉AE;

  • 用WinRAR或相似軟件打開bodymovin.zxp文件,並將解壓後的文件夾直接複製到
    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
    或者是C:<username>\AppData\Roaming\Adobe\CEP\extensions下,
    對於MAC機器路徑是
    /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

    

    

  • 修改註冊表.對於Windows,打開註冊表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,並在此路徑下添加一個名爲PlayerDebugMode的KEY,並賦值爲1;
    對於MAC,打開文件~/Library/Preferences/com.adobe.CSXS.6.plist並在末尾添加一行,鍵爲PlayerDebugMode,值爲1;

  • 設置AE 不管以何種方式安裝bodymovin插件,都須要在AE的編輯->首選項->常規中勾選容許腳本寫入文件和訪問網絡(默認不開啓)

  

開始製做動畫

具體制做的動畫就看各個設計師在自由發揮了，在此就很少作介紹了，畢竟本文不是AE教學，就先拿已完成的文件作案例

導出json格式文件

• 窗口-擴展-Bodymovin(因爲沒辦法截圖，只能用手機拍了o(╥﹏╥)o)

• 而後就彈出Bodymovin頁

配一張漢化翻譯圖（能力有限沒找到漢化插件）

• 設置頁默認選中第二個就行了，按照我以前聽過一個大佬說過,軟件若是有默認選項,那麼選默認老是沒錯的. 這裏咱們之間選擇默認的第二個,其它只是特殊需求狀況下須要改選的.

• 點擊渲染, 這裏我保存在桌面, 出現了一個後綴.json的文件（必定要選中最最前面的綠點！必定要選中最最前面的綠點！必定要選中最最前面的綠點！）

  

• 到這裏,整個Lottie的動畫導出就結束了.接下來只要將你的json文件交付給開發就行了, 他們會在代碼中添加Lottie庫來加載咱們製做的動畫.-

開發使用方法

因爲本人是設計，開發的那些代碼徹底看不懂，在此放上兩個連接，有興趣的大佬能夠看一看
lottie使用教程
lottie介紹及使用相關（翻譯）