百度智能小程序 透明視頻動(dòng)畫

animation-video 透明視頻動(dòng)畫

解釋：animation-video 屬于前端組件，為智能小程序提供了將特定視頻資源渲染為透明背景動(dòng)效的能力，可以幫助開發(fā)者低成本實(shí)現(xiàn)更為沉浸，豐富的動(dòng)畫效果。動(dòng)畫資源設(shè)計(jì)方法詳見 透明視頻 AFX。animation-video 組件還提供豐富的 api 來控制動(dòng)畫的播放，暫停，跳到指定位置等，詳見  swan.createAnimationVideo。

Web 態(tài)說明：在 Web 態(tài)中 animation-video 組件的支持情況取決于瀏覽器本身對(duì) WebGL 以及 Video 的支持情況。安卓系統(tǒng)下常見問題有：1. 部分瀏覽器（如 UC）不支持 WebGL，因此動(dòng)畫無法展現(xiàn)。2. autoplay 功能失效，并且需要用戶在頁面發(fā)生交互行為后調(diào)用 animationVideo.play

屬性說明

示例 

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

代碼示例

<view class="wrap">
    <view class="card-area">
        <view class="video-area">
            <animation-video
                id="myAnimationVideo"
                path="{{path}}"
                loop="{{loop}}"
                resource-width="800"
                resource-height="400"
                canvas-style="width:200px;height:200px"
                autoplay="{{autoplay}}"
                bindstarted="started"
                bindended="ended">
            </animation-video>
        </view>
        <button class="btn" type="primary" bindtap="changeStatus">{{status}}動(dòng)畫</button>
        <button class="btn" type="primary" bindtap="seek">跳轉(zhuǎn)到動(dòng)畫2S處</button>
    </view>
</view>

Page({
    data: {
        loop: true,
        path: 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-1/1577964961344/003e2f0dcd81.mp4',
        status: '暫停',
        autoplay: true
    },
    onLoad() {
        // 創(chuàng)建動(dòng)畫組件實(shí)例
        this.myAnimationVideo = swan.createAnimationVideo('myAnimationVideo');
    },
    changeStatus() {
        let action = this.data.status;
        let status = action  === '暫停' ? '播放' : '暫停';
        status === '暫停' ? this.myAnimationVideo.play() : this.myAnimationVideo.pause();
        this.setData({status});
    },
    seek() {
        this.myAnimationVideo.seek(2);
    },
    started(e) {
        console.log('animationVideo', e.type);
    },
    ended(e) {
        console.log('animationVideo', e.type);
    }
});

.video-area {
    height: 2.18rem;
    background: #343434;
    display: flex;
    align-items: center;
    justify-content: center;
}

設(shè)計(jì)指南

可支持透明背景動(dòng)畫，實(shí)現(xiàn)沉浸式的動(dòng)畫效果展現(xiàn),視頻文件體積較小，有利于提升小程序性能,動(dòng)畫播放流暢，實(shí)現(xiàn)還原度高。等級(jí)進(jìn)階、簽到、彈窗、運(yùn)營 banner、直播禮物等強(qiáng)氛圍的場景。互動(dòng)性建議不自動(dòng)播放，展示型建議自動(dòng)播放。

Bug & Tip

• Tip：resource-height 和 resource-width 指的是視頻資源的高度和寬度，單位 px，與動(dòng)畫組件的寬高沒有必然聯(lián)系。動(dòng)畫組件的寬度和高度是通過 css 來控制的，為避免出現(xiàn)畫面被拉伸的情況，建議將 animation-video 組件的寬高比設(shè)置的與動(dòng)畫本身寬高比一致。例如，resource-width 是 800px，resource-height 是 400px，那么我們認(rèn)為動(dòng)畫的寬和高比例為 （800/2）/400 = 1，此時(shí)設(shè)置組件的高寬比只要等于 1 效果最佳。
• Tip：因?yàn)樽罱K動(dòng)畫渲染在頁面上實(shí)際上是一個(gè) canvas，可通過 canvas-style 控制它的 css 樣式，例如，支持響應(yīng)式可以設(shè)置 canvas-style =“width:100%;”。
• Tip：path 可以寫本地相對(duì)路徑，也可以寫遠(yuǎn)程路徑，如果是遠(yuǎn)程路徑，注意 response header 里面需要設(shè)置 Access-Control-Allow-Origin 防止跨域問題。
• Tip：如果視頻資源過大，用戶網(wǎng)絡(luò)狀態(tài)差的情況下，可以通過 API swan.downloadFile 將文件下載到本地，提前將視頻資源緩存起來。