百度智能小程序 透明视频动画

animation-video 透明视频动画

解释：animation-video 属于前端组件，为智能小程序提供了将特定视频资源渲染为透明背景动效的能力，可以帮助开发者低成本实现更为沉浸，丰富的动画效果。动画资源设计方法详见 透明视频 AFX。animation-video 组件还提供丰富的 api 来控制动画的播放，暂停，跳到指定位置等，详见  swan.createAnimationVideo。

Web 态说明：在 Web 态中 animation-video 组件的支持情况取决于浏览器本身对 WebGL 以及 Video 的支持情况。安卓系统下常见问题有：1. 部分浏览器（如 UC）不支持 WebGL，因此动画无法展现。2. autoplay 功能失效，并且需要用户在页面发生交互行为后调用 animationVideo.play

属性说明

示例 

在开发者工具中打开

代码示例

<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}}动画</button>
        <button class="btn" type="primary" bindtap="seek">跳转到动画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() {
        // 创建动画组件实例
        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;
}

设计指南

可支持透明背景动画，实现沉浸式的动画效果展现,视频文件体积较小，有利于提升小程序性能,动画播放流畅，实现还原度高。等级进阶、签到、弹窗、运营 banner、直播礼物等强氛围的场景。互动性建议不自动播放，展示型建议自动播放。

Bug & Tip

• Tip：resource-height 和 resource-width 指的是视频资源的高度和宽度，单位 px，与动画组件的宽高没有必然联系。动画组件的宽度和高度是通过 css 来控制的，为避免出现画面被拉伸的情况，建议将 animation-video 组件的宽高比设置的与动画本身宽高比一致。例如，resource-width 是 800px，resource-height 是 400px，那么我们认为动画的宽和高比例为 （800/2）/400 = 1，此时设置组件的高宽比只要等于 1 效果最佳。
• Tip：因为最终动画渲染在页面上实际上是一个 canvas，可通过 canvas-style 控制它的 css 样式，例如，支持响应式可以设置 canvas-style =“width:100%;”。
• Tip：path 可以写本地相对路径，也可以写远程路径，如果是远程路径，注意 response header 里面需要设置 Access-Control-Allow-Origin 防止跨域问题。
• Tip：如果视频资源过大，用户网络状态差的情况下，可以通过 API swan.downloadFile 将文件下载到本地，提前将视频资源缓存起来。