GIF、Lottie、SVGA

在互联网行业,特别是直播和视频类app中,酷炫的动画或者是图片的序列帧播放是必不可少的。

借鉴一下网上的图,公司项目图不能上传。感谢:Pony&Clock


在业内的app中有可能解决方案,如下:

  • 方案一:帧动画OpenGL加载;

  • 方案二:属性动画;

  • 方案三:Gif或WebP;

  • 方案四:SVGA或者Lottie(两种原理相近但是SVGA效率更好)

对比以上:方案一、二、三:图片大小问题,播放资源占用高(当时测试的机子,内存占用约30MB/CPU占用约50%),gif效果差(只支持8位颜色)而方案四,解决了前面三个方案的问题。

SVGA 与Lottie对比(借鉴一下:感谢:Pony&Clock

  • 从CreateJS/Lottie实现的原理来看,都是将设计软件中的时间轴完整地导出来,包括里面的各种关键帧信息、矢量路径、样式等等。其中,最为关键的是『关键帧』!由于使用的是关键帧动画描述,那么对应的Player就难免变得复杂起来。如果只是简单的一次线性方程,比如,物体从A点匀速移动至B点,还OK。但是,当遇到二次线性方程、贝塞尔曲线方程这些高阶插值计算的时候,Player就会很吃力。(矢量动画就是通过一些公式能表达的矢量线条和色块,以此来表示每一帧动画)

  • CreateJS可以导出Flash动画,Lottie可以导出After Effects动画,但是它们都不能导出对方的动画(每种设计工具的脚本都是不一致的),这也意味着,你家的设计师只能使用其中一种设计工具。

  • Lottie在导出位图动画方面不够友好,从UI设计师和开发人员使用角度来看都比较麻烦,开发人员需要先将做好的效果打包成ZIP,再解压到本地目录,才能播放。

  • SVGA使用另外一套逻辑,它不关心关键帧,因为SVGA里面的每一帧都是关键帧!也就是说,SVGA已经在导出动画的时候,把每一帧的信息都计算好了,如此一来,Player也就不用关心插值计算的过程。正因为如此,SVGA可以同时支持Flash和After Effects的导出,只需要在各自转换器中计算差值就好了。

  • SVGA在设计之初就支持位图元素,在1.x格式时使用ZIP进行打包,在2.x格式中,直接使用ProtoBuf+Zlib方式打包,作为开发者,完全不用关心应该怎样下载、解压、获取位图文件,直接把svga文件扔进去Player就可以了。

  • 功能上,SVGA更贴合直播应用场景,SVGA所提供的动态文本、动态图像功能都是其它库所不能提供的。

Android

我们最关心的永远是性能问题,SVGA在设计之初就考虑到性能问题(这里只讨论Android端的实现)。Android端最初的SVGA Player是通过继承SurfaceView(TextureView)实现的的,但是SurfaceView在硬件加速的情况下只能独立于UI层级(在最顶或者最底),如果不开启硬件加速渲染呢?效果会变得非常感人。并且在使用SurfaceView绘制Bitmap时,还伴随着各种问题,包括内存回收、Activity生命周期以及UI层级各种牵扯不清的问题。

后期通过继承重写ImageView来实现Android端的SVGA Player,使用Canvas绘制Drawable的方式来绘制动画,这样也使得SVGA可以任意地嵌入到UI层级中,同时也解决之前诸多的存在问题。

当然,关于SVGA Player,UED还在不断的继续优化,大家可以持续关注官网和Github的更新…

而且SVGA 一个文件,IOS,Android、WEB都可以使用。

SVGA可以很轻松的从远程下载动画资源进行播发,可配置性很高;

Lottie:可以参考:https://github.com/airbnb/lottie-android

SVGA:可以参考:http://svga.io/ 及https://github.com/yyued/SVGAPlayer-Android

具体的代码,等我请UED的同学给我设计一个SVGA文件后给出。

svga:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gutao.svgademo.MainActivity">

    <com.opensource.svgaplayer.SVGAImageView
        android:id="@+id/svgaImageView"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="#FFFFFF" />
</android.support.constraint.ConstraintLayout>


public class MainActivity extends AppCompatActivity {

    private final String TAG = MainActivity.class.getSimpleName();
    private SVGAImageView svgaImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        svgaImageView = findViewById(R.id.svgaImageView);
        svgaImageView.setCallback(new SVGACallback() {
            @Override
            public void onPause() {
                Log.d(TAG, "onPause");
            }

            @Override
            public void onFinished() {
                Log.d(TAG, "onFinished");

            }

            @Override
            public void onRepeat() {
                Log.d(TAG, "onRepeat");
            }

            @Override
            public void onStep(int i, double v) {
                Log.d(TAG, "onStep: i=" + i + " v=" + v);
            }
        });
        svgaImageView.setLoops(1);
        SVGAParser parser = new SVGAParser(this);
        parser.parse("lock_air.svga", new SVGAParser.ParseCompletion() {
            @Override
            public void onComplete(@NotNull SVGAVideoEntity videoItem) {
                SVGADrawable drawable = new SVGADrawable(videoItem);
                svgaImageView.setImageDrawable(drawable);
                svgaImageView.startAnimation();

            }

            @Override
            public void onError() {
                Log.i(TAG, "error");
            }
        });
//        svgaImageView.pauseAnimation();暂停动画
    }

}

SVGA demo 代码: https://github.com/gutaowqq20081010/svgaDemo/tree/master

目前先记录一下。

感谢:Pony&Clock

参考资料:

http://svga.io/ 

https://github.com/yyued/SVGAPlayer-Android

https://github.com/airbnb/lottie-android




没有更多推荐了,返回首页