原 荐 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 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

微信小程序实战--集阅读与电影于一体的小程序项目(一)

真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。

2642
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

3514
来自专栏数据小魔方

条件格式小技巧——图表集!

今天跟大家分享条件格式的另一个贴心小技巧——图表集! ▽▼▽ 也许大家用的不多,不过这个小技巧之所以要跟大家分享,是因为它采用的迷你小图标的形式,非常细致的刻画...

3365
来自专栏IMWeb前端团队

滚动上报实现

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 最近产品说要在一个课程卡片列表页面中收集用户滚动行为的数据,大致是要获取用户...

2267
来自专栏何俊林

推荐一个Flutter项目(已开源)

4573
来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

3141
来自专栏葡萄城控件技术团队

对《30个提高Web程序执行效率的好经验》的理解

阅读了IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。 下面是我...

1925
来自专栏前端杂货铺

关于首屏时间采集自动化的解决方案

关于首屏 首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算,在本文中并不重复阐述这些已经被提出或者实现的方案,而旨...

5457
来自专栏游戏开发那些事

【Unity3d游戏开发】UGUI插件入门之游戏菜单

  ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用。本篇博客会介绍如何使用ugui制...

2782
来自专栏九彩拼盘的叨叨叨

Web 前端菜鸟源码阅读列表

阅读优秀源码的好处有好多,如能学习一些技术知识,编码技巧,组织代码的方式,提高理解能力等等。

851

扫码关注云+社区

领取腾讯云代金券