安卓动画学习之MotionEditor实践与Lottie动画库｜青训营笔记

萌新杰少
276 阅读7分钟

安卓动画学习之MotionEditor实践与LottieFiles动画库｜青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第21天

前言

这一节课是和UI打交道的，老师为我们介绍了一些常规和高级的UI组件，因为日常使用中他们会经常被使用，这里我们就不再阐述这些。但是课程中动画却引起了我的注意，我不知道大家在开发中有没有这种感觉，对于我自己而言，做APP后交互会变得相当生硬，让人感觉不太舒服。为此我就会去想办法加一些简单的动画，让交互变得更加丰富和生动。

那么我就想去试一试这些动画，但是这些动画方案实现起来的代码量也不少，如果需要一个复杂又好看的动画，这背后的工作更是不可言喻。因此，我就发现了这款东西——MotionEditor。

MotionEditor

是什么？

emmm，按照网上的说法，Motion Editor 是一款专门针对 MotionLayout 布局类型所构建的可视化编辑器，通过它可以轻松地创建和预览动画效果。自 Android Studio 4.0 版本开始，我们发布了稳定版本的 Motion Editor，许多开发者已经在使用它创建动画效果。

既然是能实现动画效果，那自然要试试看呢。

既然是MotionLayout的可视化编辑器，那么我们就需要看看MotionLayout是何方神圣。

但在那之前，我们需要先创建一个这样的布局。

依赖安装

如果你的AS版本足够，那么打开build.gradle，就可以发现实际上已经引入了，这里我们就不在赘述。

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

创建布局

这里我随便创建了一个布局，我们切换下他的根布局为MotionLayout，

image.png

如果一切正常，就会变成下图

image.png

除此之外，还会有一个为scene新的文件在xml文件夹下，这个就是场景。

怎么样，我们甘肃省在高中是有信息技术会考的，我们当时选修的是flash，其实突然发现这个东西有点像，但我最开心的是可视化的，这使得我们做动画会方便不少呢。

继承关系

我们按照之前文章方案，选中MotionLayout布局标签，看看它继承了谁。我们会发现他是继承自ConstraintLayout，这样一来，它就有了ConstraintLayout的一些功能。

其实我并不常用或者说很少用它，去规划UI时更多是相对布局和线性布局。

因此，我们只需要像ConstraintLayout一样为布局中添加控件即可。

基础使用

实际上它确实有点像，我们的flash，这里我们先创建一个控件，就为view吧。

image.png

此时我们注意到创建的控件是可以展示的，并且当前选中的是MotionLayout

实践尝试

我们发现在旁边的是start和end，这个就是动画开始和结束的状态，有点像补间动画，我们可以设置动画开始和结尾，这个View的位置，同时也能设置这过程的动画，这就更像是flash动画了呢。

状态改变

如图，我们分别选中start和end，并且拖动组件到不同位置，以此来展示动画初始位置。

image.png

点击那条连接两个状态的线，我们就可以看到它的运行轨迹了，并且，我们是可以在下面播放的那个地方来预览自己的动画的，这是不是相当方便呢？

image.png

点击后执行

如果我们想让这个动画点击后再执行，就需要打开Onclick，但仅仅打开是不够的，这样只会使得，点击全界面都执行它，因此，我们设置targetId，这样点击对应ID的控件才会触发动画。

image.png

动画效果

这个类似我们的补间动画，我们给它一个初始和结束属性，将这些属性的值改为不同的，比如这里我们加一个旋转角度，开始为0结束为300，就有一段这样的效果了，当然效果还有很多，需要大家自己去探索。

image.png

结尾思考

这样动画效果有了，但是如何运用到我们的页面呢？实际上我们只需要把他当作一个正常的xml，在fragment和activity里就可以使用它了，其他的布局我们可以是正常的，仅仅是在这个界面上加一些动画进去。

Lottie

什么是Lottie？

Lottie是Airbnb推出的一个免费开源动画库，适用于Web/Android/iOS/Windows。它可以把bodymovin（AE插件）导出的json文件解析成动画，并且在各平台上进行呈现。
Lottie是以一位德国电影导演和剪影动画的最重要先驱Lotte Reiniger（洛特·雷妮格）的名字命名的。她的著名作品《艾哈迈德王子历险记》（1926年）——现存最早的长篇动画电影。

为什么采用它？

显然自己设计动画仅仅是一种方案，我们当然是可以使用其他人做好的。此时，使用gif是不太好的，这里我们就有了Lottie。

image.png

这个是Lottie的动画展示官网

使用Lottie现成的动画可以节省许多的功夫，这里有着许多的动画，总有一款是适合你的，因此我们可以选择Lottie来解决动画方案。

安装依赖

//lottie动画库
implementation 'com.airbnb.android:lottie:4.1.0'

这个版本肯定不是最新的了，大家可以去官网看看最新的。

Lottie使用

Lottie是一个组件，我们需要添加它的控件，如下

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/As_Item_Like"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginLeft="70dp"
    app:lottie_autoPlay="false"
    app:lottie_loop="false"
    android:layout_centerInParent="true"/>

image.png

这样我们就把它引用了进来，对他设置一些属性就可以体验它的效果了，如果没有设置JSON动画文件，暂时是看不到这个动画样式的。

Lottie常用属性

它的继承

image.png

实际上我们注意到LottieAnimationView是继承了ImageView的，这代表ImageView的属性我们都可以给他设置，这就需要大家自己探索了。 。 lottie_fileName，我们使用它就可以将本地的json动画文件传入。

lottie_autoPlay，这个属性是控制是否自动播放的，如果我们设置为true，当你打开页面加载后就会自动播放。

lottie_loop，这个属性是用来控制是否一种循环动画的。

Lottie的JSON动画资源获取

安卓使用Lottie的组件是需要动画资源文件的，Lottie强大的社区 lottiefiles.com/ 。

在这里，我们可以下载到自己想要的动画文件，选择这个JSON就可以了，当然也可以用URL，下面我们来说一下URL引入。

image.png

Lottie的使用远程动画资源

本地去采用json文件有时候是不可取的，这会增大安装包体积，为此，我们使用远程URL资源加载它。

replyLike.setAnimationFromUrl("https://xxxxx.json");

其中replyLike是LottieAnimationView控件对象，通过setAnimationFromUrl方法就可以设置远程文件,记得添加网络权限。

Lottie点击播放动画

tt0.top-894765.gif

这里有一个需求，就是点击这个LottieAnimationView后再播放点赞动画，我们看看如何实现呢？

holder.replyLike.playAnimation();，我们通过playAnimation()方法来播放动画，点击后再调用这个方法，就可以让动画播放出来，同时我们需要设置lottie_autoPlay和lottie_loop都为false，也就是默认不自动播放和不循环。

简单的控制播放

有时候我们一打开评论区，这个评论你已经点赞了，这个时间应该展示动画结束的样子，为此我们需要让动画在这块播放完成。

image.png

setProgress方法就可以做到，我们传入1或者0来表示结束和开始，当然也有其他进度需要大家自行测试。

结尾

这就是为大家推荐的两种新的动画方案，如果有什么问题欢迎在评论区指出。

avatar
文章
阅读
粉丝