我正在参与创作者训练营第6期，点击了解活动详情

每日引荐：根底算法不管在研讨生面试仍是求职面试都是十分重要的一环，这儿引荐一款算法面试神器：牛客网-面试神器；算法题只要多刷勤刷才干保持思路与手感，我们赶忙行动起来吧（温馨提示：常见的面试问答题库也很nice哦）

『Android基础控件』Lottie实现复杂动画效果

如果文章有帮到你的话记得点赞+保藏支撑一下哦

1.笔者前言

好久没有更新Android系列的文章了，其实是好久没学了。从今日起重操旧业，好好把这个系列学下去。

之前在做课设的时分一直有一个执念就是怎么做动画，可是苦于懒惰和时间有限，急急忙忙做了个半成品就交差了，根本顾不上去研讨怎么做动画，今日它就来了。

‎Lottie是一个适用于Android和iOS的移动库，它解析使用‎‎Bodymovin‎‎导出为json的‎‎Adobe After Effects‎‎动画，并在移动设备上以本机办法烘托它们！‎将设计好的动画导出成 JSON 格局，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额定操作

这儿咱们暂时不去研讨什么是Bodymovin和Adobe After Effects‎

我只研讨它是怎么将这些美观的动画烘托到应用中的。

『Android基础控件』Lottie实现复杂动画效果

『Android基础控件』Lottie实现复杂动画效果

2.Lottie依靠

Lottie是GitHub的一个开源结构，这是网站地址：

airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native (github.com)

在项目中经过增加依靠办法使用Lottie

dependencies {
 implementation 'com.airbnb.android:lottie:$lottieVersion'
}

最新版本是：

『Android基础控件』Lottie实现复杂动画效果

而咱们使用的各种动画资料都来源于lottiefiles.com/)这个网站。

3.核心类

  • LottieAnimationView扩展了 ImageView，是加载 Lottie 动画的默许且最简单的办法。
  • LottieDrawable具有与LottieAnimationView相同的大多数API，可以在所需的任何视图上使用它。
  • LottieComposition是动画的无状态模型表示形式。此文件可以安全地缓存，并且可以在可绘制目标/视图中自在重复使用。

4.加载动画

Lottie可以从以下位置加载动画：

  • src/main/res/raw中的 json 动画。
  • src/main/assets中的 json 文件。
  • src/main/assets中的 zip 文件。有关详细信息，请参阅图片文档。
  • 指向 json 或 zip 文件的 url。
  • json 字符串。源可以来自任何内容，包含网络仓库。
  • json 文件或 zip 文件的InputStream。

4.Json动画的增加

这儿我用到的资料：Hyemin Kim – Lottiefiles

在src/main/res/目录下创立一个raw格局的资源文件来存放json动画

『Android基础控件』Lottie实现复杂动画效果

将咱们下载的json格局的动画保存在raw文件目录下

『Android基础控件』Lottie实现复杂动画效果

5.xml布局设计

创立一个新的Activity并且将其设置为运行时第一个加载的界面

『Android基础控件』Lottie实现复杂动画效果

首要介绍LottieAnimationView的使用，demo顶用的背景和logo的资料是惯例的.png图片

『Android基础控件』Lottie实现复杂动画效果

LottieAnimationView常见的功用与特点

特点 功用
lottie_fileName 设置播放动画的 json 文件名称
lottie_rawRes 设置播放动画的 json 文件资源
lottie_autoPlay 设置动画是否自动播放(默许为false)
lottie_loop 设置动画是否循环(默许为false)
lottie_repeatMode 设置动画的重复形式(默许为restart)
lottie_repeatCount 设置动画的重复次数(默许为-1) 
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".IntroductoryActivity">
​
  <ImageView
    android:id="@+id/bgImg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:src="@drawable/bg"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0">
​
  </ImageView>
​
  <ImageView
    android:id="@+id/logImg"
    android:src="@drawable/log"
    app:layout_constraintVertical_bias=".1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_width="100dp"
    android:layout_height="100dp">
​
  </ImageView>
​
  <com.airbnb.lottie.LottieAnimationView
    android:id="@+id/hamAnimaImg"
    android:layout_width="wrap_content"
    android:layout_height="500dp"
    app:layout_constraintVertical_bias=".8"
    app:lottie_rawRes="@raw/ham"
    app:lottie_autoPlay="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
​
  </com.airbnb.lottie.LottieAnimationView>
</androidx.constraintlayout.widget.ConstraintLayout>

6.Activity文件

『Android基础控件』Lottie实现复杂动画效果

package com.hnucm.lottie_001;
​
import androidx.appcompat.app.AppCompatActivity;
​
import android.os.Bundle;
import android.widget.ImageView;
​
import com.airbnb.lottie.LottieAnimationView;
​
public class IntroductoryActivity extends AppCompatActivity {
​
  //界说三个变量别离对应xml文件中的三个控件
  ImageView logoImg;
  ImageView bgImg;
  LottieAnimationView lottieAnimationView;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_introductory);
    //经过id获取到控件
    logoImg=findViewById(R.id.logImg);
    bgImg=findViewById(R.id.bgImg);
    lottieAnimationView=findViewById(R.id.hamAnimaImg);
​
    //设置控件的平移像素，动画时长，以及延时(单位ms)
    bgImg.animate().translationY(-2200).setDuration(1000).setStartDelay(4000);
    logoImg.animate().translationY(2200).setDuration(1000).setStartDelay(4000);
    lottieAnimationView.animate().translationY(1600).setDuration(1000).setStartDelay(4000);
   }
}

7.参考资料

官方解说文档(airbnb.io)

Lottie – 轻松实现杂乱的动画作用

每日引荐：根底算法不管在研讨生面试仍是求职面试都是十分重要的一环，这儿引荐一款算法面试神器：牛客网-面试神器；算法题只要多刷勤刷才干保持思路与手感，我们赶忙行动起来吧（温馨提示：常见的面试问答题库也很nice哦）

『Android基础控件』Lottie实现复杂动画效果

如果文章有帮到你的话记得点赞+保藏支撑一下哦