直播动画实现方案一

全新的动画格式

高性能动画播放体验

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

你可能感兴趣的:(直播动画实现方案一)