ロッティ

多くのサードパーティのオープンソースライブラリ



Lottie Third Party Open Source Libraries



最新バージョンは3.2.2です。
GitHub： https://github.com/airbnb/lottie-android
公式文書： http://airbnb.io/lottie/

構成

  1. app /build.gradleに以下を追加します。
implementation 'com.airbnb.android:lottie:3.2.2'

使用する

  1. main / assetsの下にアニメーションリソースdata.jsonを追加します。
    2.png



  2. LottieAnimationViewコントロールをレイアウトファイルに追加します

<com.airbnb.lottie.LottieAnimationView android:id='@+id/animation_view' android:layout_width='wrap_content' android:layout_height='wrap_content' app:lottie_fileName='data.json' app:lottie_loop='true' app:lottie_autoPlay='true'/>
  1. エフェクト画像
    4cee4d0e971b970a7f0ab8dd7115228e.gif

アニメーションリソース

さまざまな理由で、デザイナーがアプリのアニメーションエフェクトをカスタマイズする方法がない場合は、オンラインで公開されているLottieアニメーションエフェクトを見つけることもできます。 LottieFilesの推奨サイトは次のとおりです。
LottieFiles： https://www.lottiefiles.com/



高度な

  1. ローカルjsonアニメーションの使用。
mLottieAnimationView= (LottieAnimationView) findViewById(R.id.animation_view) //Instantiate //Set whether to play in a loop: true to loop false to play once mLottieAnimationView.loop(true) // //time out // mLottieAnimationView.pauseAnimation() // //Start playing // mLottieAnimationView.playAnimation() mLottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { //The animation starts to monitor } @Override public void onAnimationEnd(Animator animation) { //The animation ends } @Override public void onAnimationCancel(Animator animation) { //Animation cancel } @Override public void onAnimationRepeat(Animator animation) { // Animation repeat } })
  1. ネットワークjsonアニメーションの使用。
private RelativeLayout mLayout private LottieAnimationView mLottieAnimationView @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_network) mLayout = (RelativeLayout) findViewById(R.id.layout_content) initView() } private void initView() { mLottieAnimationView = new LottieAnimationView(NetworkActivity.this) String response = 'The json you got from the Internet' try { JSONObject jsonObject = new JSONObject(response) LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition lottieComposition) { setComposition(lottieComposition) } }) } catch (JSONException e) { e.printStackTrace() } mLayout.addView(mLottieAnimationView) } private void setComposition(LottieComposition lottieComposition) { mLottieAnimationView.setProgress(0) mLottieAnimationView.loop(true) mLottieAnimationView.setComposition(lottieComposition) mLottieAnimationView.playAnimation() }

ツール

統合プロセス
UIはAEを使用→bodymovinプラグインをインストール→AEのアニメーションプロジェクトファイルをbodymovinを介して.jsonファイルに変換→開発に送信-開発統合Lottieフレームワーク-プロジェクトで直接使用
非常に簡潔なので、フレームごとのpngファイルや.gifファイルはまったく必要ありません。これにより、gifの読み込み速度が速くなるだけでなく、アプリの内部スペースも節約されます。
AEインストールプラグインチュートリアル（ここのインストールチュートリアルはUIを見るのに適しています）
マック
ここに移動してください： https://www.jianshu.com/p/94f7a0102be5

ウィンドウズ
ここに移動してください： https://www.jianshu.com/p/cae606f45c0b