SvgaPlayer

兼容web和淘宝小程序的svga文件播放器 1.0.3版本

仅web轻量解析 1.0.4版本 1.0.8版本（支持换图）

网页使用

    <div>
        <canvas id="testCanvas" width="500" height="500" style="background-color: #000000; "></canvas>
    </div>
    <script src="../build/svgaPlayer.min.js"></script>
    <script>
        window.onload = function () {
            var canvas = document.getElementById("testCanvas");
            //创建一个动画容器，一个canvas，里面可放多个MovieClip，且各自的MovieClip可以修改位置，缩放，旋转，锚点。
            var svgaStage = new SvgaPlayer.SvgaStage(canvas)
            //循环起来
            loop()
            function loop(){
               svgaStage.flush()
               requestAnimationFrame(loop)
            }
            //加载动画数据
            SvgaPlayer.loadSvga("./angel.svga", function (videoItem) {
                //实例化动画
                var mv = new SvgaPlayer.MovieClip(videoItem);
                //添加进动画容器
                svgaStage.addChild(mv)
                //可设置canvas的尺寸，尽量自行适配，canva实际尺寸和canvas的style尺寸
                canvas.width = mv.videoWidth;
                canvas.height = mv.videoHeight;
                //一些api的方法
                mv.stop();
                setTimeout(() => {
                    mv.gotoAndPlay(1, false)
                }, 200)
                setTimeout(() => {
                    mv.startAniRange(1, mv.totalFrames / 2, 2, () => {
                        console.log(112)
                    })
                }, 2000)
                // mv.rotation = 45
                // mv.x= 100
                // mv.scaleX=1.5
                // mv.y= 200
                mv.anchorX= 750/2;
                mv.anchorY= 750/2;
                setInterval(()=>{
                    mv.rotation+=1
                },16.7)
            })
            //再加一个
            SvgaPlayer.loadSvga("./step1-1.svga", function (videoItem) {
                var mv = new SvgaPlayer.MovieClip(videoItem);
                svgaStage.addChild(mv)
            }, function (error) {
                alert(error);
            })
        }
    </script>

npm使用

npm install @mrkwon/svga-player
import { loadSvga, SvgaStage, MovieClip } from "@mrkwon/svga-player"

var svgaStage = new SvgaStage(canvas)
loadSvga("./svga/step1-1.svga", (v) => {
     var mv = new MovieClip(videoItem);
    //添加进动画容器
    svgaStage.addChild(mv)
}, (err) => { console.log(err) })
//循环起来
loop()
function loop(){
   svgaStage.flush()
   requestAnimationFrame(loop)
}

淘宝小程序使用

import { loadSvga, SvgaStage, MovieClip } from "@mrkwon/svga-player"

Page({
    onCanvasReady() {
        this.canvas = my.createCanvas({
            id: 'canvas',
            success: (canvas) => {
                var systemInfo = my.getSystemInfoSync();
                //适配尺寸
                canvas.width = 750 * systemInfo.pixelRatio;
                canvas.height = 500 * systemInfo.pixelRatio;
                //创建一个动画容器，一个canvas
                var svgaStage = new SvgaStage(canvas);
                //加载动画数据，域名必须是阿里系的白名单域名，或者cloud链接
                loadSvga("./angel.svga", function (videoItem) {
                    //实例化动画
                    var mv = new MovieClip(videoItem);
                    //添加进动画容器
                    svgaStage.addChild(mv)
                }, function (error) {
                    alert(error);
                })
                //再加一个
                loadSvga("./step1-1.svga", function (videoItem) {
                    var mv = new MovieClip(videoItem);
                    svgaStage.addChild(mv)
                }, function (error) {
                    alert(error);
                })
                //循环起来
                loop()
                function loop(){
                    svgaStage.flush()
                    canvas.requestAnimationFrame(loop)
                }
            }
        });
    }
})