文章大纲
一、Lottie介绍 二、Lottie实战 三、项目源码下载 四、参考文章
一、Lottie介绍
1. 什么是Lottie
Lottie是Android和iOS的移动库,用于解析Adobe After Effects动画与Bodymovin一起导出为json 并在移动设备上呈现它们!其实在移动端就是通过一个json文件显示相应的动画,其实这样很好的解决了动态改变动画的能力,只需要动态加载相应的josn文件就能实现动画的改变。(josn由美工提供)
2. Lottie优点
(1)能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成的 json 文件 (2)数据源多样性—可从assets,sdcard,网络加载动画资源,动态更新 (3)跨平台—设计稿导出一份动画描述文件,android,ios,react native通用(android使用的api不能低于16)
3. Lottie动画制作流程图
4. Lottie例子
二、Lottie实战
1. 常见的API介绍
(1)判断是否动画正在运行中 isAnimating() (2)设置动画的进度值(float值) setProgress(); (3)监听动画进度 addAnimatorUpdateListener (4)开始动画 playAnimation() (5)动态设置json文件 setComposition
2. 代码实操
(1)在项目的 build.gradle 文件添加依赖
dependencies {
implementation 'com.android.support:appcompat-v7:24+'
(2)相关json文件
(3)xml加载Lottie动画
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas./apk/res/android"
xmlns:tools="http://schemas./tools"
xmlns:app="http://schemas./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">
其他常见api: (1)lottie_repeatCount 重复次数 (2)lottie_repeatMode 设置动画的重复模式RESTART:重复、REVERSE:反向 (3)lottie_colorFilter 设置动画的着色颜色,这个就是把你的动画变成了一个颜色的了
Activity代码如下所示
(4)Activity中加载Lottie xml文件如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas./apk/res/android"
xmlns:tools="http://schemas./tools"
xmlns:app="http://schemas./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="开始动画" />
<Button
android:id="@+id/button2"
android:layout_width="100dip"
android:layout_height="40dip"
android:layout_marginLeft="10dip"
android:background="@color/colorPrimary"
android:text="结束动画" />
</LinearLayout>
</LinearLayout>
Activity代码如下
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();
}
});
(5)网络加载动画 xml文件如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas./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代码如下
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;
|