欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

svga-前端如何使用svga动画

程序员文章站 2022-03-02 19:44:37
...
  • 前言

    今天由于公司开发的直播间有发送礼物的需求,这里由于svga动画相对于gif图更加可控,所以使用svga动画,现在做个记录

  • 正文

    定义

    SVGA(http://svga.io/index.html) 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Flutter / Web。
    SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。动画设计师专注动画设计,通过工具输出 svga 动画文件,提供给开发工程师在集成 svga player 之后直接使用。

    使用

    1. 导入
    • 预编译 JS

    添加 <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script> 到 your.html 页面

    • NPM
      npm install svgaplayerweb --save

    添加 const SVGA = require('svgaplayerweb');import SVGA from 'svgaplayerweb'; 至 xxx.js

    1. 添加 Div 容器

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

    1. 加载动画
    var player = new SVGA.Player('#demoCanvas');
    var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+,那么必须把同样的选择器传给 Parser。
    parser.load(`${你的svga文件路径}`, function(videoItem) {
        player.setVideoItem(videoItem);
        player.startAnimation();
    })
    

    这三步就可实现svga动画播放了,如果要使用其他属性,比如只循环播放一次player.loops=1,点击暂停播放动画player.pauseAnimation(),具体请参见第四步 其他属性操作

    1. 其他属性

    SVGA.Player

    SVGA.Player 用于控制动画的播放和停止

    Properties
    • int loops; - 动画循环次数,默认值为 0,表示无限循环。
    • BOOL clearsAfterStop; - 默认值为 true,表示当动画结束时,清空画布。
    • string fillMode; - 默认值为 Forward,可选值 Forward / Backward,当 clearsAfterStop 为 false 时,Forward 表示动画会在结束后停留在最后一帧,Backward 则会在动画结束后停留在第一帧。
    Methods
    • constructor (canvas); - 传入 #id 或者 CanvasHTMLElement 至第一个参数
    • startAnimation(reverse: boolean = false); - 从第 0 帧开始播放动画
    • startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - 播放 [location, location+length] 指定区间帧动画
    • pauseAnimation(); - 暂停在当前帧
    • stopAnimation(); - 停止播放动画,如果 clearsAfterStop === true,将会清空画布
    • setContentMode(mode: “Fill” | “AspectFill” | “AspectFit”); - 设置动画的拉伸模式
    • setClipsToBounds(clipsToBounds: boolean); - 如果超出盒子边界,将会进行裁剪
    • clear(); - 强制清空画布
    • stepToFrame(frame: int, andPlay: Boolean); - 跳到指定帧,如果 andPlay === true,则在指定帧开始播放动画
    • stepToPercentage(percentage: float, andPlay: Boolean); - 跳到指定百分比,如果 andPlay === true,则在指定百分比开始播放动画
    • setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - 设定动态图像, transform 是可选的, transform 用于变换替换图片
    • setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - 设定动态文本
    • clearDynamicObjects(); - 清空所有动态图像和文本
    Callback Method
    • onFinished(callback: () => void): void; - 动画停止播放时回调
    • onFrame(callback: (frame: number): void): void; - 动画播放至某帧后回调
    • onPercentage(callback: (percentage: number): void): void; - 动画播放至某进度后回调

    SVGA.Parser

    SVGA.Parser 用于加载远端或 Base64 动画,并转换成 VideoItem。

    跨域的 SVGA 资源需要使用 CORS 协议才能加载成功。

    如果你需要加载 Base64 资源,或者 File 资源,这样传递就可以了 load(File)load('data:svga/2.0;base64,xxxxxx')

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

    像直播发送礼物存在多个礼物动画,建议只加载一个player,发送不同礼物时,替换svga路径即可

  • 扩展

    svga说明 github地址