Outline of the article

One 、Lottie Introduce
Two 、Lottie actual combat
3、 ... and 、 Project source download
Four 、 Reference article

 

One 、Lottie Introduce

1. What is? Lottie

  Lottie yes Android and iOS Mobile library , For parsing Adobe After Effects Animation and Bodymovin Export together as json And present them on mobile devices ! In fact, on the mobile end, it is through a json The file displays the corresponding animation , In fact, this is a good solution to the dynamic change of animation ability , Just dynamically load the corresponding josn Files can change the animation .(josn Provided by artists )

2. Lottie advantage

(1) Ability to parse rendering through AE Upper Bodymovin The plug-in will AE The animation produced in json file
(2) Data source diversity — Can be obtained from assets,sdcard, Network loads animation resources , Dynamic update
(3) Cross platform — Export an animation description file ,android,ios,react native Universal (android The use of api Not lower than 16)

3. Lottie Animation flow chart

 

4. Lottie Example

 

Two 、Lottie actual combat

1. common API Introduce

(1) Determine if the animation is running
  isAnimating()
(2) Set the progress value of the animation (float value )
  setProgress();
(3) Monitor animation progress
  addAnimatorUpdateListener
(4) Start the animation
  playAnimation()
(5) Dynamic setting json file
  setComposition

2. Code implementation

(1) In the project build.gradle File add dependency

dependencies {
implementation 'com.android.support:appcompat-v7:24+' //lottie rely on
implementation 'com.airbnb.android:lottie:1.0.1' // Network request dependent
implementation 'com.squareup.okhttp3:okhttp:3.5.0'
}

(2) relevant json file

 

(3)xml load Lottie Animation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:orientation="vertical"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"> <!-- such , Animation can run , Explain the attributes :
1.lottie_fileName: stay app/src/main/assets Animation in the directory json file name .
2.lottie_loop: Is the animation looped , No looping by default .
3.lottie_autoPlay: Whether the animation plays automatically , By default, it doesn't play automatically .
4.alottie_imageAssetsFolder: Animation depends on the picture catalog , stay pp/src/main/assets/ A subdirectory under a directory , This subdirectory holds all the pictures .-->
<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"/> </LinearLayout>

Other common api:
(1)lottie_repeatCount Repeat the number
(2)lottie_repeatMode Set the animation repeat mode RESTART: repeat 、REVERSE: reverse
(3)lottie_colorFilter Set the coloring color of the animation , This is to turn your animation into a color

Activity The code is as follows

/**
* Simple animation
*/
public class SimpleActivity extends AppCompatActivity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // activity_simple.xml in lottie_fileName="data.json"
// So all you need to do is app/src/main/assets Add AE Generated json file , Rename it to data.json You can display the animation
setContentView(R.layout.activity_simple);
}
}

(4)Activity Load in Lottie
xml The documents are as follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:orientation="horizontal"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"> <com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view_click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/> <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"> <TextView
android:id="@+id/tv_seek"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="@android:color/white"
android:textSize="16sp" /> <Button
android:id="@+id/button1"
android:layout_width="100dip"
android:layout_height="40dip"
android:background="@color/colorPrimary"
android:text=" Start the animation " /> <Button
android:id="@+id/button2"
android:layout_width="100dip"
android:layout_height="40dip"
android:layout_marginLeft="10dip"
android:background="@color/colorPrimary"
android:text=" End animation " /> </LinearLayout>
</LinearLayout>

Activity The code is as follows

package com.zkk.lottietest;

import android.animation.ValueAnimator;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView; import com.airbnb.lottie.LottieAnimationView;
import com.airbnb.lottie.model.LottieComposition; public class ClickActivity extends AppCompatActivity { private Button button1,button2;
private TextView tv_seek;
LottieAnimationView animation_view_click;
@SuppressLint("RestrictedApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_click); animation_view_click=(LottieAnimationView)findViewById(R.id.animation_view_click); tv_seek=(TextView)findViewById(R.id.tv_seek); button1=(Button)findViewById(R.id.button1); button2=(Button)findViewById(R.id.button2); button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) { startAnima();
}
});
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) { stopAnima();
}
}); // Code settings Lottie
LottieComposition.fromAssetFileName(this, "LottieLogo1.json", new LottieComposition.OnCompositionLoadedListener() { @Override
public void onCompositionLoaded(LottieComposition composition) { animation_view_click.setComposition(composition); animation_view_click.setProgress(0.333f);//progress Range 0~1f, Set animation progress animation_view_click.playAnimation();// Play animation
}
}); // Animation state monitoring callback
animation_view_click.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
tv_seek.setText(" Animation progress " +(int) (animation.getAnimatedFraction()*100) +"%");
}
});
} /*
* Start the animation
*/
private void startAnima(){ // Determine if the animation is running
boolean inPlaying = animation_view_click.isAnimating(); if (!inPlaying) { animation_view_click.setProgress(0f);// Set the progress value at the beginning animation_view_click.playAnimation();
}
}
/*
* Stop Animation
*/
private void stopAnima(){ // Determine if the animation is running
boolean inPlaying = animation_view_click.isAnimating(); if (inPlaying) { animation_view_click.cancelAnimation();
}
} @Override
protected void onStop() { super.onStop(); animation_view_click.cancelAnimation();
} }

(5) Network loading animation
xml The documents are as follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:orientation="vertical"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"> <com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view_network"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/> </LinearLayout>

Activity The code is as follows

package com.zkk.lottietest;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity; import com.airbnb.lottie.LottieAnimationView;
import com.airbnb.lottie.model.LottieComposition; import org.json.JSONException;
import org.json.JSONObject; import java.io.IOException; import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response; /**
* Network request animation
*/
public class NetworkActivity extends AppCompatActivity { LottieAnimationView animation_view_network;//Lottie Components private OkHttpClient client;//Okhttp client @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_network); // obtain Lottie Components
animation_view_network=(LottieAnimationView)findViewById(R.id.animation_view_network); // Load online Lottie Of json
loadUrl("http://cdn.trojx.me/blog_raw/lottie_data_edit.json");
} private void loadUrl(String url) { Request request; try { request = new Request.Builder()
.url(url)
.build(); } catch (IllegalArgumentException e) { return;
} if (client == null) { client = new OkHttpClient();
}
client.newCall(request).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { } @SuppressLint("RestrictedApi")
@Override public void onResponse(Call call, Response response) throws IOException { if (!response.isSuccessful()) {
} try { // Get the returned json Content
JSONObject json = new JSONObject(response.body().string()); // Animate
LottieComposition
.fromJson(getResources(), json, new LottieComposition.OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
setComposition(composition);
}
});
} catch (JSONException e) {
}
}
});
} private void setComposition(LottieComposition composition){ animation_view_network.setProgress(0);// Set current progress animation_view_network.loop(true);// Is the animation looped animation_view_network.setComposition(composition); animation_view_network.playAnimation();// Start the animation } @Override
protected void onStop() { super.onStop(); animation_view_network.cancelAnimation();// Cancel animation
}
}

3、 ... and 、 Project source download

link :https://pan.baidu.com/s/1fflg3Gmws-hh_3nj1N7fwg
password :1etb

Four 、 Reference article

  1. https://blog.csdn.net/qq_15538877/article/details/80503773
  2. https://www.jianshu.com/p/282d098cf928?utm_source=oschina-app

Android And Lottie More related articles about animation

  1. Android In the animation detailed explanation series 【4】——Activity Switch between animations

    Previously, I introduced Android Frame by frame animation and interlace animation in , And realized a simple custom animation , In this article, let's look at how Android In the animation application to the actual development of a scene --Activity Jump between animations . One . Define animation resources Such as ...

  2. Android Three kinds of animation detailed explanation

    [ Craftsmen are like water http://blog.csdn.net/yanbober Reprint please indicate the source . I'm going to start Android Technical communication ] 1 background We can't just analyze the source code , At the same time, we should sort out and summarize the basic knowledge , It happened that someone sent a private message to ...

  3. android And tween Animation details

    android There are two kinds of animations available in , One is tween Animation ,tween Animation through to view A series of image transformations are carried out on the content of ( Including translation , The zoom , rotate , Change transparency ) To achieve animation , Animation effects can be defined using xml, Can also be ...

  4. android And frame Animation details

    Last time we said android Medium tween Animation , In this article, let's talk about frame Animation ,frame Animation is mainly to achieve a similar gif The effect of animation , It means that multiple pictures are displayed successively according to the preset time . Create a new one android term ...

  5. Android Detailed explanation of animation development

    One . Animation type Android Of animation It's made up of four types :alpha.scale.translate.rotate XML In profile alpha Gradient transparency animation effect scale Zoom in and out animation ...

  6. Android In the animation detailed explanation series 【3】—— Custom animation research

    In the last article we used displacement animation TranslateAnimation, Let's take a look TranslateAnimation How to achieve Animation Abstract methods in : /* * Copyright (C ...

  7. Android In the animation detailed explanation series 【2】—— Flying butterflies

    This article uses frame by frame animation and interpolation animation to achieve a small example , First let's take a look Android Make up animation in . Android Use in Animation Represents an abstract animation class , This class includes the following subclasses : AlphaAnimation ...

  8. Android In the animation detailed explanation series 【1】—— Frame by frame animation

    Frame by frame animation is actually very simple , Let's take an example : <?xml version="1.0" encoding="utf-8"?> <animation ...

  9. [ turn ]ANDROID L——Material Design Detailed explanation ( Animation )

    Please note that this article is from dabomi's blog (http://blog.csdn.net/a396901990), Thank you for your support ! from :http://blog.csdn.net/a396901990/article/de ...

Random recommendation

  1. div Custom dropdown box

    Because the native drop-down box cannot modify its properties , It's hard to beautify the drop-down box . So use it yourself div Simply customize the drop-down box , If you want to beautify it, modify it directly css that will do <!DOCTYPE html> <html lang=" ...

  2. BFS Patrol robots

    Patrol robots Topic link :http://acm.hust.edu.cn/vjudge/contest/view.action?cid=83498#problem/F The main idea of the topic : The robot patrols in a rectangular area , ...

  3. [git] ignore File rule invalid

    background In a project , It has been discovered that .iml The rules are written in .ignore file , But yes. .iml The changes will still appear in changelist in . Solution First reference git Description on the official website gitignore - Specifies ...

  4. $(document).ready(function (){}) , $(function(){}) , $().ready(function(){}) , jquery(function(){}) , (function($){})(jquery) What's the difference?

    $(document).ready(function(){...}) , $().ready(function(){...}) ,  $(function(){...}) , jquery(funct ...

  5. Nagios Installation and wechat SMS reminder

    introduction Nagios As a very powerful open source monitoring system in the industry . Monitoring network services (SMTP.POP3.HTTP.NNTP.PING etc. ): Monitor host resources ( Processor load . Disk utilization, etc ): Simple plug-in design allows users to ...

  6. 09_linux Lower installation Nvidia Driver.

    Download driver Go to the official website , ha-ha o(^▽^)o install kernel source [root@localhost ~]# yum install kernel-devel If not , Try the following [root@ ...

  7. uboot1.1.6 And NOR FLASH Solutions to problems that arise

    U-BOOT transplant ,structure has no member named `CAMDIVN speed.c: In function `get_HCLK':speed.c:114: error: ...

  8. lvs Learning notes

    I am a net worker , I've been studying at work recently linux Knowledge about . A short time ago, I learned through self-examination materials lvs Related content of , The excerpt is sorted out and shared with you , The content is more , It's trivial , See forgiveness !!! LVS from Linux Kernel version 2.6 rise , ...

  9. koa Write simple services

    For two days koa It's a little bit of service , It's inside and express There are some differences 1. Static services :  koa in , There is middleware , koa-static, const static_f = require('koa-sta ...

  10. Eclipse Software Java solve : The emergence of editor does not contain a main type Error box problem

    Eclipse Software solve : The emergence of  editor does not contain a main type  Error box problem When you run Java File is , If you pop up the following   Error box : The cause of the error :  Current ...