Reward Animation Effects

Updated: 2023-07-06 16:59:13

Overview

This document describes how to integrate reward animation effects into the Polyv viewing page.

Introduction to the SVGA Animation Format

Reward effects are implemented using SVGA.

SVGA is a cross-platform, open-source animation format compatible with iOS, Android, and Web. In addition to being simple to use and offering excellent performance, SVGA enables clear role division in animation development, allowing each party to focus on their own area of expertise. This greatly reduces communication costs for animation interaction and improves development efficiency.

Integration Method

Overall Process

Implementing reward effects involves three main steps:

Listen for reward message events to obtain the reward item image URL.
Based on the reward item image URL, retrieve the corresponding SVGA animation file URL.
Play the SVGA animation file.

Based on the Live 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 动画
  }
});

Based on the Chat Room 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 动画
  }
});

Obtaining the SVGA Animation File URL

By using the getSvgaUrl method in the code below, you can obtain the SVGA animation file URL corresponding to the reward image:

// 地址目录
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;
  }
}

Playing the SVGA Animation

For detailed usage, please refer to the integration method provided by the official SVGA documentation. The relevant addresses are as follows:

Official website: http://svga.io/index.html
Development documentation: https://github.com/svga/SVGAPlayer-Web

Live Web SDK