建站
咨詢
售后
建站咨詢
新聞中心
- animation-video 透明視頻動畫
- 屬性說明
- 示例
- 代碼示例
- Bug & Tip
animation-video 透明視頻動畫
解釋：animation-video 屬于前端組件，為智能小程序提供了將特定視頻資源渲染為透明背景動效的能力，可以幫助開發(fā)者低成本實(shí)現(xiàn)更為沉浸，豐富的動畫效果。動畫資源設(shè)計(jì)方法詳見透明視頻 AFX 。animation-video 組件還提供豐富的 API 來控制動畫的播放，暫停，跳到指定位置等，詳見 swan.createAnimationVideo 。
Web 態(tài)說明：在 Web 態(tài)中 animation-video 組件的支持情況取決于瀏覽器本身對 WebGL 以及 Video 的支持情況。安卓系統(tǒng)下常見問題有：
1. 部分瀏覽器（如 UC）不支持 WebGL ，因此動畫無法展現(xiàn)。
2. autoplay 功能失效，并且需要用戶在頁面發(fā)生交互行為后調(diào)用 animationVideo.play 。
屬性說明
| 屬性名 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
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’ |
是 |
用于設(shè)置動畫畫布的 CSS 樣式 |
3.130.10 |
path |
String |
是 |
動畫資源地址，支持相對路徑以及遠(yuǎn)程地址。如果是遠(yuǎn)程路徑，注意 response header 里需要設(shè)置 Access-Control-Allow-Origin 來防止跨域問題 |
3.130.10 | |
loop |
Boolean |
false |
否 |
動畫是否循環(huán)播放 |
3.130.10 |
autoplay |
Boolean |
false |
否 |
動畫是否自動播放 |
3.130.10 |
bindstarted |
EventHandle |
否 |
動畫開始播放的回調(diào) |
3.130.10 | |
bindended |
EventHandle |
否 |
當(dāng)播放到末尾時(shí)觸發(fā) ended 事件（自然播放結(jié)束會觸發(fā)回調(diào)，循環(huán)播放結(jié)束及暫停動畫不會觸發(fā)） |
3.130.10 |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(yàn)
代碼示例
請使用百度APP掃碼
代碼示例
- SWAN
- JS
- CSS
id="myAnimationVideo"path="{{path}}"loop="{{loop}}"resource-width="800"resource-height="400"canvas-style="width:200px;height:200px"autoplay="{{autoplay}}"bindstarted="started"bindended="ended">
設(shè)計(jì)指南
可支持透明背景動畫，實(shí)現(xiàn)沉浸式的動畫效果展現(xiàn),視頻文件體積較小，有利于提升小程序性能,動畫播放流暢，實(shí)現(xiàn)還原度高。
等級進(jìn)階、簽到、彈窗、運(yùn)營 banner 、直播禮物等強(qiáng)氛圍的場景。
互動性建議不自動播放，展示型建議自動播放。
Bug & Tip
- Tip：resource-height 和 resource-width 指的是視頻資源的高度和寬度（單位：px），與動畫組件的寬高沒有必然聯(lián)系。動畫組件的寬度和高度是通過 css 來控制的，為避免出現(xiàn)畫面被拉伸的情況，建議將 animation-video 組件的寬高比設(shè)置的與動畫本身寬高比一致。例如，resource-width 是 800px ，resource-height 是 400px ，那么我們認(rèn)為動畫的寬和高比例為
（800/2）/400 = 1，此時(shí)設(shè)置組件的高寬比只要等于 1 效果最佳。 - Tip：因?yàn)樽罱K動畫渲染在頁面上實(shí)際上是一個(gè) canvas，可通過 canvas-style 控制它的 CSS 樣式，例如，支持響應(yīng)式可以設(shè)置
canvas-style ="width:100%;"。 - Tip：如果視頻資源過大，用戶網(wǎng)絡(luò)狀態(tài)差的情況下，可以通過 API swan.downloadFile 將文件下載到本地，提前將視頻資源緩存起來。
網(wǎng)站名稱：創(chuàng)新互聯(lián)百度小程序教程：animation-video透明視頻動畫
URL標(biāo)題：http://www.5511xx.com/article/copgeco.html
