直播动画实现方案一

全新的动画格式

高性能动画播放体验

SVGA 是一种同时兼容 iOS / Android / Web 多个平台的动画格式。

立即体验

为什么选 SVGA？

对码农友好

便捷的 SDK 使得 SVGA 可运行在不同平台上，集成步骤轻松简单。

对设计师友好

你可以使用 After Effects 或是 Animate CC (Flash) 进行动画设计，SVGA 可以支持其中的大部分效果，设计师使用导出工具即可生成动画文件。

性价比更高

动画文件体积更小，播放资源占用更优，动画还原效果更好。

---

集成指南

将播放器集成至 iOS / Android / Web

iOS

使用 CocoaPods 集成源码，将以下依赖

pod 'SVGAPlayer'

添加至 Podfile 文件。

使用代码或 IB 添加 SVGAPlayer 至 View 中，具体方法参见：https://github.com/yyued/SVGAPlayer-iOS

Android

使用 Gradle 集成源码，添加 JitPack.io 到 root build.gradle 中 

allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}

添加以下依赖: 

compile 'com.github.yyued:SVGAPlayer-Android:2.0.0'

根据需要修改版本号，要获取最新的版本请点入：

https://jitpack.io/#yyued/SVGAPlayer-Android/。

使用代码或 XML 添加 SVGAImageView 至 View 中，具体方法参见：https://github.com/yyued/SVGAPlayer-Android。

Web

直接在： https://github.com/yyued/SVGAPlayer-Web 下载 build/svga.min.js，

并添加至目标页面。

或使用 npm install svgaplayerweb —save 添加依赖，

并在需要使用的 js 中添加 require('svgaplayerweb') 添加 Div 容器，并加载动画，

具体方法参见： https://github.com/yyued/SVGAPlayer-Web。

---

设计师工具

在 After Effects 2017 或 Animate CC 2017 中导出 SVGA 文件

Windows

下载 windows 的专用安装器： 

Converter for Animate CC | Converter for After Effects

解压下载的 zip 包

运行 install.exe -> Install Now 进行安装

打开 Animate CC 或 After Effects 将被转换文件保存

选择 菜单 > 窗口 > 扩展 > SVGAConverter

选择 输出路径 > 开始转换，稍等片刻后，svga 文件就会生成在您所输出的目录并开始播放

SVGAConverter_FL|SVGAConverter_AE

Mac

点击下载安装包： 

Converter for Animate CC | Converter for After Effects

下载、安装并运行 Adobe 的插件安装程序 ZXP Installer

选择 菜单 > 文件 > 打开，选中下载好的安装包，根据引导完成安装

打开 Animate CC 或 After Effects 将被转换文件保存

选择 菜单 > 窗口 > 扩展 > SVGAConverter

选择 输出路径 > 开始转换，稍等片刻后，svga 文件就会生成在您所输出的目录并开始播放

文章来源：http://svga.io/index.html