GIF、Lottie、SVGA

インターネット業界、特にライブストリーミングや動画アプリなどでは、画像のクールなアニメーションや連続したフレーム再生が欠かせません。

ネット上の図を拝借して、会社のプロジェクト図がアップロードできなくなった。ありがとうございました。 ポニー&クロック

業界アプリでは、以下のような解決策が考えられます。

• 解決策1：フレームアニメーションOpenGLの読み込み。

• シナリオII：アトリビュート・アニメーション。

• オプション3：GifまたはWebP。

• 選択肢4：SVGAまたはLottie（どちらも原理的には同じですが、SVGAの方が効率的です。）

上記と比較：オプション1、2、3：画像サイズの問題で <スパン 再生リソースの使用量が多い（当時のテスト機、メモリ使用量約30MB/CPU使用量約50％）、GIF効果が悪い（8ビットカラーのみ対応）、オプション4は、前の3つのオプションの問題を解決しています。

<スパン SVGA vs ロッテ（お手並み拝見：感謝：) <スパン ポニー＆クロック )

<スパン

• CreateJS/Lottieの実装原理は、デザインソフトのタイムラインを、各種キーフレーム、ベクターパス、スタイルなどを含めて丸ごと書き出すことです。中でも重要なのが、"keyframe"です! キーフレームによるアニメーション記述を行うため、対応するPlayerがどうしても複雑になってしまうのです。単純な一次方程式、例えばA点からB点まで一定の速度で移動するのであればいいのですが、二次一次方程式やベッセル曲線方程式など高次の補間計算になると、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ファイルをプレーヤーに放り込めば完了です。

• SVGAの機能は、ライブアプリケーションのシナリオにより関連しており、SVGAは他のライブラリでは提供できないダイナミックテキストとダイナミックイメージの機能を提供します。

アンドロイド

パフォーマンスは常に我々の最大の関心事であり、SVGAもパフォーマンスを考慮して設計されています（ここではAndroidの実装のみ説明します）。AndroidのオリジナルのSVGA Playerは、SurfaceView（TextureView）を継承して実装されていますが、ハードウェアアクセラレーションを備えたSurfaceViewはUIレベル（上部か下部か）しか独立できないため、ハードウェアアクセラレーションを備えたレンダリングを有効にしない場合はどうするか？という印象になります。また、SurfaceViewを使ってBitmapを描画すると、メモリの再利用、Activityのライフサイクル、UIレベルでの様々な余計な問題が発生します。

これにより、SVGAをUI階層に任意に埋め込むことも可能になり、従来あった問題の多くを解決することができました。

もちろん、UEDはまだSVGA Playerの開発を続けていますので、ウェブサイトやGithubで最新情報をチェックしてください...。

<スパン また、SVGA1ファイル、IOS、Android、WEBが使用可能です。

<スパン <スパン SVGAでは、放送用のアニメーションリソースを遠隔地から簡単にダウンロードすることができ、高い設定自由度を誇ります。

<スパン ロッテ：参照：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(); pause the animation
    }

}

<スパン

<スパン

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(); pause the animation
    }

}

SVGAのデモコードです。  https://github.com/gutaowqq20081010/svgaDemo/tree/master

とりあえず、録音してみよう。

<スパン ありがとうございました。 ポニー&クロック

参考

<スパン http://svga.io/ 

<スパン https://github.com/yyued/SVGAPlayer-Android

<スパン <スパン https://github.com/airbnb/lottie-android