SVGA优雅实现动画

在公司大部分是实现动画,今天分享一个特别好用的工具–SVGA

  • 全局安装SVGA
 npm install svgaplayerweb --save
  • 在使用时引入安装包
 import SVGA from 'svgaplayerweb';
  • 设置Dom节点
<div id="demoCanvas" ></div>
  • 具体使用
const svgUrl = '//yun.tuisnake.com/h5-mami/pluginAct/takePack1/cai1.svga';
const player = new SVGA.Player('#demoCanvas');
const parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+,那么必须把同样的选择器传给 Parser。

    function animationInit() {
      parser.load(svgUrl, function(videoItem) {
        player.loops = 1;  设置循环播放次数是 1 
        player.setVideoItem(videoItem);
        player.stepToFrame(0, true); // 从指定帧开始播放动画
        player.onFrame((i) => {
          console.log(i);   //。这里输入的是动画的帧数
          if (i >= 24 && i < 26) {
            console.log
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值