從設計師和開發的角度使用 lottie

時間 2019-11-09

標籤設計師開發角度使用 lottie 简体版

原文原文鏈接

簡介

lottie 是一個能夠輕易的給各類 native app 添加高質量動畫的類庫。能夠在 iOS、Android 和 React Native 實時渲染 After Effects 動畫，就像使用靜態圖片同樣容易。上圖即爲 lottie 的 logo。javascript

簡單的說，lottie 動畫製做的流程是，經過 Bodymovin 擴展將 AE 動畫導出爲 json 數據，而後再將這個 json 渲染在客戶端或者 web 端。以下圖：html

官網宣傳了3個特性：前端

靈活使用AE的特性
爲所欲爲控制你的動畫
很小的文件體積

我的認爲 lottie 最大的優點就是能夠將設計師設計的動圖原本來本的在頁面上展示出來，完美還原了動畫的精細度，而且對動畫擁有足夠的控制能力。目前全部使用 gif 或 apng 的場景應該均可以使用 lottie，固然 lottie 不侷限與此場景。vue

本文主要從設計師視角和開發者視角講述 lottie-web 的原理和使用以及 lottie 在 weex/rax 中的使用。java

Demogit

設計師視角

準備

在 AE 中爲 lottie 創做動畫，你須要如下準備github

Adobe After Effects
Bodymovin AE 插件
Lottiefiles preview app (集成了 lottie sdk 的 app)

安裝 Bodymovin 插件的流程以下：web

關閉 AE
安裝 ZXP installer。 ZXP Installer 就是專門用來安裝 Adobe 公司的軟件產品的插件的工具。
下載最新的 bodymovin 擴展。 github.com/airbnb/lott…
打開 ZXP installer 並把 bodymovin 擴展拖拽進來
打開 AE，在菜單 Window > Extensions 中，你會看到安裝好的擴展

安裝插件詳見 airbnb.io/lottie/afte…express

從 Sketch/SVG/Illustrator 到 Lottie 的工做流

下面講講如何從 Sketch 開始，製做一個 lottie 動畫文件。若是你使用 svg 圖片，跳到步驟3。若是你使用 AI，跳到步驟4。須要準備好 Sketch，AI，AE，並安裝好 Bodymovin 插件。下面開始：npm

在 sketch 中確保要導出的內容已經羣組爲一個 group
將這個 group 導出爲 svg
在 AI 中打開 svg，並轉存爲 .ai 文件
將 .ai 文件導入到 AE 中
在 AE 中建立組件，設置動畫持續時間和幀率
將 ai 文件轉爲 shape layers。在組件中選中你的圖層，菜單 Layer 中選擇 Create shapes from vector layer
添加你想要的任何動畫，這一部分是你主要工做的步驟
使用 Bodymovin 導出爲 json 菜單中選擇 Window > Extensions > Bodymovin
測試動畫。確保動畫中沒有不支持的特性，而後能夠拖拽到 lottieFiles 中查看效果。固然也能夠上傳到 lottieFiles 裏，而後使用 lottie preview app 掃碼查看。這時你就能夠將動畫交付給開發同窗啦！

更多細節可查看官方文檔 Sketch/SVG/Illustrator to Lottie workflow

注意事項&優化建議

*AE 特性大部分已經支持，具體能夠查看 Supported Features（支持列表），設計師應該避免使用不支持 AE 的特性。

目前開看，支持較好的屬性有：

Shapes
Fills
Strokes
Transforms
Interpolation

不徹底支持的屬性分類有：

Masks
Mattes
Merge Paths
Layer Effects
Text

*設計過程當中的優化建議和注意事項 General tips & guidelines

儘可能保持簡單小巧在相同的圖層上覆制相同的關鍵幀會增長額外的代碼，只有在必要時才使用路徑關鍵幀動畫。
導出 1x 圖
No expressions or effects Lottie 還不支持 expressions 或 effects 菜單中的任何 effects
Matte and mask 尺寸問題使用半透明遮罩會影響性能。若是必須使用遮罩，請覆蓋最小的區域。
不支持 Blending modes 或 Luma mattes
不支持圖層樣式圖層效果不支持drop shadow, color overlay 或 stroke
全屏動畫，導出比最大屏幕寬度更寬一點的圖像，在 Android 和 iOS 上能夠分別裁切

開發者視角

使用

首先固然是看開發文檔。這裏我簡單說說其中 lottie-web 的使用。

能夠經過 script 標籤

<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
複製代碼

或 npm 包 lottie-web 引用

npm i -S lottie-web
複製代碼

import lottie from 'lottie-web'
複製代碼

調用 loadAnimation()

const myLottie = lottie.loadAnimation({
  container: document.querySelector('.img-area'),
  renderer: 'svg',
  name: 'myLottieAnim',
  loop: true,
  autoplay: true,
  path: './assets/cycle_animation.json',
})
複製代碼

參數/api/事件

loadAnimation 的參數

名稱	描述
container	用於渲染的容器，通常使用一個 div 便可
renderer	渲染器，能夠選擇 'svg' / 'canvas' / 'html'，我的測試發現 svg 效果和兼容性最好
name	動畫名稱，用於 reference
loop	循環
autoplay	自動播放
path	json 路徑，頁面會經過一個 http 請求獲取 json
animationData	json 動畫數據，與 path 互斥，建議使用 path，由於 animationData 會將數據打包進來，會使得 js bundle 過大

獲取到 lottie 實例後，能夠調用 api 控制動畫，例如上述代碼中可使用

myLottie.pause()
複製代碼

相關 api

名稱	參數	描述
stop	無	中止動畫
play	無	播放動畫
pause	無	暫停
setSpeed	Number	設置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一幀或某一秒中止，第二個參數 iFrame 爲是否基於幀模式仍是時間，默認爲 false
goToAndPlay	Number, [Boolean]	跳到某一幀或某一秒開始，第二個參數 iFrame 爲是否基於幀模式仍是時間，默認爲 false
playSegments	Array, [Boolean]	播放片斷，參數1爲數組，兩個元素爲開始幀和結束幀；參數2爲，是否當即播放片斷，仍是等以前的動畫播放完成
destroy	無	銷燬