title: animation-video 透明视频动画 header: develop nav: component sidebar: animation-video

webUrl: https://qft12m.smartapps.cn/component/animation-video/animation-video

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

属性说明

属性名 类型 默认值 必填 说明 最低版本
resource-width Number 800 是 组件使用的video视频资源的宽度，单位px 3.130.10
resource-height Number 400 是 组件使用的video视频资源的高度，单位px 3.130.10
canvas-style String ‘width:400px;height:400px’ 是 用于设置动画画布的css样式 3.130.10
path String 是 动画资源地址，支持相对路径以及远程地址 3.130.10
loop Boolean false 否 动画是否循环播放 3.130.10
autoplay Boolean false 否 动画是否自动播放 3.130.10
bindstarted EventHandle 否 动画开始播放的回调 3.130.10
bindended EventHandle 否 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及暂停动画不会触发。） 3.130.10

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/animation-video/animation-video - 图1 请使用百度APP扫码

代码示例

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="video-area">
  4.             <animation-video
  5.                 id ="myAnimationVideo"
  6.                 path="{{path}}"
  7.                 loop="{{loop}}"
  8.                 resource-width="800"
  9.                 resource-height="400"
  10.                 canvas-style="width:200px;height:200px"
  11.                 autoplay="{{autoplay}}"
  12.                 bindstarted="started"
  13.                 bindended="ended"
  14.             ></animation-video>
  15.         </view>
  16.         <button class="btn" type="primary" bindtap="changeStatus">{{status}}动画</button>
  17.         <button class="btn" type="primary" bindtap="seek">跳转到动画2S处</button>
  18.     </view>
  19. </view>
  1. Page({
  2.     data: {
  3.         loop: true,
  4.         path: 'https://efe-h2.cdn.bcebos.com/ceug/resource/res/2020-1/1577964961344/003e2f0dcd81.mp4',
  5.         status: '暂停',
  6.         autoplay: true
  7.     },
  8.     onLoad() {
  9.         // 创建动画组件实例
  10.         this.myAnimationVideo = swan.createAnimationVideo('myAnimationVideo');
  11.     },
  12.     changeStatus() {
  13.         let action = this.data.status;
  14.         let status = action  === '暂停' ? '播放' : '暂停';
  15.         status === '暂停' ? this.myAnimationVideo.play() : this.myAnimationVideo.pause();
  16.         this.setData({status});
  17.     },
  18.     seek() {
  19.         this.myAnimationVideo.seek(2);
  20.     },
  21.     started() {
  22.         console.log('动画开始播放');
  23.     },
  24.     ended() {
  25.         console.log('动画结束播放');
  26.     }
  27. });
  1. .video-area {
  2.     height: 2.18rem;
  3.     background: #343434;
  4.     display: flex;
  5.     align-items: center;
  6.     justify-content: center;
  7. }

:::

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 将文件下载到本地，提前将视频资源缓存起来。