美文网首页
直播动画实现方案一

直播动画实现方案一

作者: O蚂蚁O | 来源:发表于2018-04-24 15:44 被阅读0次

    全新的动画格式

    高性能动画播放体验

    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

    相关文章

      网友评论

          本文标题:直播动画实现方案一

          本文链接:https://www.haomeiwen.com/subject/gusjlftx.html