svga动画 性能更好更方便的CSS动画

作者：娇娇jojo

时间：2018年01月25日

对于一些小的简单的动画，借助css、js差不多就能实现，而且还不能保证还原度百分百（还能接受）；

对于那些复杂的动画，就算css、js（或者用帧动画、属性动画、Gif、WebP等实现）勉强实现，先不说还原度了（肯定很差），实现动画的资源一般都比较大，或者Gif 那就更大还不高清，加载慢，消耗性能，还有可能内存泄漏，造成手机发烫，闪退等现象。既然问题这么多，难道不实现了？如果要实现的话我们应该怎么办？

这时候就要找别的办法了，就不卖关子了，给大家推荐一个很好用的动画工具——svga。

想必有很多人听过这个工具，大部分直播送礼物的礼物动效就是 svga 做的，当然也有别的工具，比如 Lottie （感兴趣的可以看一看），不过 Lottie 对 web 端只支持  React Native 。

svga是啥捏，通俗的来讲就是实现一套播放动画的框架，客户端只需要继承进来，UI设计师按照约定的动画语法作图给开发人员即可，这样大家就不需要累死累活想破脑子写出一个令切图小哥极度不满意而且性能极不好的动画效果了，是不是很开心，是不是炒鸡棒(๑•̀ㅂ•́)و

先介绍一下 svga 的优点吧：

对切图小哥和写Bug小哥友好，嗯，没错，再也不用互相伤害了。

高效，终端只需要继承这套方案框架，把动画实现交给动画设计师即可。

高性能，在实现酷炫动画的基础上，播放性能表现优于Gif和WebP。

动画文件小，同样的动画效果，SVGA文件要比Gif和WebP的文件小得多。

跨平台，支持Android、iOS、React
Native、Web、还有不久前刚出来的微信小程序，不过小程序上的绘制功能很弱，效果有点感人。

开源，可以直接访问YY UED的Github获取框架源码 https://github.com/yyued

svga案例效果图（引用自掘金文章 ”直播App中Android酷炫礼物动画实现方案（上篇）“）

1、直接引入cdn

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.0.7/build/svga.min.js"></script>

2、npm

npm install svgaplayerweb --save
Add  require("svgaplayerweb")  to  xxx.js

具体的兼容见 https://github.com/yyued/SVGAPlayer-Web。

1、法一

• 添加div标签

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

• 加载动画

  var player = new SVGA.Player('#demoCanvas');
  var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
  parser.load('rose_2.0.0.svga', function(videoItem) {
  player.setVideoItem(videoItem);
  player.startAnimation();
  })

2、法二

• 自动加载动画

  <div class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>

Android 4.x 兼容
众所周知，有一些 Android 操作系统缺乏 Blob 的支持，所以需要手动添加 Blob 到代码中。

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>

其他详细用法和注意事项见 https://github.com/yyued/SVGAPlayer-Web 。