# SVGAPlayer-Android

**Repository Path**: junhu11/SVGAPlayer-Android

## Basic Information

- **Project Name**: SVGAPlayer-Android
- **Description**: 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) 动画。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-12
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SVGAPlayer

[![](https://jitpack.io/v/yyued/SVGAPlayer-Android.svg)](https://jitpack.io/#yyued/SVGAPlayer-Android)

## 付费咨询

* 如果你发现 SVGAPlayer 存在 BUG，请在 GitHub 上按照模板提交 issue。
* 如果有使用上的问题，请勿提交 issue（会被立刻关闭），请至[知乎付费问答](https://www.zhihu.com/zhi/people/1011556735563157504)提问，我们会全程跟踪你的疑问。

## SVGA Format

* SVGA is an opensource animation library, develop by YY UED.
* SVGA base on SVG's concept, but not compatible to SVG.
* SVGA can play on iOS/Android/Web.

@see https://github.com/yyued/SVGA-Format

## Install

### Gradle 

add JitPack.io repo build.gradle
```
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
```

add dependency to build.gradle (Final Release https://jitpack.io/#yyued/SVGAPlayer-Android/ )
```
compile 'com.github.yyued:SVGAPlayer-Android:2.3.0'
```

## Usage

### Layout.xml

use layout.xml.

```xml
<?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>
```

* source - SVGA file path，relative assets directory。
* autoPlay - defaults to true，play after load automatically。
* loopCount - defaults to 0，Loop Count, 0 = Infinity Loop。
* clearsAfterStop - Clears Canvas After Animation Stop
* fillMode - defaults to Forward，optional Forward / Backward，fillMode = Forward，Animation will pause on last frame while finished，fillMode = Backward , Animation will pause on first frame.

### Code

Add SVGAImageView via code.

#### Init ImageView

```
SVGAImageView imageView = new SVGAImageView(this);
```

#### Init Parser & Load File

```
parser = new SVGAParser(this);
parser.parse(new URL("http://legox.yy.com/svga/svga-me/angel.svga"), 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

Parser will not manage cache, you need to cache by yourself.

#### Install HttpResponseCache

Because SVGAParser depends URLConnection, and URLConnection uses HttpResponseCache.

Add following code to Application.java:onCreate is Okey to handle SVGA caches.

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

## API

### Properties Setter

* setLoops(int loops); - Loop Count，0 = Infinity Loop
* setClearsAfterStop(boolean clearsAfterStop); - Clears Canvas After Animation Stop
* setFillMode(FillMode fillMode); - Optional Forward / Backward，fillMode = Forward，Animation will pause on last frame while finished，fillMode = Backward , Animation will pause on first frame.
* setCallback(SVGAPlayerCallback callback) - SET Callbacks
* setVideoItem(SVGAVideoEntity videoItem) - SET animation instance

### Methods
* startAnimation() - Play Animation from 0 frame.
* startAnimation(range: SVGARange?, reverse: Boolean = false) - Play Animation in [location, location + length] range, and reverse or not.
* pauseAnimation() - Pause Animation and keep on current frame.
* stopAnimation() - Stop Animation，Clears Canvas while clearsAfterStop == YES.
* stepToFrame(int frame, boolean andPlay) - Step to N frame, and then Play Animation if andPlay === true.
* stepToPercentage(float percentage, boolean andPlay) - Step to x%, and then Play Animation if andPlay === true.

### SVGAPlayerCallback

* void onPause() - Call after animation paused.
* void onFinished() - Call after animation finished.
* void onRepeat() - Call while animation repeat.
* void onStep(int frame, float percentage) - Call after animation play to specific frame.

## Dynamic Object

You may replace Image or Text dynamically. To do this, you need to create a SVGADynamicEntity instance. (SVGAPlayer 支持动态图像和动态文本，要添加动态图像和动态文本，你需要创建一个 SVGADynamicEntity 对象，并传入 SVGDrawable 初始化方法。)

```
SVGADynamicEntity dynamicItem = new SVGADynamicEntity();
SVGADrawable drawable = new SVGADrawable(videoItem, dynamicItem);
```

### Dynamic Image

You need to create a bitmap instance, use setDynamicImage method, to replace specific image. Ask your designer to provide imageKey(or unzip the svga file, find it).

```
dynamicItem.setDynamicImage(bitmap or url, "99");
```

### Dynamic Text

Use setDynamicText method, to add text on specific image. Ask your designer to provide imageKey(or unzip the svga file, find it).

```java
TextPaint textPaint = new TextPaint();
textPaint.setTextSize(30);
textPaint.setFakeBoldText(true);
textPaint.setARGB(0xff, 0xff, 0xe0, 0xa4);
textPaint.setShadowLayer((float)1.0, (float)0.0, (float)1.0, Color.BLACK); // 各种配置
dynamicItem.setDynamicText("崔小姐不吃鱼 送了魔法奇缘", textPaint, "banner");
```

### Dynamic Text (Static Layout)

You can set SpannableString as dynamic text now.

```java
SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder("Pony 送了一打风油精给主播");
spannableStringBuilder.setSpan(new ForegroundColorSpan(Color.YELLOW), 0, 4, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
TextPaint textPaint = new TextPaint();
textPaint.setColor(Color.WHITE);
textPaint.setTextSize(28);
dynamicItem.setDynamicText(new StaticLayout(
        spannableStringBuilder,
        0,
        spannableStringBuilder.length(),
        textPaint,
        0,
        Layout.Alignment.ALIGN_CENTER,
        1.0f,
        0.0f,
        false
), "banner");
```

### Dynamic Hidden Element

Now use setHidden to hide an element prevents drawing.

```java
dynamicItem.setHidden(true, "ImageKey")
```

### Dynamic Drawer

You can set a drawer function above specific item, draw over canvas by yourself.

```java
dynamicItem.setDynamicDrawer(new Function2<Canvas, Integer, Boolean>() {
    @Override
    public Boolean invoke(Canvas canvas, Integer frameIndex) {
        Paint aPaint = new Paint();
        aPaint.setColor(Color.WHITE);
        canvas.drawCircle(50, 54, frameIndex % 5, aPaint);
        return false;
    }
}, "banner");
```