Convert Figma logo to code with AI

svga logoSVGAPlayer-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) 动画。

3,227
484
3,227
65

Top Related Projects

18,196

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

17,070

An Android library for managing images and the memory they use.

34,636

An image loading and caching library for Android focused on smooth scrolling

17,252

An efficient, small mobile key-value storage framework developed by WeChat. Works on Android, iOS, macOS, Windows, and POSIX.

10,798

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

  1. 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() {}
})
  1. 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()
    }
})
  1. Dynamically replacing text in the animation:
val dynamicEntity = SVGADynamicEntity()
dynamicEntity.setDynamicText("Hello, SVGA!", "text_placeholder")
player.setDynamicItem(dynamicEntity)

Getting Started

  1. Add the dependency to your app's build.gradle:
dependencies {
    implementation 'com.github.yyued:SVGAPlayer-Android:2.6.1'
}
  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" />
  1. 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

18,196

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.

17,070

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.

34,636

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.

17,252

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");
10,798

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

简体中文

支持本项目

  1. 轻点 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.

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]