原 荐 svga 动画

作者:汪娇娇

时间:2017年12月26日

对于一些小的简单的动画,借助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 src="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 src="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>

三、Issues

Android 4.x 兼容

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

<script src="//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 原 模块化编程之require.js

    作者:汪娇娇 日期:2016.5.4 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,...

    jojo
  • 原 荐 自己写代码对比工具

    作者:汪娇娇 时间:2018年1月19日 上一篇:自己写JSON编辑器 基于上一次做的JSON编辑器,继而衍生出这一次的代码对比工具,本来打算写在一块的,想想懒...

    jojo
  • 原 原始值和复杂值

    作者:汪娇娇 日期:2016.10.12 一、原始值 1、定义:本身很简单,不能由其他值组成的值,例如5、“foo”、true、null和undefined等,...

    jojo
  • HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

    用户1258909
  • Lottie内存泄漏问题的定位与分析

    Lottie是Airbnb开源的跨平台动画库,支持iOS、Android、React Native 和 Web 等平台。它可以解析使用 Bodymovin 导出...

    用户5521279
  • 口袋动画:PPT终于迎来了人工智能创作时代!【第一期《你不知道的WPS》】

    还记得去年WPS2019年的新品发布会吗?新的交互方式,创新的聚合界面,全新的视觉,都让很多Office人沸腾。整场发布会的其中一个大的高潮来自于一个“AI创作...

    寒树Office与RPA
  • Android-Animation 总结(一)

    鉴于今天是劳动节,鼓励自己整理一下android相关的知识,祝所有劳动者节日快乐。

    android_薛之涛
  • 漂亮loading加载动画,这些方法可知道?

    这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

    企鹅号小编
  • 证件OCR拍照扫描识别SDK

    随着智能手机的普及,手机不断实现质的飞跃,你家里还能找到那台N年前风靡全国的大哥大和诺基亚吗?相信很多人家里都还有。后来智能手机的发展直接打破原有的平衡,直接让...

    ocr识别算法专家
  • 模型效果评价—混淆矩阵

    对于分类模型,在建立好模型后,我们想对模型进行评价,常见的指标有混淆矩阵、KS曲线、ROC曲线、AUC面积等。也可以自己定义函数,把模型结果分割成n(100)份...

    阿黎逸阳

扫码关注云+社区

领取腾讯云代金券