支付寶小程序媒體組件 動畫·lottie

有關(guān) Lottie 的詳細信息請參見 Lottie 官方文檔 和 Lottie 官方支持能力列表。

簡介

Lottie 是一個用于 Web 和 iOS 的移動庫，可使用 Bodymovin 解析以 json 格式導出的 Adobe After Effects 動畫，并將其本地呈現(xiàn)在移動設(shè)備上。以下為 Lottie 動畫庫適配小程序的方法。

使用限制

支付寶 10.1.35 版本及以上支持 Lottie 動畫。?

示例代碼

<!--.axml-->


<lottie


          assetsPath="{{item.assetsPath}}" 


          autoplay="{{item.autoplay}}" 


          id="{{item.id}}"


          djangoId="{{item.djangoId}}"


          path="{{item.path}}" 


          repeatCount="{{item.repeatCount}}"


          placeholder="{{item.placeholder}}"


          class="item">


  </lottie>

// .js Data Binding


{


        id : '2',


        desc : 'Django自動播放,低端設(shè)備降級',


        autoplay : true,


        djangoId：'https://gw.alipayobjects.com/os/basement_prod/1af0a9dc-110a-4a59-9084-a03d45686c8c.zip'


        placeholder:'https://gw.alipayobjects.com/mdn/rms_e345fe/afts/img/A*nu3GTaHqJ9AAAAAAAAAAAAAAARQnAQ


       524560995883_icon_S.png',


        optimize : 'true',


        repeatCount : -1


}  

/*.acss*/


.item{


  width: 700rpx;


  height: 400rpx;


  /* opacity: 0.5; */


}

屬性

實例方法

監(jiān)聽事件

當實用方法調(diào)用 pause 和 stop 時，都會先后收到 animationCancel、animationEnd 兩個事件。

功能介紹

支付寶小程序接入 Lottie 支持如下功能

資源文件處理

圖片文件

UI 設(shè)計師提供的 Lottie 動畫可能會帶有目錄 images/，里面保存的是一些靜態(tài)圖片。

目前有三種解決方案，推薦前兩種：

1. 整體壓縮為 Zip 文件，將 Zip 的路徑放在 djangoId 參數(shù)里。

1. 將圖片資源轉(zhuǎn)成 base64 內(nèi)鏈在 JSON 文件里，這樣 JSON 路徑放在 path 參數(shù)里。

1. 如果圖片資源和 JSON 文件是分離的，那么需要以下處理：動畫描述的 .json 文件里，對圖片資源是這樣定位的：

   {"id":"image_0","w":66,"h":89,"u":"images/","p":"img_0.png"}

• w：寬度

• h：高度

• u：根目錄

• p：具體文件

因此如果圖片資源統(tǒng)一放在一個單獨 URL 里，例如 http://xxx.xxx.com/images/img_0.png，那么需要將http://xxx.xxx.com/ 配置在 assetsPath 參數(shù)中。

Base64 support

Lottie 對資源的定義是

{"id":"image_0","w":66,"h":89,"u":"images/","p":"img_0.png"}

10.1.52 版本開始，p 節(jié)點支持 base64，當使用 base64 時，可以忽略 u 節(jié)點，例如：

"p":"data:image/png;base64,iVBORw0KGgoAAAANSU...."

注意：如果在支付寶 10.1.52、10.1.60 版本中使用 Base64 資源，需要在 JSON 文件中增加 assetsPath="/" 作為參數(shù)，否則 iOS 上可能無法顯示。

注意事項

UI 設(shè)計師已完成的物料資源請先在 Lottie 平臺 上做一次檢測，保證物料包的內(nèi)容文件符合小程序規(guī)范。

??

修復兼容性問題

如果提示“使用插件版本 5.5.0+，客戶端必須也是 5.5.0+，iOS/android 舊版播放器會閃退”，必須重新用兼容性模式導出 JSON。

真機測試

請盡量分別使用不同系統(tǒng)下的不同機型進行測試，提高正確性。

選用兼容版本

支付寶版本為 10.1.68 或更低版本時，如果有 iOS 播放不完整、或者 Android 播放閃退的情況，請 UI 設(shè)計師使用 AE 插件導出時選用兼容版本。

說明：

• Lottie 在 Android 7.0 上硬件加速的問題請參見官方 issue：https://github.com/airbnb/lottie-android/issues/1453 ；
• 客戶端 10.1.82 版本默認對 Android7.0 使用軟件渲染的方式。

??

檢查字體問題

支付寶版本 10.1.72 以下如果用到了 JSON 里面有 font-family="PingFang SC" 的字體，請檢查字體問題。因為 Android 沒有這個字體，在 Android 某些機器上（以下為部分閃退機型列表）會閃退。

• MI 8
• EML-AL00
• OPPO R11
• vivo Y66L
• MIX 3
• vivo NEX A
• VOG-AL10
• PBET00
• V1829A
• vivo X20A

注意事項

1. 如果已經(jīng)加載了 Lottie 動畫，可選擇在開發(fā)者選項里面關(guān)閉動畫，關(guān)閉后需要重啟 App 或者重新加載才可以恢復 Lottie。

1. iOS 系統(tǒng)在應用切到后臺的時候會自動移除動畫，在應用切回前臺時需要重新添加動畫。

1. 小程序組件 ID 需應用內(nèi)保證唯一。不同的 Page 的同一個 Lottie 組件，頁面切換后組件未必會銷毀，因此不建議復用，例如：可翻頁的視頻頁面中的點贊按鈕。

1. 文件壓縮。請在文件當前目錄直接進行壓縮，不要在外層目錄進行壓縮。當前不支持遍歷目錄尋找 JSON 文件，如果解壓后第一層未發(fā)現(xiàn) JSON 文件則會被認為不合法。

??