SVGAPlayer 是一个轻量的动画渲染库。你可以使用工具从 Adobe Animate CC 或者 Adobe After Effects 中导出动画文件,然后使用 SVGAPlayer 在移动设备上渲染并播放。
SVGAPlayer-Android 使用原生 Android Canvas 库渲染动画,为你提供高性能、低开销的动画体验。
如果你想要了解更多细节,请访问官方网站。
我们在这里介绍 SVGAPlayer-Android 的用法。想要知道如何导出动画,点击这里。
我们的 aar 包托管在 JitPack 上,你需要将 JitPack.io 仓库添加到工程 build.gradle 中。
- allprojects {
- repositories {
- ...
- maven { url 'https://jitpack.io' }
- }
- }
-
然后,在应用 build.gradle 中添加依赖。
- compile 'com.github.yyued:SVGAPlayer-Android:latest'
-
SVGAParser 单例需要在使用之前初始化, 否则会上报错误信息: Log.e("SVGAParser", "在配置 SVGAParser context 前, 无法解析 SVGA 文件。")
请参阅此处 Dynamic · Matte Layer
- -keep class com.squareup.wire.** { *; }
- -keep class com.opensource.svgaplayer.proto.** { *; }
-
SVGAPlayer 可以从本地 assets 目录,或者远端服务器上加载动画文件。
你可以使用 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 中,允许定义以下这些标签:
用于表示 svga 文件的路径,提供一个在 assets 目录下的文件名,或者提供一个 http url 地址。
默认为 true,当动画加载完成后,自动播放。
默认为 0,设置动画的循环次数,0 表示无限循环。
默认为 false,当动画播放完成后,是否清空画布,以及 SVGAVideoEntity 内部数据。 不再推荐使用,开发者可以通过 clearAfterDetached 控制资源释放,或者手动通过 SVGAVideoEntity#clear 控制资源释放
默认为 false,当 SVGAImageView 触发 onDetachedFromWindow 方法时,是否清空画布。
默认为 Forward,可以是 Forward、 Backward、 Clear。
也可以使用代码添加 SVGAImageView。
- SVGAImageView imageView = new SVGAImageView(this);
- parser = SVGAParser.shareParser()
必须在使用 SVGAParser 单例前初始化,
- SVGAParser.shareParser().init(this);
-
否则会上报错误信息: Log.e("SVGAParser", "在配置 SVGAParser context 前, 无法解析 SVGA 文件。")
你也可以自行创建 SVGAParser 实例。
- parser = new SVGAParser(this);
- // 第三个为可缺省参数,默认为 null,如果设置该方法,则内部不在处理音频的解析以及播放,会通过 PlayCallback 把音频 File 实例回传给开发者,有开发者自行控制音频的播放与停止。
- parser.decodeFromAssets("posche.svga", object : SVGAParser.ParseCompletion {
- // ...
- }, object : SVGAParser.PlayCallback {
- // The default is null, can not be set
- })
- parser = new SVGAParser(this);
- // 第三个为可缺省参数,默认为 null,如果设置该方法,则内部不在处理音频的解析以及播放,会通过 PlayCallback 把音频 File 实例回传给开发者,有开发者自行控制音频的播放与停止。
- parser.decodeFromURL(new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"), new SVGAParser.ParseCompletion() {
- // ...
- }, object : SVGAParser.PlayCallback {
- // The default is null, can not be set
- })
- 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 不会管理缓存,你需要自行实现缓存器。
SVGAParser 依赖 URLConnection, URLConnection 使用 HttpResponseCache 处理缓存。
添加代码至 Application.java:onCreate 以设置缓存。
- val cacheDir = File(context.applicationContext.cacheDir, "http")
- HttpResponseCache.install(cacheDir, 1024 * 1024 * 128)
更新了内部 log 输出,可通过 SVGALogger 去管理和控制,默认是未启用 log 输出,开发者们也可以实现 ILogger 接口,做到外部捕获收集 log,方便排查问题。 通过 setLogEnabled 方法设置日志是否开启。 通过 injectSVGALoggerImp 方法注入自定义 ILogger 实现类。
- // 默认情况下,SVGA 内部不会输出任何 log,所以需要手动设置为 true
- SVGALogger.setLogEnabled(true)
-
- // 如果希望收集 SVGA 内部输出的日志,则可通过下面方式获取
- SVGALogger.injectSVGALoggerImp(object: ILogger {
- // 实现相关接口进行接收 log
- })
新增 SVGASoundManager 控制 SVGA 音频,需要手动调用 init 方法进行初始化,否则按照默认的音频加载逻辑。 另外通过 SVGASoundManager#setVolume 可控制 SVGA 播放时的音量大小,范围值在 [0f, 1f],默认控制所有 SVGA 播放时的音量, 而且该方法可设置第二个可缺省参数:SVGAVideoEntity,表示仅控制当前 SVGA 的音量大小,其他 SVGA 的音量保持不变。
- // 初始化音频管理器,方便管理音频播放
- // 如果没有初始化,则默认按照原有方式加载音频
- SVGASoundManager.init()
-
- // 释放音频资源
- SVGASoundManager.release()
-
- /**
- * 设置音量大小,entity 默认为空
- * 当 entity 为空,则控制所有通过 SVGASoundManager 加载的音频音量大小,即包括当前正在播放的音频以及后续加载的音频
- * 当 entity 不为空,则仅控制该实例的 SVGA 音频音量大小,其他则不受影响
- *
- * @param volume 取值范围为 [0f, 1f]
- * @param entity 即 SVGAParser 回调回来的实例
- */
- SVGASoundManager.setVolume(volume, entity)