扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
解释:animation-video 属于前端组件,为智能小程序提供了将特定视频资源渲染为透明背景动效的能力,可以帮助开发者低成本实现更为沉浸,丰富的动画效果。动画资源设计方法详见透明视频 AFX 。animation-video 组件还提供丰富的 API 来控制动画的播放,暂停,跳到指定位置等,详见 swan.createAnimationVideo 。
Web 态说明:在 Web 态中 animation-video 组件的支持情况取决于浏览器本身对 WebGL 以及 Video 的支持情况。安卓系统下常见问题有:
1. 部分浏览器(如 UC)不支持 WebGL ,因此动画无法展现。
2. autoplay 功能失效,并且需要用户在页面发生交互行为后调用 animationVideo.play 。
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
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 |
是 |
动画资源地址,支持相对路径以及远程地址。如果是远程路径,注意 response header 里需要设置 Access-Control-Allow-Origin 来防止跨域问题 |
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 |
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
id="myAnimationVideo"
path="{{path}}"
loop="{{loop}}"
resource-width="800"
resource-height="400"
canvas-style="width:200px;height:200px"
autoplay="{{autoplay}}"
bindstarted="started"
bindended="ended">
设计指南
可支持透明背景动画,实现沉浸式的动画效果展现,视频文件体积较小,有利于提升小程序性能,动画播放流畅,实现还原度高。
等级进阶、签到、弹窗、运营 banner 、直播礼物等强氛围的场景。
互动性建议不自动播放,展示型建议自动播放。
(800/2)/400 = 1
,此时设置组件的高宽比只要等于 1 效果最佳。canvas-style ="width:100%;"
。我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Copyright © 2002-2023 www.gydahua.com 快上网建站品牌 QQ:244261566 版权所有 备案号:蜀ICP备19037934号
微信二维码
移动版官网