打賞動畫特效
更新時間：2023-07-06 16:59:13
概述
本文件主要說明保利威觀看頁打賞動畫特效的接入方式。
SVGA 動畫格式介紹
打賞特效是透過 SVGA 實現的。
SVGA 是一種跨平台的開源動畫格式，同時相容於 iOS、Android 和 Web。SVGA 除了使用簡單、效能卓越，也讓動畫開發分工明確，各自專注於各自的領域，大幅減少動畫互動的溝通成本，提升開發效率。
接入方式
總體流程
實現打賞特效主要有三個步驟：
- 監聽打賞訊息事件，取得打賞道具圖片位址。
- 根據打賞道具圖片位址，取得對應的 SVGA 動畫檔案位址。
- 播放 SVGA 動畫檔案。
基於直播 JS-SDK
// 创建直播 JS-SDK 实例
var liveSdk = new PolyvLiveSdk({ ... });
// 监听打赏消息事件
liveSdk.on(PolyvLiveSdk.EVENTS.REWARD, function(event, data) {
var gimg = data.content.gimg;
console.log('打赏道具图片地址', gimg);
var svgaUrl = getSvgaUrl(gimg);
if (svgaUrl) {
console.log('svga 动画文件地址：', svgaUrl);
// TODO：播放 SVGA 动画
}
});
基於聊天室 JS-SDK
// 创建聊天室 JS-SDK 实例
var chatroom = new PolyvChatRoom({ ... });
var chat = chatroom.chat;
chat.on(chat.events.REWARD, function(event, data) {
var gimg = data.content.gimg;
console.log('打赏道具图片地址', gimg);
var svgaUrl = getSvgaUrl(gimg);
if (svgaUrl) {
console.log('svga 动画文件地址：', svgaUrl);
// TODO：播放 SVGA 动画
}
});
取得 SVGA 動畫檔案位址
透過下方程式碼中的 getSvgaUrl 方法，即可取得對應打賞圖片的 SVGA 動畫檔案位址：
// 地址目录
var BASE_URL = 'https://s1.videocc.net/default-img/donate-svga';
// 目前可用的打赏动效
var svgas = {
coffee: 'coffee.svga',
like: 'like.svga',
handclap: 'handclap.svga',
'666': '666.svga',
star: 'star.svga',
diamond: 'diamond.svga',
car: 'car.svga',
rocket: 'rocket.svga',
bear: 'bear.svga',
crown: 'crown.svga',
cup: 'cup.svga',
microphone: 'microphone.svga',
villa: 'villa.svga',
};
/**
* 获取 SVGA 地址
* @param {string} gimg 打赏道具图片地址
*/
function getSvgaUrl(gimg) {
var a = document.createElement('a');
a.href = url;
var pathname = a.pathname.split('/');
var key = pathname[pathname.length - 1].split('.')[0];
const svgaFileName = svgas[key];
if (svgaFileName) {
return BASE_URL + svgas;
}
}
播放 SVGA 動畫
詳細使用方式請參考 SVGA 官方提供的接入方式，相關位址如下：
