SVGAPlayer-Android

类似于 Lottie。使用 SVGAPlayer 在 Android、iOS、Web 中播放 After Effects/Animate CC (Flash) 动画。「Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web. 」

Github星跟蹤圖

SVGAPlayer

介绍

SVGAPlayer 是一个轻量的动画渲染库。你可以使用工具从 Adobe Animate CC 或者 Adobe After Effects 中导出动画文件,然后使用 SVGAPlayer 在移动设备上渲染并播放。

SVGAPlayer-Android 使用原生 Android Canvas 库渲染动画,为你提供高性能、低开销的动画体验。

如果你想要了解更多细节,请访问官方网站

用法

我们在这里介绍 SVGAPlayer-Android 的用法。想要知道如何导出动画,点击这里

使用 Gradle 安装

我们的 aar 包托管在 JitPack 上,你需要将 JitPack.io 仓库添加到工程 build.gradle 中。

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

然后,在应用 build.gradle 中添加依赖。

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

Parser 单例支持

SVGAParser 单例需要在使用之前初始化, 否则会上报错误信息: Log.e("SVGAParser", "在配置 SVGAParser context 前, 无法解析 SVGA 文件。")

遮罩支持

请参阅此处 Dynamic · Matte Layer

混淆规则

-keep class com.squareup.wire.** { *; }
-keep class com.opensource.svgaplayer.proto.** { *; }

放置 svga 文件

SVGAPlayer 可以从本地 assets 目录,或者远端服务器上加载动画文件。

使用 XML

你可以使用 layout.xml 添加一个 SVGAImageView。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.opensource.svgaplayer.SVGAImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:source="posche.svga"
        app:autoPlay="true"
        android:background="#000" />

</RelativeLayout>    

在 XML 中,允许定义以下这些标签:

source: String

用于表示 svga 文件的路径,提供一个在 assets 目录下的文件名,或者提供一个 http url 地址。

autoPlay: Boolean

默认为 true,当动画加载完成后,自动播放。

loopCount: Int

默认为 0,设置动画的循环次数,0 表示无限循环。

clearsAfterStop: Boolean

默认为 true,当动画播放完成后,是否清空画布。

fillMode: String

默认为 Forward,可以是 Forward、 Backward。

Forward 表示动画结束后,将停留在最后一帧。

Backward 表示动画结束后,将停留在第一帧。

使用代码

也可以使用代码添加 SVGAImageView。

创建一个 SVGAImageView 实例

SVGAImageView imageView = new SVGAImageView(this);    

声明一个 SVGAParser 单例.

parser = SVGAParser.shareParser()    

初始化 SVGAParser 单例

必须在使用 SVGAParser 单例前初始化,

SVGAParser.shareParser().init(this);

否则会上报错误信息: Log.e("SVGAParser", "在配置 SVGAParser context 前, 无法解析 SVGA 文件。")

你也可以自行创建 SVGAParser 实例。

创建一个 SVGAParser 实例,加载 assets 中的动画。

parser = new SVGAParser(this);
parser.decodeFromAssets("posche.svga", new SVGAParser.ParseCompletion() {
  // ...
});    

创建一个 SVGAParser 实例,加载远端服务器中的动画。

parser = new SVGAParser(this);
parser.decodeFromURL(new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"), new SVGAParser.ParseCompletion() {
  // ...
});    

创建一个 SVGADrawable 实例,并赋值给 SVGAImageView,然后播放动画。

parser = new SVGAParser(this);
parser.decodeFromURL(..., new SVGAParser.ParseCompletion() {
    @Override
    public void onComplete(@NotNull SVGAVideoEntity videoItem) {
        SVGADrawable drawable = new SVGADrawable(videoItem);
        imageView.setImageDrawable(drawable);
        imageView.startAnimation();
    }
    @Override
    public void onError() {
    }
});
    

缓存

SVGAParser 不会管理缓存,你需要自行实现缓存器。

设置 HttpResponseCache

SVGAParser 依赖 URLConnection, URLConnection 使用 HttpResponseCache 处理缓存。

添加代码至 Application.java:onCreate 以设置缓存。

val cacheDir = File(context.applicationContext.cacheDir, "http")
HttpResponseCache.install(cacheDir, 1024 * 1024 * 128)    

功能示例

APIs

请参阅此处 https://github.com/yyued/SVGAPlayer-Android/wiki/APIs

CHANGELOG

请参阅此处 CHANGELOG

概覽

名稱與所有者svga/SVGAPlayer-Android
主編程語言Kotlin
編程語言Java (語言數: 2)
平台Android
許可證Apache License 2.0
發布數65
最新版本名稱2.6.1 (發布於 2021-08-30 13:03:45)
第一版名稱1.1.0-beta (發布於 2017-02-22 17:58:13)
創建於2017-03-30 04:01:22
推送於2023-02-06 06:35:32
最后一次提交2023-02-06 14:35:32
星數3.2k
關注者數54
派生數476
提交數452
已啟用問題?
問題數366
打開的問題數54
拉請求數61
打開的拉請求數11
關閉的拉請求數22
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

SVGAPlayer

简体中文

Backers on Open Collective
Sponsors on Open Collective

Introduce

SVGAPlayer is a light-weight animation renderer. You use tools to export svga file from Adobe Animate CC or Adobe After Effects, and then use SVGAPlayer to render animation on mobile application.

SVGAPlayer-Android render animation natively via Android Canvas Library, brings you a high-performance, low-cost animation experience.

If wonder more information, go to this website.

Usage

Here introduce SVGAPlayer-Android usage. Wonder exporting usage? Click here.

Install Via Gradle

We host aar file on JitPack, your need to add JitPack.io repo build.gradle

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

Then, add dependency to app build.gradle.

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

Static Parser Support

Perser#shareParser should be init(context) in Application or other Activity.
Otherwise it will report an error:
Log.e("SVGAParser", "在配置 SVGAParser context 前, 无法解析 SVGA 文件。")

Matte Support

Head on over to Dynamic · Matte Layer

Proguard-rules

-keep class com.squareup.wire.** { *; }
-keep class com.opensource.svgaplayer.proto.** { *; }

Locate files

SVGAPlayer could load svga file from Android assets directory or remote server.

Using XML

You may use layout.xml to add a SVGAImageView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.opensource.svgaplayer.SVGAImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:source="posche.svga"
        app:autoPlay="true"
        android:background="#000" />

</RelativeLayout>

The following attributes is allowable:

source: String

The svga file path, provide a path relative to Android assets directory, or provide a http url.

autoPlay: Boolean

Defaults to true.

After animation parsed, plays animation automatically.

loopCount: Int

Defaults to 0.

How many times should animation loops. 0 means Infinity Loop.

clearsAfterStop: Boolean

Defaults to true.

Clears canvas after animation stop.

fillMode: String

Defaults to Forward. Could be Forward, Backward.

Forward means animation will pause on last frame after finished.

Backward means animation will pause on first frame after finished.

Using code

You may use code to add SVGAImageView either.

Create a SVGAImageView instance.

SVGAImageView imageView = new SVGAImageView(this);

Declare a static Parser instance.

parser = SVGAParser.shareParser()

Init parser instance

You should initialize the parser instance with context before usage.

SVGAParser.shareParser().init(this);

Otherwise it will report an error:
Log.e("SVGAParser", "在配置 SVGAParser context 前, 无法解析 SVGA 文件。")

You can also create SVGAParser instance by yourself.

Create a SVGAParser instance, parse from assets like this.

parser = new SVGAParser(this);
parser.decodeFromAssets("posche.svga", new SVGAParser.ParseCompletion() {
    // ...
});

Create a SVGAParser instance, parse from remote server like this.

parser = new SVGAParser(this);
parser.decodeFromURL(new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"), new SVGAParser.ParseCompletion() {
    
});

Create a SVGADrawable instance then set to SVGAImageView, play it as you want.

parser = new SVGAParser(this);
parser.decodeFromURL(..., new SVGAParser.ParseCompletion() {
    @Override
    public void onComplete(@NotNull SVGAVideoEntity videoItem) {
        SVGADrawable drawable = new SVGADrawable(videoItem);
        imageView.setImageDrawable(drawable);
        imageView.startAnimation();
    }
    @Override
    public void onError() {

    }
});

Cache

SVGAParser will not manage any cache, you need to setup cacher by yourself.

Setup HttpResponseCache

SVGAParser depends on URLConnection, URLConnection uses HttpResponseCache to cache things.

Add codes to Application.java:onCreate to setup cacher.

val cacheDir = File(context.applicationContext.cacheDir, "http")
HttpResponseCache.install(cacheDir, 1024 * 1024 * 128)

Features

Here are many feature samples.

APIs

Head on over to https://github.com/yyued/SVGAPlayer-Android/wiki/APIs

CHANGELOG

Head on over to CHANGELOG

Credits

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! ? [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

去到頂部