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


相关文章
|
5月前
|
Android开发 开发者
Android利用SVG实现动画效果
本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具推荐,帮助开发者更好地理解和应用SVG动画技术。
241 30
|
5月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
478 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
5月前
|
API Android开发 开发者
Android颜色渐变动画效果的实现
本文介绍了在Android中实现颜色渐变动画效果的方法,重点讲解了插值器(TypeEvaluator)的使用与自定义。通过Android自带的颜色插值器ArgbEvaluator,可以轻松实现背景色的渐变动画。文章详细分析了ArgbEvaluator的核心代码,并演示了如何利用Color.colorToHSV和Color.HSVToColor方法自定义颜色插值器MyColorEvaluator。最后提供了完整的源码示例,包括ColorGradient视图类和MyColorEvaluator类,帮助开发者更好地理解和应用颜色渐变动画技术。
159 3
|
5月前
|
Android开发 开发者
Android SVG动画详细例子
本文详细讲解了在Android中利用SVG实现动画效果的方法,通过具体例子帮助开发者更好地理解和应用SVG动画。文章首先展示了动画的实现效果,接着回顾了之前的文章链接及常见问题(如属性名大小写错误)。核心内容包括:1) 使用阿里图库获取SVG图形;2) 借助工具将SVG转换为VectorDrawable;3) 为每个路径添加动画绑定属性;4) 创建动画文件并关联SVG;5) 在ImageView中引用动画文件;6) 在Activity中启动动画。文末还提供了完整的代码示例和源码下载链接,方便读者实践操作。
303 65
|
3月前
|
编解码 Java Android开发
安卓虚拟摄像头免root版,虚拟摄像头替换真实摄像头,jar代码开源分享
通过动态替换摄像头输入流的方式实现虚拟摄像头功能,代码经过简化展示核心逻辑。实际开发中还需要考虑视频编解码优化
|
5月前
|
XML Java Maven
Android线条等待动画JMWorkProgress(可添加依赖直接使用)
这是一篇关于Android线条等待动画JMWorkProgress的教程文章,作者计蒙将其代码开源至GitHub,提升可读性。文章介绍了如何通过添加依赖库使用该动画,并详细讲解了XML与Java中的配置方法,包括改变线条颜色、宽度、添加文字等自定义属性。项目已支持直接依赖集成(`implementation &#39;com.github.Yufseven:JMWorkProgress:v1.0&#39;`),开发者可以快速上手实现炫酷的等待动画效果。文末附有GitHub项目地址,欢迎访问并点赞支持!
151 26
|
5月前
|
XML Android开发 数据格式
Android中SlidingDrawer利用透明动画提示效果
本文介绍了在Android中使用`SlidingDrawer`实现带有透明动画提示效果的方法。通过XML布局配置`SlidingDrawer`的把手(handle)和内容(content),结合Activity中的代码实现动态动画效果。最终实现了交互性强、视觉效果良好的滑动抽屉功能。
Android中SlidingDrawer利用透明动画提示效果
|
5月前
|
XML Java Android开发
Android 动画之帧动画 + 补间动画 + 属性动画
本文介绍了Android开发中的三种动画类型:帧动画、补间动画和属性动画。帧动画通过依次播放一系列静态图片实现动态效果,支持Java代码与XML两种实现方式。补间动画基于起始和结束位置自动生成过渡效果,涵盖透明度、位移、旋转、缩放及组合动画等多种形式,并可搭配插值器优化动画过程。属性动画则通过改变对象属性实现动画,支持透明度、位移、旋转、缩放及组合动画,灵活性更高且适用于更复杂的场景。文中提供了详细的代码示例,帮助开发者快速上手。
298 15
|
5月前
|
XML 搜索推荐 Android开发
Android改变进度条控件progressbar的样式(根据源码修改)
本文介绍了如何基于Android源码自定义ProgressBar样式。首先分析了系统源码中ProgressBar样式的定义,发现其依赖一张旋转图片实现动画效果。接着分两步指导开发者实现自定义:1) 模仿源码创建一个旋转动画XML文件(放置在drawable文件夹),修改图片为自定义样式;2) 在UI控件中通过`indeterminateDrawable`属性应用该动画。最终实现简单且个性化的ProgressBar效果,附带效果图展示。
307 2
|
5月前
|
Android开发
Android控件样式的抽取(小提及快捷方式)
在Android开发中,若多个控件样式重复,可抽取公共部分以简化代码。例如对EditText提取样式,通过编辑`styles.xml`实现复用。为提高效率,Android Studio提供自动提取Style功能:右键点击控件样式选项,选择“Style...”,勾选需要提取的属性后确认,即可快速生成样式代码,显著提升开发便利性。
163 2

热门文章

最新文章

下一篇
oss教程