直播礼物素材分享 请勿商业用途 SVGA

时间:2024-04-04 11:16:47

SVGA

官方链接

SVGAConverter 可以将 Flash 以及 After Effects 动画导出成 .SVGA 文件(实际上是 ZIP 包),供 SVGAPlayer 在各平台播放,SVGAPlayer 支持在 iOS / Android / Web / ReactNative / LayaBox 等平台、游戏引擎播放。

SVGA 做的事情,实际上,非常简单,Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素(位图、矢量),并将其在时间轴中的每帧表现(位移、缩放、旋转、透明度)导出。 Player 会负责将这些信息还原至画布上。

因此,你会发现,SVGA 既有序列帧的特点,又有元素动画的特点。Player 逻辑极度简单,她只负责粗暴地将每一个元素,丝毫不差地渲染到屏幕上,而无须任何插值计算。(我们认为,任何插件计算的逻辑都是复杂的)

也因此,你会发现,SVGA 不同于 Lottie,Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现,而 SVGA 则将这些逻辑免去。也因此,SVGA 可以同时支持 Flash,我们相信 Flash 以及其继承者 Animate CC 仍然有强大的生命力,以及完善的设计生态。

SVGA 最初的目标是为降低序列帧动画开销而生的,因此,性能问题一直是 SVGA 关注的焦点。如果你可以深入地探究 SVGA 的实现方式,你会发现,SVGA 实质上做了一件非常重要的事情。她会在动画播放前,一次性地上传所有纹理到 GPU,接着,在播放的过程中,这些纹理会被重复使用。CPU 与 GPU 交换的次数大大减少,同时,纹理的数目也在可控范围。内存、CPU、GPU 占用能达到最优状态。

 

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控件,在代码中播放动画文件

<?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: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。
 

直播礼物素材分享 请勿商业用途 SVGA