建站
咨詢
售后
建站咨詢
新聞中心
- animation-view Lottie 動(dòng)畫
- 屬性說明
- action 有效值
- 示例
- 代碼示例 1：動(dòng)畫資源地址在本地，path 為相對(duì)路徑
- 代碼示例 2：動(dòng)畫資源地址在服務(wù)器上存放
- Bug & Tip
- 屬性說明
animation-view Lottie 動(dòng)畫
解釋：僅支持 Lottie 動(dòng)畫的客戶端原生組件，使用時(shí)請(qǐng)注意相關(guān)限制，動(dòng)畫資源地址可到 lottie 的官方庫(kù)進(jìn)行查詢。Lottie 使用入門詳見官方介紹；設(shè)計(jì)師精彩示例及動(dòng)效文件詳見設(shè)計(jì)社區(qū)。
創(chuàng)新互聯(lián)建站成都網(wǎng)站建設(shè)按需求定制設(shè)計(jì)，是成都營(yíng)銷推廣公司,為石涼亭提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開發(fā)等。成都網(wǎng)站營(yíng)銷推廣熱線：18982081108
屬性說明
| 屬性名 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
path | String | 是 | 動(dòng)畫資源地址，目前只支持絕對(duì)路徑 | - | |
loop | Boolean | false | 否 | 動(dòng)畫是否循環(huán)播放 | - |
autoplay | Boolean | true | 否 | 動(dòng)畫是否自動(dòng)播放 | - |
action | String | play | 否 | 動(dòng)畫操作，可取值 play、pause、stop | - |
hidden | Boolean | true | 否 | 是否隱藏動(dòng)畫 | - |
bindended | EventHandle | 否 | 當(dāng)播放到末尾時(shí)觸發(fā) ended 事件（自然播放結(jié)束會(huì)觸發(fā)回調(diào)，循環(huán)播放結(jié)束及手動(dòng)停止動(dòng)畫不會(huì)觸發(fā)） | 3.0.0 |
action 有效值
| 值 | 說明 |
|---|---|
play | 播放 |
pause | 暫停 |
stop | 停止 |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
代碼示例 1：動(dòng)畫資源地址在本地，path 為相對(duì)路徑
- SWAN
- JS
class="controls"path="{{path}}"loop="{{loop}}"autoplay="{{autoplay}}"action="{{action}}"hidden="{{hidden}}"bindended="lottieEnd">
代碼示例 2：動(dòng)畫資源地址在服務(wù)器上存放
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
此種使用方式建議在真機(jī)查看完整效果，注意 path 屬性僅可在組件初始化時(shí)傳入，不支持用 setData 方法后續(xù)動(dòng)態(tài)傳入。
- SWAN
- JS
s-if="{{shouldShow}}"class="controls"path="{{path}}"loop="{{loop}}"autoplay="{{autoplay}}"action="{{action}}"hidden="{{hidden}}"bindended="lottieEnd">
Bug & Tip
- Tip：由于第三方庫(kù)兼容性問題，在使用 animation-view 組件時(shí)，需要將小程序的最低基礎(chǔ)庫(kù)版本設(shè)置成大于等于 3.250.12 。
- Tip：若開發(fā)者使用 Adobe After Effects（AE）Bodymovin 插件導(dǎo)出 Lottie 文件時(shí)，應(yīng)該使用版本號(hào)低于 5.5 版的 Bodymovin 插件導(dǎo)出 Lottie 文件（推薦使用 v5.4.4），否則會(huì)出現(xiàn)與 Lottie SDK 兼容性問題，導(dǎo)致無法正常播放。
- Tip：animation-view 組件的位置信息、padding 值以 path 里傳的 JSON 文件里的 left、top、padding 值為準(zhǔn)。
- Tip：animation-view 組件支持嵌套 cover-view、cover-image、button 原生組件。
- Tip：為避免出現(xiàn) iOS 中畫面被拉伸的情況，建議將 animation-view 組件的長(zhǎng)寬比設(shè)置的與動(dòng)畫長(zhǎng)寬比一致。
- Tip：path 暫不支持遠(yuǎn)程路徑，原因是端上暫不支持解析遠(yuǎn)程路徑的 JSON 文件, 如果不想將 JSON 文件放在小程序包內(nèi)，可以通過 API swan.downloadFile 將文件下載到本地，具體可參考上方代碼示例 2 。
- Tip：在保證產(chǎn)品體驗(yàn)流暢，不能影響性能的同時(shí)，建議在刷新、加載、運(yùn)營(yíng) banner 、按鈕、圖標(biāo)等場(chǎng)景中適時(shí)適度的使用動(dòng)效。
- Tip：互動(dòng)型動(dòng)畫 - 建議不自動(dòng)播放；展示型動(dòng)畫 - 建議自動(dòng)播放。
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：animation-viewLottie動(dòng)畫
標(biāo)題來源：http://www.5511xx.com/article/djgijjp.html
