打赏动画特效

概述

该文档主要讲述保利威观看页打赏动画特效接入方式。

SVGA 动画格式介绍

打赏特效是通过 SVGA 实现的。

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS、Android 和 Web。SVGA 除了使用简单，性能卓越，同时也让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。

接入方式

总体流程

实现打赏特效主要有三步：

1. 监听打赏消息事件，获取打赏道具图片地址。

2. 根据打赏道具图片地址，获取对应的 SVGA 动画文件地址。

3. 播放 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 官方提供的接入方式，相关地址如下：

• 官方地址：http://svga.io/index.html

• 开发文档：https://github.com/svga/SVGAPlayer-Web