SVGAPlayer

Android Studio 3.0.0

We Recommend You Upgrade Android Studio 3.0.0.

If you want to run Sample Project on Android Studio 2.3.2, Download this commit.

我们推荐你将 Android Studio 升级到 3.0.0 版本，示例工程不能在 2.3.2 中开启（除非，你自行修改 Gradle 配置）。

如果你要在 Android Studio 2.3.2 中运行示例工程, 下载这个 commit.

Version

2.1.2

Feature: Add DynamicDrawer to DynamicEntity.

2.1.1

Improve: Improve performances, arrange code. Thanks @andyliumstar.
Feature: Add StaticLayout(SpannableString) Text to DynamicEntity.
Feature: Add Hidden Option to DynamicEntity.

2.1.0

Bugfix: SVGAImageView may leaks while startAnimation call multiple times. Thanks @andyliumstar
Feature: Add range mode and reverse mode.

2.0.3

Improve: SVGAPath parsing faster then before.

2.0.1

Let antiAlias defaults to true, add DrawFilter to Canvas.
Add isAnimating props to SVGAImageView.

2.0.0

Add SVGA-Format 2.0.0 support.

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.1.1'

Usage

Layout.xml

use layout.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.

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).

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.

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.

dynamicItem.setHidden(true, "ImageKey")

Dynamic Drawer

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

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");

yongjihong / svgaplayer-android Goto Github PK

svgaplayer-android's Introduction