『Android开源控件』通过Lottie实现复杂动画效果

简介: 好久没有更新Android系列的文章了,其实是好久没学了。从今天起重操旧业,好好把这个系列学下去。之前在做课设的时候一直有一个执念就是怎么做动画,但是苦于懒惰和时间有限,急急忙忙做了个半成品就交差了,根本顾不上去研究怎么做动画,今天它就来了。‎Lottie是一个适用于Android和iOS的移动库,它解析使用‎‎Bodymovin‎‎导出为json的‎‎Adobe After Effects‎‎动画,并在移动设备上以本机方式渲染它们!‎将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作

1.笔者前言

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

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

‎Lottie是一个适用于Android和iOS的移动库,它解析使用‎‎Bodymovin‎‎导出为json的‎‎Adobe After Effects‎‎动画,并在移动设备上以本机方式渲染它们!‎将设计好的动画导出成 JSON 格式,就可以直接运用在 iOSAndroidWebReact Native之上,无需其他额外操作

这里我们暂且不去研究什么是BodymovinAdobe After Effects‎

我只研究它是怎么将这些好看的动画渲染到应用中的。

网络异常,图片无法展示
|

网络异常,图片无法展示
|

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'

}

最新版本是:

网络异常,图片无法展示
|

而我们使用的各种动画素材都来源于https://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动画

网络异常,图片无法展示
|

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

网络异常,图片无法展示
|

5.xml布局设计

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

网络异常,图片无法展示
|

主要介绍LottieAnimationView的使用,demo中用的背景和logo的素材是常规的.png图片

网络异常,图片无法展示
|

LottieAnimationView常见的功能与属性

属性 功能
lottie_fileName 设置播放动画的 json 文件名称
lottie_rawRes 设置播放动画的 json 文件资源
lottie_autoPlay 设置动画是否自动播放(默认为false)
lottie_loop 设置动画是否循环(默认为false)
lottie_repeatMode 设置动画的重复模式(默认为restart)
lottie_repeatCount 设置动画的重复次数(默认为-1)

<?xmlversion="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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文件

网络异常,图片无法展示
|

packagecom.hnucm.lottie_001;

 

importandroidx.appcompat.app.AppCompatActivity;

 

importandroid.os.Bundle;

importandroid.widget.ImageView;

 

importcom.airbnb.lottie.LottieAnimationView;

 

publicclassIntroductoryActivityextendsAppCompatActivity {

 

   //定义三个变量分别对应xml文件中的三个控件

   ImageViewlogoImg;

   ImageViewbgImg;

   LottieAnimationViewlottieAnimationView;

   @Override

   protectedvoidonCreate(BundlesavedInstanceState) {

       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 - 轻松实现复杂的动画效果


相关文章
|
3月前
|
存储 Shell Android开发
基于Android P,自定义Android开机动画的方法
本文详细介绍了基于Android P系统自定义开机动画的步骤,包括动画文件结构、脚本编写、ZIP打包方法以及如何将自定义动画集成到AOSP源码中。
76 2
基于Android P,自定义Android开机动画的方法
|
21天前
|
Android开发 UED
Android 中加载 Gif 动画
【10月更文挑战第20天】加载 Gif 动画是 Android 开发中的一项重要技能。通过使用第三方库或自定义实现,可以方便地在应用中展示生动的 Gif 动画。在实际应用中,需要根据具体情况进行合理选择和优化,以确保用户体验和性能的平衡。可以通过不断的实践和探索,进一步掌握在 Android 中加载 Gif 动画的技巧和方法,为开发高质量的 Android 应用提供支持。
|
1月前
|
XML 存储 Java
浅谈Android的TextView控件
浅谈Android的TextView控件
30 0
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
44 3
|
3月前
|
监控 Java API
Android经典实战之OkDownload:一个经典强大的文件下载开源库,支持断点续传
本文介绍的 OkDownload 是一个专为 Android 设计的开源下载框架,支持多线程下载、断点续传和任务队列管理等功能,具备可靠性、灵活性和高性能特点。它提供了多种配置选项和监听器,便于开发者集成和扩展。尽管已多年未更新,但依然适用于大多数文件下载需求。
350 1
|
4月前
|
XML Android开发 数据格式
Android 中如何设置activity的启动动画,让它像dialog一样从底部往上出来
在 Android 中实现 Activity 的对话框式过渡动画:从底部滑入与从顶部滑出。需定义两个 XML 动画文件 `activity_slide_in.xml` 和 `activity_slide_out.xml`,分别控制 Activity 的进入与退出动画。使用 `overridePendingTransition` 方法在启动 (`startActivity`) 或结束 (`finish`) Activity 时应用这些动画。为了使前 Activity 保持静止,可定义 `no_animation.xml` 并在启动新 Activity 时仅设置新 Activity 的进入动画。
98 12
|
3月前
|
前端开发 Android开发 开发者
安卓开发中的自定义视图:构建你的第一个控件
【8月更文挑战第26天】在安卓开发的浩瀚海洋中,自定义视图是一块充满魔力的乐土。它不仅是开发者展示创造力的舞台,更是实现独特用户体验的关键。本文将带你步入自定义视图的世界,从基础概念到实战应用,一步步教你如何打造自己的第一个控件。无论你是初学者还是有经验的开发者,这篇文章都将为你的开发之旅增添新的风景。
|
4月前
|
XML Android开发 UED
Android动画之共享元素动画简单实践
本文介绍Android共享元素动画, 实现两Activity间平滑过渡特定UI元素。通过设置`transitionName`属性和使用`ActivityOptions.makeSceneTransitionAnimation`启动目标Activity实现动画效果。可自定义过渡动画提升体验。
63 0
|
5月前
|
Android开发 UED
Android Item平移动画
【6月更文挑战第18天】
107 8