SVGAPlayer

付费咨询

如果你发现 SVGAPlayer 存在 BUG，请在 GitHub 上按照模板提交 issue。
如果有使用上的问题，请勿提交 issue（会被立刻关闭），请至知乎付费问答提问，我们会全程跟踪你的疑问。

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

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

soooul/SVGAPlayer-Android