百度智能小程序 動(dòng)畫

animation-view Lottie 動(dòng)畫

解釋：僅支持 Lottie 動(dòng)畫的客戶端原生組件，使用時(shí)請(qǐng)注意相關(guān)限制，動(dòng)畫資源地址可到 lottie 的官方庫進(jìn)行查詢。Lottie 使用入門，詳見官方介紹；設(shè)計(jì)師精彩示例及動(dòng)效文件，設(shè)計(jì)社區(qū)。

屬性說明

action 有效值

示例 

在開發(fā)者工具中打開

代碼示例 1： 動(dòng)畫資源地址在本地，path 為相對(duì)路徑

<view class="wrap">
    <view class="card-area">
        <animation-view 
            class="controls" 
            path="{{path}}" 
            loop="{{loop}}" 
            autoplay="{{autoplay}}" 
            action="{{action}}" 
            hidden="{{hidden}}" 
            bindended="lottieEnd">
        </animation-view>
        <button bindtap="playLottie" type="primary">{{status}}lottie動(dòng)畫</button>
    </view>
</view>

Page({
    data: {
        path: '/anims/lottie_example_one.json',
        loop: true,
        autoplay: true,
        action: 'play',
        hidden: false,
        status: '暫停'
    },
    onShow() {
        console.log(' 百度APP版本11.3以上才可使用');
    },
    playLottie() {
        // 切換播放狀態(tài)
        let action = this.data.action;
        action = action === 'pause' ? 'play' : 'pause';
        let status = action === 'pause' ? '播放' : '暫停';
        this.setData({
            action,
            status
        });
    },
    lottieEnd() {
        console.log('自然播放結(jié)束會(huì)觸發(fā)回調(diào)，循環(huán)播放結(jié)束及手動(dòng)停止動(dòng)畫不會(huì)觸發(fā)。');
    }
});

代碼示例 2： 動(dòng)畫資源地址在服務(wù)器上存放

此種使用方式建議在真機(jī)查看完整效果，注意 path 屬性僅可在組件初始化時(shí)傳入，不支持用 setData 方法后續(xù)動(dòng)態(tài)傳入。

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <view class="animation-view-area">
            <animation-view 
                s-if="{{shouldShow}}" 
                class="controls" 
                path="{{path}}" 
                loop="{{loop}}" 
                autoplay="{{autoplay}}" 
                action="{{action}}" 
                hidden="{{hidden}}" 
                bindended="lottieEnd">
            </animation-view>
        </view>
        <button bindtap="playLottie" type="primary">{{status}}lottie動(dòng)畫</button>
    </view>
</view>

Page({
    data: {
        path: '',
        loop: true,
        autoplay: true,
        action: 'play',
        hidden: false,
        status: '暫停',
        shouldShow: ''
    },
    onShow() {
        console.log(' 百度APP版本11.3以上才可使用');
        swan.downloadFile({
            url: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                const filePath = res.tempFilePath;
                this.setData({
                    shouldShow: true,
                    path: filePath
                });
            }
        });
    },
    playLottie() {
        // 切換播放狀態(tài)
        let action = this.data.action;
        action = action === 'pause' ? 'play' : 'pause';
        let status = action === 'pause' ? '播放' : '暫停';
        this.setData({
            action,
            status
        });
    },
    lottieEnd() {
        console.log('自然播放結(jié)束會(huì)觸發(fā)回調(diào)，循環(huán)播放結(jié)束及手動(dòng)停止動(dòng)畫不會(huì)觸發(fā)。');
    }
});

Bug & Tip

• Tip：animation-view 組件的位置信息、padding 值以 path 里傳的 json 文件里的 left、top、padding 值為準(zhǔn)。
• Tip：animation-view 組件不支持原生組件嵌套。
• Tip：為避免出現(xiàn) iOS 中畫面被拉伸的情況，建議將 animation-view 組件的長寬比設(shè)置的與動(dòng)畫長寬比一致。
• Tip：path 暫不支持遠(yuǎn)程路徑，原因是端上暫不支持解析遠(yuǎn)程路徑的 json 文件, 如果不想將 json 文件放在小程序包內(nèi)，可以通過 API swan.downloadFile 將文件下載到本地，具體可參考上方代碼示例 2。
• Tip：在保證產(chǎn)品體驗(yàn)流暢，不能影響性能的同時(shí)，建議在刷新、加載、運(yùn)營 banner、按鈕、圖標(biāo)等場(chǎng)景中適時(shí)適度的使用動(dòng)效。
• Tip：互動(dòng)型動(dòng)畫-建議不自動(dòng)播放；展示型動(dòng)畫-建議自動(dòng)播放。