Android 直播礼物动画实现之SVGA动画

在最近做的直播项目中,产品要求发送礼物时,需要显示对应的礼物动画,其中几个礼物动画效果如下:

Android 直播礼物动画实现之SVGA动画_第1张图片

看了这几个动画效果,是挺炫酷的,妥妥的能够增加用户体验,但是实现起来可就没那么容易了。

Android中动画实现方案,主要有以下几种:

(1)Frame Animation(逐帧动画)

(2)Tween Animation (补间动画)

(3)Property Animation(属性动画)

(4)GIF/WebP动画图片

逐帧动画需要UI设计师将每个动画拆成一张张的图片,那么每一个礼物动画都需要一套帧动画图片,这样无疑会增加
安装包的体积。

补间动画或者属性动画开发实现难度较大

GIF动画,就是每一个动画就是一张GIF图片,但是GIF动画图片较大,一般的GIF图片都要几兆到几十兆,这样在移动设备
上去播放这个动画,性能体验上就比较差了。

WebP动画图片体积要比GIF动画图片小很多复杂,WebP动图在编解码时,性能上表现得差强人意,而且虽然Android在
4.0时开始支持WebP,但是要支持有损且带透明像素的WebP得到Android 4.2.1之后。

除了以上几种动画实现方案,还有一些动画框架可供我们去使用,这些动画框架使用起来普遍比较方便,
UI设计师按照约定的动画语法作图给开发人员即可,开发人员使用框架中指定的方式去播放动画即可。
现在主流的动画播放框架主要有Lottie,SVGA。
Lottie,SVGA这两个动画框架都同时支持Android,iOS。

因为我选择的是SVGA动画框架,下面主要讲一下SVGA动画框架。
SVGA动画框架是YY开源的一个动画框架,SVGA是一种全新的动画格式,同时兼容Android,iOS,Web多个平台。
SVGA提供了一整套的动画解决方案:

设计师:设计师可以通过插件快速的导出SVGA动画文件。
具体可参考:http://svga.io/designer.html

开发者:开发者可以简单的接入动画
Android/iOS/Web可以参考如下接入
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web

设计师生成了SVGA动画文件后,为了获知动画文件是否正常,动画效果怎么样,可以通过动画预览器
来预览动画文件。
http://svga.io/svga-preview.html

Android中使用
下面简单介绍一下Android中集成SVGA,实现礼物动画。

(1)首先拿到UI设计师做好的SVGA动画文件,放到项目的asstes文件夹中

(2)添加SVGA依赖,参考https://github.com/yyued/SVGAPlayer-Android中
SVGA依赖的添加

    allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

compile 'com.github.yyued:SVGAPlayer-Android:2.1.8'

(3)在布局文件中添加SVGAImageView控件,在代码中播放动画文件


<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:autoPlay="true"
        android:background="#000" />

RelativeLayout>
    /**
     * 播放礼物动画
     */
    private void playGiftAnimation() {
        mSVGAParse.parse(animationFileName, new SVGAParser.ParseCompletion() {
            @Override
            public void onComplete(SVGAVideoEntity mSVGAVideoEntity) {
                mGiftAnimSIV.setVisibility(View.VISIBLE);
                SVGADrawable drawable = new SVGADrawable(mSVGAVideoEntity);
                mGiftAnimSIV.setImageDrawable(drawable);
                mGiftAnimSIV.startAnimation();
            }

            @Override
            public void onError() {
                ToastUtil.showShort(mActivity, getString(R.string.prompt_gift_parse_fail));
            }
        });
    }

其中animationFileName就是放到assets中的SVGA动画文件名

 /**
  * 礼物动画播放监听
  */
 mGiftAnimSIV.setCallback(new SVGACallback() {
            @Override
            public void onPause() {

            }

            @Override
            public void onFinished() {
                mGiftAnimSIV.setVisibility(View.GONE);
            }

            @Override
            public void onRepeat() {

            }

            @Override
            public void onStep(int frame, double percentage) {

            }
        });

以上就是SVGA在Android中的简单实用。具体的实用请参考官方的文档和Demo。

你可能感兴趣的:(Android开发)