animation-video 透明视频动画

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

  1. <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>
  1. 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() {        console.log('动画开始播放');    },    ended() {        console.log('动画结束播放');    }});
  1. .video-area {    height: 2.18rem;    background: #343434;    display: flex;    align-items: center;    justify-content: center;}

Bug & Tip

  • swan.downloadFile 将文件下载到本地，提前将视频资源缓存起来。