直播動畫實現方案一

全新的動畫格式

高性能動畫播放體驗

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,098評論 25 708
  • MicrosoftInternetExplorer402DocumentNotSpecified7.8 磅Norm...
    WW姐閱讀 671評論 0 0
  • 有一天,我做了媽媽。 日子一天一天在過,如水;日歷一天一天在翻,不覺。眼前仍清楚十年前剛來到文昌的一幕...
    柔雅羽扇閱讀 383評論 0 2