• preface

    Today, there is a demand for sending gifts in the studio developed by the company. Svga animation is more controllable than GIF, so SVGA animation is used. Now I make a record

  • The body of the

    define

    SVGA (svga.io/index.html) is a cross-platform open source animation format compatible with iOS/Android/Flutter/Web. SVGA not only is simple to use and has excellent performance, but also allows animation development to have a clear division of labor and focus on their own fields, which greatly reduces the communication cost of animation interaction and improves development efficiency. The animator focuses on animation design and outputs SVGA animation files through the tool, which can be used by the developer directly after the integration of SVGA Player.

    use

    1. The import
    • Precompiled JS

    Add < script SRC = “https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js” > < / script > to your HTML page

    • NPM

    npm install svgaplayerweb --save

    Add const SVGA = require(‘svgaplayerweb’); Import SVGA from ‘svgaplayerweb’; To XXX. Js

    1. Adding a Div container

    <div id="demoCanvas" style="styles..." ></div>

    1. Loading animation
    var player = new SVGA.Player('#demoCanvas'); var parser = new SVGA.Parser('#demoCanvas'); // If you want to support IE6+, you must pass the same selector to Parser. Parser. load(' ${your svGA file path} ', function(videoItem) {player.setVideoItem(videoItem); player.startAnimation(); })Copy the code

    Loops =1. Pause Player.pauseAnimation (). For more details, see Step 4

    1. Other attributes

    SVGA.Player

    Svga. Player controls the play and stop of animations

    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

    SVGA.Parser

    Svga.parser is used to load remote or Base64 animations and convert to VideoItem.

    Cross-domain SVGA resources can be loaded successfully only after using the CORS protocol.

    If you need to load a Base64 resource, or a File resource, this can be done load(File) or load(‘data:svga/2.0; Base64, XXXXXX ‘).

    Methods
    • constructor();
    • load(url: string, success: (videoItem: VideoEntity) => void, failure: (error: Error) => void): void;

  • supplement

    For example, if there are multiple gift animations in live sending gifts, it is recommended to load only one Player and replace svGA path when sending different gifts

  • extension

    Svga Indicates the Github address