• 📣 📣 Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In the era of live video broadcasting, every platform will have the function of live video tipping, and some cool animations will appear after consumption. Today, we will take a look at how those cool animations are realized.

Implementation approach

First of all, from the perspective of implementation, there are the following schemes to consider:

    • Scheme 1: frame animation;
    • Scheme 2: attribute animation;
    • Plan 3: Gif or WebP;
    • Lottie SVGA…

All the above three schemes have their own disadvantages:

  • In the first scheme, pictures need to be brought into the installation package, which increases the volume of the installation package. Moreover, there are many kinds of gifts in the live broadcast application, and each gift brings a set of frame animations, which is quite unscientific.
  • The development cost of scheme 2 is relatively high. Each set of gift animations is basically different, and the developers need to adjust the parameters carefully. The time spent on business coding will become very limited, and the code reuse rate is extremely low.

In addition to the defects mentioned above, there is another unsolved problem in the live broadcast business scenario. That is, when the client is released, users must upgrade the client if they want to launch some newly designed gifts, otherwise they cannot experience the newly launched gifts.

Option 3 does not have the business problems mentioned above, but is not optimal in terms of performance. Gif figure is essentially a ZhenZhen static pictures of packaged together, into a compressed package, but the Gif compression algorithm problem, in fact, this package is not small, just a cool some gift effect can get a few megabytes to a dozen trillion files, for mobile terminal, no matter from the performance of the download and play, 1. Animation files are too big

2. High playback resource usage

3, poor effect (GIF only supports 8-bit color). Gif pictures can do animation, WebP format pictures can also be achieved, and WebP pictures are much smaller than Gif, the following is the same effect with Gif and WebP comparison.

What about using WebP? Well, using WebP can compress the animation file size to a half, but the resource usage problems not solve, this is still a headache problem, think about it, a live video stream is using the system to process large amounts of memory allocation, and then the air inside may be even more DaTiLiang thousands of people online at the same time, the audience the animation of gift-giving out one by one, The app just died…

Animation library comparison

Support platform Android/iOS/Web Android/iOS/Web Android/iOS iOS Android/iOS/Web
Design Tool Support After Effects AE & Flash AE AE AE
Functional boundaries all Part of the The vector diagram The vector diagram Most of the
Export tool The plug-in The plug-in The script The plug-in A separate design tool
Design cost Need naming conventions There is no Need a script The plug-in A separate design tool
Resource pack size zip 2.6 M 767k 2M
charge N N N Y Y
The animation library Lottie SVGA Keyframes Squall Spine

SVGA and Lottie

The animation library advantages disadvantages
SVGA – The resource package is small
  • Test tools complete – three terminals available
  • Full – Protobuf serialization structure data format, serialized data body is smaller, transmission efficiency is higher than XML, JSON.
  • Yes, you need to define a protocol for configuring the profile picture. | – every gift when play to new decompression, need to change a caching strategy
  • Svga is packaged with Zlib (byte stream data compression library), making it difficult to unpack and track package contents. |

| Lottie | – three side is available

  • Callback Complete – The project already has a cache logic
  • The current library can meet the needs of the business, do not need to secondary development | – resource bundle in comparison SVGA will be more than twice
  • Image needs to be renamed – even if the display does not work. |

The performance comparison

  • Comparison of the same gift
Memory footprint 350 339
Graphics (Graphics) 116-117. 113-103.
CPU Average 5.6, highest 15 Average 5.18, highest 13.75
project SVGA Lottie
Memory footprint 390 362
Graphics (Graphics) 144-138. 114-114.
CPU The average is 6.8 and the highest is 17 Average 7.4, highest 23
project SVGA Lottie

Svga definition

SVGA is an animation format compatible with iOS/Android/Flutter/Web. Svga is a new animation format that provides a high performance animation playback experience.

Implementation idea:

    • A frame of a frame
    • By setting the frame rate, to generate a configuration file, so that each frame has a configuration, each frame is a key frame, through the frame rate to brush each frame of the picture, this idea is very similar to GIF, but through the configuration of the animation process can be reused images. Performance improves. And you don’t have to parse higher-order interpolation (quadratic linear equations, Bessel curve equations)

compatibility

SVGAPlayer 2.0.0 supports only the following browsers

  • Edge / IE 6+
  • Safari / Chrome
  • IOS 6.0+ / Android 4.0+

The installation

Precompiled js

Add to your.html page

NPM

npm install svgaplayerweb --save 1. Add const SVGA = require('svgaplayerweb'); Import SVGA from 'svgaplayerweb'; To XXX. JsCopy the code

Using the step

Flow chart:

1. Create canvas container

<div id="demoCanvas" style="styles..." ></div>Copy the code

2. Load the animation

var player = new SVGA.Player('#demoCanvas'); var parser = new SVGA.Parser('#demoCanvas'); Parser. The load (' rose_2. 0.0. Svga ', function (videoItem) {player. SetVideoItem (videoItem); player.startAnimation(); })Copy the code

API:

Properties

  • int loops; – Number of animation cycles. The default value is 0, indicating infinite cycles.
  • BOOL clearsAfterStop; – The default value is true, indicating that the canvas is cleared when the animation ends.
  • string fillMode; – The default value is Forward, and the optional value is Forward/Backward. When clearsAfterStop is false, Forward indicates that the animation will stay in the last frame after the animation ends, and Backward indicates that the animation will stay in the first frame after the animation ends.

Methods

  • constructor (canvas); – Pass # ID or CanvasHTMLElement to the first parameter
  • startAnimation(reverse: boolean = false); – Play the animation from frame 0
  • startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); – Plays animation of [location, location+length] specified interval frame
  • pauseAnimation(); – Pauses in the current frame
  • stopAnimation(); – Stops playing animation, clears canvas if clearsAfterStop === true
  • setContentMode(mode: “Fill” | “AspectFill” | “AspectFit”); – Sets the stretch mode of the animation
  • setClipsToBounds(clipsToBounds: boolean); – Clipping will be done if the box boundary is exceeded
  • clear(); – Force the canvas to empty
  • stepToFrame(frame: int, andPlay: Boolean); – Jumps to the specified frame, if andPlay === true, the animation starts at the specified frame
  • stepToPercentage(percentage: float, andPlay: Boolean); – Jumps to the specified percentage, if andPlay === true, the animation starts at the specified percentage
  • setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); – Set dynamic image, transform is optional, transform is used to transform and replace images
  • setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); – Set dynamic text
  • clearDynamicObjects(); – Clears all moving images and text

Callback Method

  • onFinished(callback: () => void): void; – Callback when animation stops playing
  • onFrame(callback: (frame: number): void): void; – Callback after animation plays to a frame
  • onPercentage(callback: (percentage: number): void): void; – Callback after animation reaches a certain progress