SVGA使用心得

1、什么是SVGA

SVGA是一种动画格式，可以兼容安卓、ios和web，可以实现很多复杂的动画，这样开发就不用头疼canvas来实现动画时的卡顿优化问题了。

2、引入SVGA

因为博主是前端方向的，所以这里只介绍web页面如何引入，这个是SVGA官方的web地址，如果大家感兴趣可以看一下

和正常js引入一样，我们是需要script引入即可。

在引入svga之后，我们需要在html中生命一个对象来存放svga动画。

这里只是简单定义。

3、让svga动起来

```

var player = new SVGA.Player('#demoCanvas');

var parser = new SVGA.Parser('#demoCanvas');

parser.load('img/bb.svga', function(videoItem) {

    player.loops = 2;

    player.clearsAfterStop = false;

    player.setVideoItem(videoItem);

    player.startAnimation();

    player.onFrame(function (i) {

    });

})

```

我们可以看到，需要定义Player和Parser来统一完成一个动画的实现。

在load的callback函数中，我们可以设置

```

loop 循环次数

clearsAfterStop 动画结束都是否清楚内容，注意，这里如果不设置 默认true

setVideoItem 需要获取load返回参数才能生效

startAnimation 开始动画

pauseAnimation 暂停动画

stopAnimation  停止动画

onFrame 我们可以通过这个函数知道当前动画是播放的第几帧，然后根据具体业务需求展示效果。

```

4、svga的读取是依赖canvas的

可以看出 我们可以动过调节对象元素的样式来实现canvas的控制。

结语：

Svga可以很好的节省动效开发的时间，而且具有很好的兼容性，还可以完美还原设计稿。但是svga毕竟是一个动画文件，毕竟动画的方式是唯一的，所以对于多样性的根据用户操作来实现个性化展示的 还是需要依托于基础的js或者css来控制实现。