SVGAPlayer-Android
Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web. 使用 SVGAPlayer 在 Android、iOS、Web中播放 After Effects / Animate CC (Flash) 动画。
Top Related Projects
Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.
Render After Effects animations natively on Android and iOS, Web, and React Native
An Android library for managing images and the memory they use.
An image loading and caching library for Android focused on smooth scrolling
An efficient, small mobile key-value storage framework developed by WeChat. Works on Android, iOS, macOS, Windows, and POSIX.
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
Quick Overview
SVGAPlayer-Android is an open-source library for rendering and playing SVGA animations on Android platforms. It provides a seamless way to integrate high-quality, interactive vector animations into Android applications, offering a lightweight alternative to traditional video formats.
Pros
- Efficient rendering of complex vector animations with minimal resource usage
- Supports interactive elements within animations, allowing for user interaction
- Smaller file sizes compared to traditional video formats, reducing app size and data usage
- Cross-platform compatibility with iOS and Web versions available
Cons
- Limited documentation and examples, which may make it challenging for new users
- Requires specific SVGA file format, which may not be as widely supported as other animation formats
- Potential performance issues on older or low-end devices when rendering complex animations
- Limited community support compared to more established animation libraries
Code Examples
- Basic SVGA animation playback:
val player = SVGAImageView(context)
val parser = SVGAParser(context)
parser.decodeFromAssets("animation.svga", object : SVGAParser.ParseCompletion {
override fun onComplete(videoItem: SVGAVideoEntity) {
player.setVideoItem(videoItem)
player.startAnimation()
}
override fun onError() {}
})
- Adding click listeners to specific elements in the animation:
player.setClickArea("button", object : SVGAClickAreaListener {
override fun onClick(key: String) {
Toast.makeText(context, "Button clicked!", Toast.LENGTH_SHORT).show()
}
})
- Dynamically replacing text in the animation:
val dynamicEntity = SVGADynamicEntity()
dynamicEntity.setDynamicText("Hello, SVGA!", "text_placeholder")
player.setDynamicItem(dynamicEntity)
Getting Started
- Add the dependency to your app's
build.gradle
:
dependencies {
implementation 'com.github.yyued:SVGAPlayer-Android:2.6.1'
}
- Initialize the SVGA player in your layout:
<com.opensource.svgaplayer.SVGAImageView
android:id="@+id/svga_player"
android:layout_width="match_parent"
android:layout_height="match_parent" />
- Load and play an SVGA animation in your Activity or Fragment:
val player = findViewById<SVGAImageView>(R.id.svga_player)
val parser = SVGAParser(this)
parser.decodeFromAssets("animation.svga", object : SVGAParser.ParseCompletion {
override fun onComplete(videoItem: SVGAVideoEntity) {
player.setVideoItem(videoItem)
player.startAnimation()
}
override fun onError() {
// Handle error
}
})
Competitor Comparisons
Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.
Pros of cocos2d-x
- Cross-platform development for multiple platforms (iOS, Android, Windows, macOS, etc.)
- Rich set of features for game development, including physics engines and particle systems
- Large and active community with extensive documentation and resources
Cons of cocos2d-x
- Steeper learning curve, especially for developers new to game development
- Larger project size and potentially higher resource usage
- More complex setup and configuration process
Code Comparison
SVGAPlayer-Android (Java):
SVGAParser parser = new SVGAParser(this);
parser.parse(new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"), new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
SVGADrawable drawable = new SVGADrawable(videoItem);
imageView.setImageDrawable(drawable);
}
});
cocos2d-x (C++):
auto scene = Scene::create();
auto layer = Layer::create();
scene->addChild(layer);
auto sprite = Sprite::create("mysprite.png");
layer->addChild(sprite);
Director::getInstance()->runWithScene(scene);
The code snippets demonstrate the basic setup for displaying graphics in each framework. SVGAPlayer-Android focuses on parsing and displaying SVGA animations, while cocos2d-x provides a more comprehensive scene and sprite management system for game development.
Render After Effects animations natively on Android and iOS, Web, and React Native
Pros of Lottie-Android
- Wider adoption and community support
- Seamless integration with Adobe After Effects
- Extensive documentation and examples
Cons of Lottie-Android
- Larger file size for complex animations
- Limited support for certain After Effects features
- Steeper learning curve for designers
Code Comparison
SVGAPlayer-Android:
SVGAParser parser = new SVGAParser(this);
parser.parse(new URL("https://github.com/yyued/SVGA-Samples/blob/master/kingset.svga?raw=true"), new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
SVGADrawable drawable = new SVGADrawable(videoItem);
imageView.setImageDrawable(drawable);
}
});
Lottie-Android:
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation(R.raw.animation);
animationView.playAnimation();
Both libraries offer easy-to-use APIs for loading and displaying animations. SVGAPlayer-Android requires parsing the SVGA file, while Lottie-Android can directly load JSON animations from resources. Lottie's implementation is more concise, but SVGAPlayer provides more control over the parsing process.
An Android library for managing images and the memory they use.
Pros of Fresco
- More comprehensive image loading and caching solution
- Supports a wider range of image formats, including animated GIFs and WebP
- Actively maintained by Facebook with frequent updates and improvements
Cons of Fresco
- Larger library size, which may increase app size
- Steeper learning curve due to more complex API and features
- May be overkill for simple image loading tasks
Code Comparison
SVGAPlayer-Android:
val player = SVGAImageView(context)
val parser = SVGAParser(context)
parser.decodeFromAssets("animation.svga", object : SVGAParser.ParseCompletion {
override fun onComplete(videoItem: SVGAVideoEntity) {
player.setVideoItem(videoItem)
player.startAnimation()
}
})
Fresco:
val uri = Uri.parse("https://example.com/image.jpg")
val draweeView = SimpleDraweeView(context)
draweeView.setImageURI(uri)
// For animated images
val controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(true)
.build()
draweeView.controller = controller
SVGAPlayer-Android is specifically designed for SVGA animations, while Fresco offers a more general-purpose image loading solution with support for various formats and advanced features.
An image loading and caching library for Android focused on smooth scrolling
Pros of Glide
- More versatile, supporting a wide range of image formats and sources
- Highly optimized for smooth scrolling and memory efficiency
- Extensive documentation and large community support
Cons of Glide
- Larger library size compared to SVGAPlayer-Android
- Steeper learning curve for advanced features
- Not specifically designed for animated vector graphics
Code Comparison
SVGAPlayer-Android:
val player = SVGAImageView(context)
val parser = SVGAParser(context)
parser.decodeFromAssets("animation.svga", object : SVGAParser.ParseCompletion {
override fun onComplete(videoItem: SVGAVideoEntity) {
player.setVideoItem(videoItem)
player.startAnimation()
}
})
Glide:
Glide.with(context)
.load("https://example.com/image.jpg")
.placeholder(R.drawable.placeholder)
.error(R.drawable.error)
.into(imageView)
SVGAPlayer-Android is specifically designed for playing SVGA animations, while Glide is a more general-purpose image loading and caching library. SVGAPlayer-Android offers a simpler API for working with SVGA files, whereas Glide provides a flexible and powerful system for handling various image types and sources.
An efficient, small mobile key-value storage framework developed by WeChat. Works on Android, iOS, macOS, Windows, and POSIX.
Pros of MMKV
- High performance: MMKV uses memory mapping for fast read/write operations
- Cross-platform support: Works on Android, iOS, and other platforms
- Encryption support: Offers built-in encryption for secure data storage
Cons of MMKV
- Limited to key-value storage: Not suitable for complex data structures
- Larger file size: Memory-mapped files can be larger than traditional storage methods
- Learning curve: Requires understanding of memory mapping concepts
Code Comparison
SVGAPlayer-Android:
SVGAParser parser = new SVGAParser(context);
parser.parse(new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"), new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
SVGADrawable drawable = new SVGADrawable(videoItem);
imageView.setImageDrawable(drawable);
}
});
MMKV:
MMKV kv = MMKV.defaultMMKV();
kv.encode("bool", true);
kv.encode("int", 123);
kv.encode("string", "hello");
boolean bValue = kv.decodeBool("bool");
int iValue = kv.decodeInt("int");
String str = kv.decodeString("string");
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
Pros of vlayout
- More versatile layout system for complex UIs
- Better performance for large lists with heterogeneous items
- Supports a wider range of layout types (grid, linear, sticky, etc.)
Cons of vlayout
- Steeper learning curve due to more complex API
- May be overkill for simpler UI layouts
- Less focused on animation compared to SVGAPlayer-Android
Code Comparison
SVGAPlayer-Android:
SVGAParser parser = new SVGAParser(this);
parser.parse(new URL("https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true"), new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
SVGADrawable drawable = new SVGADrawable(videoItem);
imageView.setImageDrawable(drawable);
}
});
vlayout:
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager);
recyclerView.setAdapter(delegateAdapter);
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Archived
æ¬ä»åºå·²ç»åæ¢ç»´æ¤ï¼ä½ ä»ç¶ç»§ç»é 读æºç åå建ååï¼ä½æ¬ä»åºä¸ä¼ç»§ç»æ´æ°ï¼ä¹ä¸ä¼åçä»»ä½ issueã
This repo has stopped maintenance, you can still continue to read the source code and create forks, but this repo will not continue to be updated, nor will it answer any issues.
SVGAPlayer
æ¯ææ¬é¡¹ç®
- è½»ç¹ GitHub Starï¼è®©æ´å¤äººçå°è¯¥é¡¹ç®ã
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 false
.When the animation is finished, whether to clear the canvas and the internal data of SVGAVideoEntity.
It is no longer recommended. Developers can control resource release through clearAfterDetached, or manually control resource release through SVGAVideoEntity#clear
clearsAfterDetached: Boolean
Defaults to false
.Clears canvas and the internal data of SVGAVideoEntity after SVGAImageView detached.
fillMode: String
Defaults to Forward
. Could be Forward
, Backward
, Clear
.
Forward
means animation will pause on last frame after finished.
Backward
means animation will pause on first frame after finished.
Clear
after the animation is played, all the canvas content is cleared, but it is only the canvas and does not involve the internal data of SVGAVideoEntity.
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);
// The third parameter is a default parameter, which is null by default. If this method is set, the audio parsing and playback will not be processed internally. The audio File instance will be sent back to the developer through PlayCallback, and the developer will control the audio playback and playback. stop
parser.decodeFromAssets("posche.svga", object : SVGAParser.ParseCompletion {
// ...
}, object : SVGAParser.PlayCallback {
// The default is null, can not be set
})
Create a SVGAParser
instance, parse from remote server like this.
parser = new SVGAParser(this);
// The third parameter is a default parameter, which is null by default. If this method is set, the audio parsing and playback will not be processed internally. The audio File instance will be sent back to the developer through PlayCallback, and the developer will control the audio playback and playback. stop
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
})
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)
SVGALogger
Updated the internal log output, which can be managed and controlled through SVGALogger. It is not activated by default. Developers can also implement the ILogger interface to capture and collect logs externally to facilitate troubleshooting
Set whether the log is enabled through the setLogEnabled
method
Inject a custom ILogger implementation class through the injectSVGALoggerImp
method
// By default, SVGA will not output any log, so you need to manually set it to true
SVGALogger.setLogEnabled(true)
// If you want to collect the output log of SVGA, you can obtain it in the following way
SVGALogger.injectSVGALoggerImp(object: ILogger {
// Implement related interfaces to receive log
})
SVGASoundManager
Added SVGASoundManager to control SVGA audio, you need to manually call the init method to initialize, otherwise follow the default audio loading logic. In addition, through SVGASoundManager#setVolume, you can control the volume of SVGA playback. The range is [0f, 1f]. By default, the volume of all SVGA playbacks is controlled. And this method can set a second default parameter: SVGAVideoEntity, which means that only the current SVGA volume is controlled, and the volume of other SVGAs remains unchanged.
// Initialize the audio manager for easy management of audio playback
// If it is not initialized, the audio will be loaded in the original way by default
SVGASoundManager.init()
// Release audio resources
SVGASoundManager.release()
/**
* Set the volume level, entity is null by default
* When entity is null, it controls the volume of all audio loaded through SVGASoundManager, which includes the currently playing audio and subsequent loaded audio
* When entity is not null, only the SVGA audio volume of the instance is controlled, and the others are not affected
*
* @param volume The value range is [0f, 1f]
* @param entity That is, the instance of SVGAParser callback
*/
SVGASoundManager.setVolume(volume, entity)
Features
Here are many feature samples.
- Replace an element with Bitmap.
- Add text above an element.
- Add static layout text above an element.
- Hides an element dynamicaly.
- Use a custom drawer for element.
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]
Top Related Projects
Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.
Render After Effects animations natively on Android and iOS, Web, and React Native
An Android library for managing images and the memory they use.
An image loading and caching library for Android focused on smooth scrolling
An efficient, small mobile key-value storage framework developed by WeChat. Works on Android, iOS, macOS, Windows, and POSIX.
Project vlayout is a powerfull LayoutManager extension for RecyclerView, it provides a group of layouts for RecyclerView. Make it able to handle a complicate situation when grid, list and other layouts in the same recyclerview.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot