MotionLayout动画从未如此简单!
本文字数:6106字
预计阅读时间:37分钟
第一步:添加依赖
第二步:创建布局和动画资源文件
创建布局
创建MotionScene动画资源文件
完善布局
添加动画
第三步:预览
基本使用总结
实现开头的动画效果
第一步:大图的主体效果
第二步:右下方点赞等按钮的动画
第三步:头像和名字
第四步:关注按钮
第五部:输入框和聊天列表动画
**MotionScene**常用属性讲解
MotionLayout标签
MotionScene标签
写在最后
话不多说先上图。
这是要做的最终效果。通过这些动画我们将了解MotionLayout的使用方法和常用的一些属性。
第一步:添加依赖
如果要使用MotionLayout
请将ConstraintLayout
更新到2.0及以上。在build.gradle
文件中添加依赖
如果使用的是AndroidX,添加依赖如下:
dependencies {implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}
如果使用的是support支持包,添加依赖如下:
dependencies {implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'
}
❝
本文使用的是constraintlayout:2.0.4版本和android studio 4.1.2
第二步:创建布局和动画资源文件
使用MotionLayout除了布局文件外。我们还需要编写一个描述动画的xml文件,这个文件用来描述动画开始、结束时的状态和一些中间点的状态。
创建布局
我们创建一个布局文件名为activity_motion_demo.xml
根布局为ConstraintLayout
。然后我们可以通过Android studio将布局转换为MotionLayout
选中刚刚的布局文件,选择Design
标签找到ComponentTree
面板,找到根布局右键选择Conver to MotionLayout
转换后能看到Design
面板变成了大致下面这个样子,多出了一个动画预览的窗口。
然后我们来查看一下xml的代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"app:layoutDescription="@xml/activity_motion_demo_scene"></androidx.constraintlayout.motion.widget.MotionLayout>
根布局自动改为了MotionLayout
并且添加了一个属性app:layoutDescription
,这个属性所引用的文件就是我们要编写的动画描述文件了。好,点过去看看
创建MotionScene动画资源文件
AndroidStudio自动为我们创建的MotionScene
文件如下:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:motion="http://schemas.android.com/apk/res-auto"><Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="1000"><KeyFrameSet></KeyFrameSet></Transition><ConstraintSet android:id="@+id/start"></ConstraintSet><ConstraintSet android:id="@+id/end"></ConstraintSet>
</MotionScene>
这也是一个MotionScene
文件的基本结构。
ConstrainSet
描述了开始或结束时页面控件的状态Transtion
指定了动画要使用的ConstrainSet,动画的触发方式等。
有了布局文件和MotionScene文件,MotionLayout就能帮我们完成动画了。
如果我们不使用AndroidStudio来转换布局为MotionLayout的话,就需要自己在res\xml
文件夹下创建一个根节点为<MotionScene>
的xml文件。
❝
建议使用Android Studio来转换,这样在xml面板中能预览动画效果,手动创建的有时不能正常显示预览,需要重启Android Studio(我使用的是4.1.2版本有这个问题)。
完善布局
现在我们在布局中添加一个View并实现一个简单的移动效果。
由于MotionLayout
是ConstraintLayout
的子类,所以我们可以像使用ConstraintLayout
一样来布局。下面添加一个方形的View到界面。
layout.xml文件:
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"app:layout="@xml/activity_motion_demo_scene"><Viewandroid:id="@+id/v_demo"android:layout_width="80dp"android:layout_height="80dp"android:background="#FF43E182"/></androidx.constraintlayout.motion.widget.MotionLayout>
❝
注意在MotionLayout布局下每个控件都需要设置一个id,即使我们不会使用到它。
添加动画
接下来我们为MotionScene文件添加内容。
完整文件看起来是这个样子的。
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:motion="http://schemas.android.com/apk/res-auto"><Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="3000"><OnSwipemotion:dragDirection="dragRight"/></Transition><ConstraintSet android:id="@+id/start"><Constraintandroid:id="@+id/v_demo"android:layout_width="60dp"android:layout_height="60dp"android:scaleX="0.5"android:scaleY="0.5"motion:layout_constraintBottom_toBottomOf="parent"motion:layout_constraintLeft_toLeftOf="parent"motion:layout_constraintTop_toTopOf="parent" /></ConstraintSet><ConstraintSet android:id="@+id/end"><Constraintandroid:id="@+id/v_demo"android:layout_width="60dp"android:layout_height="60dp"android:layout_marginLeft="20dp"motion:layout_constraintBottom_toBottomOf="parent"motion:layout_constraintRight_toRightOf="parent"motion:layout_constraintTop_toTopOf="parent" /></ConstraintSet>
</MotionScene>
其中ConstraintSet
描述了View的两个位置,Transition
指定了哪个ConstaintSet
为开始状态哪个是结束和一些基本信息。具体标签的作用和属性的意义下面会说到。
第三步:预览
我们可以在xml
布局文件面板中查看动画效果。将面板切换到Desgin
标签
点击1所指的start可以预览start状态,点击2所指的end预览end状态。点击上方3所指的连线,可以在下方面板点击播放键查看动画。
接下来就可以运行程序在手机上查看动画效果啦。
基本使用总结
将
ConstraintLayout
升级到2.0或以上。将布局转化为
MotionLayout
创建
MotionScene
文件并在MotionLayout
的app:layoutDescription
属性中指明。在
MotionScene
文件中编辑<ConstrainSet>
分别设置动画开始和结束时控件的状态。编辑<Transition>
元素指明动画开始和结束对应的<ConstrainSet>
是哪个。预览和运行程序
实现开头的动画效果
我们一步步来实现开头的动画效果并借此来了解MotionLayout的属性。
第一步:大图的主体效果
我们先来看界面中最主要的那张大图片的动画。
这个动画效果为随拖动缩小图片并移动到顶部。
首先在布局文件中添加一个ImageView来显示图片。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"app:layoutDescription="@xml/frg_live_demo_scene2"app:showPaths="true"><ImageViewandroid:id="@+id/iv_main"android:layout_width="match_parent"android:src="@drawable/wallpaper"android:background="@color/black"android:layout_height="match_parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
这里我们在MotionLayout
标签添加一个新的属性showPaths=true
,添加这个属性MotionLayout会为每个有动画的控件绘制一条轨迹线方便我们调试动画效果。
接下来我们为这个ImageView在MotionScene文件中添加动画 首先设置ImageView的开始状态:
<ConstraintSet android:id="@+id/start"><Constraintandroid:id="@+id/iv_main"android:layout_width="match_parent"android:layout_height="match_parent" />
</ConstraintSet>
然后设置ImageView的结束状态:
<ConstraintSet android:id="@+id/end"><Constraintandroid:id="@+id/iv_main"android:layout_width="match_parent"motion:layout_constraintTop_toTopOf="parent"android:layout_height="220dp" />
</ConstraintSet>
我们在ConstraintSet
标签下来设置界面一种状态下的布局,我们需要为其设置一个id。Constraint
标签用来描述一个控件的位置和属性等。这里我们设置ImageView开始时大为match_parent,结束时宽度不变,高度为220dp。
❝
我们需要在开始和结束的两个
Constraint
中为控件设置大小,即使控件大小没有改变也需要在两边都设置好大小。
然后我们将这两个ConstraintSet
的id填入Transition
标签。
<Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="1000">
</Transition>
这样MotionLayout就能帮我们让控件在两种状态间运用动画平滑的过度了。这里我们动画设置了1秒的时间motion:duration="1000"
单位为毫秒,我们也可以在MotionScene
标签下设置时间motion:defaultDuration="1000"
。这两种方式中Transition
的优先级更高,如果Transition
没有设置就使用MotionScene
中设置的默认时间。
最后动画要响应手势上滑动的动作。在MotionLayout之前这件事可能很麻烦,但有了MotionLayout我们只需要在Transition
下添加一个OnSwipe
标签即可。
<Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="1000"><OnSwipemotion:dragDirection="dragUp"motion:touchAnchorSide="bottom"motion:touchAnchorId="@id/iv_main"/></Transition>
<OnSwipe>
标签表示拖动执行动画。motion:dragDirection="dragUp"
表示向上边拖动执行动画。
如果需要响应点击事件可以用<OnClick>
标签
完整的MotionScene文件如下:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"xmlns:motion="http://schemas.android.com/apk/res-auto"motion:defaultDuration="1000"><Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="1000"><OnSwipemotion:dragDirection="dragUp"motion:touchAnchorSide="bottom"motion:touchAnchorId="@id/iv_main"/></Transition><ConstraintSet android:id="@+id/start"><Constraintandroid:id="@+id/iv_main"android:layout_width="match_parent"android:layout_height="match_parent" /></ConstraintSet><ConstraintSet android:id="@+id/end"><Constraintandroid:id="@+id/iv_main"android:layout_width="match_parent"motion:layout_constraintTop_toTopOf="parent"android:layout_height="220dp" /></ConstraintSet>
</MotionScene>
现在可以点击运行试试效果了。
第二步:右下方点赞等按钮的动画
这个动画是三个按钮的移动效果,在开始的ConstraintSet
将按钮布局成竖直排列,在结束时布局成水平排列,代码很简单就不在这里放了。
预览下效果能看到按钮呈直线移动了过去。但这直来直去的未免太单调了。为此MotionLayout提供了KeyFrameSet
和KeyPosition
。
KeyFrameSet
包含于Transition
标签中,这个标签用来描述一系列运动过程中的关键帧。我们可以利用其使动画效果变的更复杂。其子元素包含KeyPosition
、KeyAttribute
、KeyCycle
、KeyTimeCycle
、KeyTrigger
。具体的用法如下:
<Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="1000"><OnSwipe motion:dragDirection="dragUp"motion:touchAnchorSide="bottom"motion:touchAnchorId="@id/iv_main"/><KeyFrameSet><KeyPosition motion:framePosition="50"motion:motionTarget="@+id/iv_share"motion:percentY="0.5"motion:percentX="0.7"motion:keyPositionType="deltaRelative"/><KeyPosition motion:framePosition="50"motion:motionTarget="@+id/iv_like"motion:percentY="0.5"motion:percentX="0.7"motion:keyPositionType="deltaRelative"/></KeyFrameSet></Transition>
我们在Transition
下添加KeyFrameSet
并在其中在添加两个KeyPosition
。KeyPosition
用来指定动画序列中特定时刻的位置。该属性用于调整默认的运动路径。
其中motion:motionTarget
表示受影响的控件id,iv_share和iv_like分别是分享和点赞的按钮id。
motion:framePosition
是这个关键帧的位置取值为1 到 99 之间的整数。这里取值50就是指动画进行到一半的位置。
motion:percentX
和motion:percentY
是控件到达motion:framePosition
点时的位置,是个float值。这两个属性的具体意义需要根据motion:keyPositionType
的类型来定,其中包括parentRelative,deltaRelative,pathRelative这三种类型。具体的意思会在下面的属性讲解里说明。现在我们使用deltaRelative并将值设定为0.5和0.7。
好了,再看一下现在的动画效果,直线运动变成了曲线。我们也可以多加几个关键帧让运动的路径变得更复杂。
第三步:头像和名字
注意名字那个TextView的文字有个变大变小的处理,这个要怎么实现呢?这就要用到CustomAttribute
了。这个标签包含在Constraint
标签中。用法如下:
<Constraintandroid:id="@+id/tv_name"android:layout_width="wrap_content"android:layout_height="40dp"android:layout_marginLeft="8dp"motion:layout_constraintBottom_toBottomOf="@id/iv_avatar"motion:layout_constraintLeft_toRightOf="@id/iv_avatar"motion:layout_constraintTop_toTopOf="@id/iv_avatar" ><CustomAttributemotion:attributeName="textSize"motion:customFloatValue="18"/>
</Constraint>
motion:attributeName
是必需属性,并且必须与控件中具有 getter 和 setter 方法的属性相对应。比如这里的TextView就有setTextSize和getTextSize方法。
motion:customFloatValue
这个属性是基于上面的attributeName
来决定的,这里的textSize是float所以用customFloatValue。支持的值类型还有颜色、像素、字符串、布尔等。具体会在下面的属性讲解中列出。
在开始和结束的Constraint中为TextView设置不同的字体大小就可以实现这个效果了。接下来在仔细观察一下头像和名字还有个淡入淡出的效果。很容易想到使用alpha变化。但alpah变化在MotionLayout中怎么用呢?那就要用到刚刚提到过的KeyAttribute
了。
<KeyFrameSet><KeyAttribute android:alpha="0.2"motion:framePosition="30"motion:motionTarget="@+id/iv_avatar"/><KeyAttribute android:alpha="0.2"motion:framePosition="30"motion:motionTarget="@+id/tv_name"/><KeyAttribute android:alpha="0.2"motion:framePosition="60"motion:motionTarget="@+id/iv_avatar"/><KeyAttribute android:alpha="0.2"motion:framePosition="60"motion:motionTarget="@+id/tv_name"/>
</KeyFrameSet>
motion:motionTarget
和motion:framePosition
的意义和KeyPosition
中是一样的, android:alpha
也很直白不必多说。这里用到了四个KeyAttribute
每个控件使用了两个,是因为要实现在动画的中间部分保持0.2的透明度不变,在快要结束时再变得可见。
KeyAttribute
还支持visibility、rotation、scale等控件基本属性。
第四步:关注按钮
分析下这个效果:
按钮的渐隐渐显
位置变化
控件大小变化
文字大小变化
这些效果用上面讲过的方法就都可以实现了,只要把它们组合起来就是最终的效果啦。关键代码放在下面了,比较好理解。
<!-- 开始状态 --><ConstraintSet android:id="@+id/start"><Constraintandroid:id="@+id/tv_attention"android:layout_width="80dp"android:layout_height="26dp"android:layout_marginLeft="10dp"motion:layout_constraintBottom_toBottomOf="@id/iv_avatar"motion:layout_constraintLeft_toRightOf="@id/tv_name"motion:layout_constraintTop_toTopOf="@id/iv_avatar" ><CustomAttributemotion:attributeName="textSize"motion:customFloatValue="14"/></Constraint></ConstraintSet>
<!-- 结束状态 --><ConstraintSet android:id="@+id/end"><Constraintandroid:id="@+id/tv_attention"android:layout_width="58dp"android:layout_height="22dp"android:layout_marginRight="10dp"motion:layout_constraintBottom_toBottomOf="@id/v_frame"motion:layout_constraintRight_toRightOf="@id/v_frame"motion:layout_constraintTop_toTopOf="@id/v_frame" ><CustomAttributemotion:attributeName="textSize"motion:customFloatValue="10"/></Constraint></ConstraintSet>
<Transitionmotion:constraintSetEnd="@+id/end"motion:constraintSetStart="@id/start"motion:duration="1000"><OnSwipe motion:dragDirection="dragUp" /><KeyFrameSet><KeyAttributeandroid:alpha="0"motion:framePosition="10"motion:motionTarget="@+id/tv_attention" /><KeyPositionmotion:framePosition="10"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/tv_attention"motion:percentX="0"motion:percentY="0" /><KeyAttributeandroid:alpha="0"motion:framePosition="90"motion:motionTarget="@+id/tv_attention" /><KeyPositionmotion:framePosition="90"motion:keyPositionType="deltaRelative"motion:motionTarget="@+id/tv_attention"motion:percentX="1"motion:percentY="1" /></KeyFrameSet></Transition>
第五部:输入框和聊天列表动画
输入框就是控件大小的变化,聊天列表是一个控件位置的变化,用上面提到的方法完全可以解决。大家自己试试吧。
到这里文章开头的动画效果就完成了。MotionLayout的一些基本属性也都有所了解了。还有很多属性在文章的动画效果中没能用到,下面就为大家附上常用的属性。
MotionScene常用属性讲解
MotionLayout标签
layoutDescription
:设置布局的MotionScene文件。applyMotionScene
:表示是否应用 MotionScene。此属性的默认值为true
。currentState
:设置当前的状态,值对应MotionScene中的ConstraintSet节点的id。比如我们可以将其设置为@+id/end
(结束状态)。motionProgress
:值为0到1之间的小数,用来设置页面开始时的动画进度。例如,将motionProgress
设置为0.5,那么页面将以动画进行一半的状态开始。showPaths
:是否显示动画路径,为true话会显示view运动的轨迹线motionDebug
:显示何种调试信息,设置的话会在界面的下方显示一些动画调试信息
如果我们只设置了motion:showPaths="true"的话那么就会显示轨迹线如果同时设置了motion:showPahts和motion:motionDebug的话以showPahts的设置会失效。以motionDebug的设置为准
属性值 | 效果 |
---|---|
NO_DEBUG | 不显示轨迹线,也不显示debug信息 |
SHOW_PROGRESS | 不显示轨迹线,只显示debug信息 |
SHOW_PATH | 只显示轨迹线,不显示debug信息 |
SHOW_ALL | 同时显示轨迹线和debug信息 |
MotionScene标签
<Transition>
:指定动画的开始和结束状态、触发动画等方式、动画中间的关键帧(必须包含)<ConstraintSet>
: 节点用来定义开始或是结束时控件的状态。我们需要在这个节点下重新为想要动画的控件进行布局。这里的设置会覆盖之前布局xml
文件中的设置,可以将这个节点想象为ConstraintLayout
布局,其中的子节点Constraint
可以想象为每一个View
其中的android:id=""
属性对应着原layout.xml
中的view的id。(非必须包含)defaultDuration:所有过渡的默认持续时间(以毫秒为单位)。
Transition标签
constraintSetStart
:设置动画的开始状态,这里对应一个ConstraintSet
的idconstraintSetEnd
:设置动画的结束状态,这里对应一个ConstraintSet
的idduration
:动画的持续时间,如果没有设置会使用MotionScene
元素的defaultDuration
autoTransition
:是否自动改变状态,默认情况下页面是constraintSetStart
的状态开始的。这个属性可以使页面在开始时切换到另一个状态animateToStart
:切换到开始状态,有动画效果animateToEnd
:切换到结束状态,有动画效果jumpToStart
:切换到开始状态,无动画效果:jumpToEnd
:切换到结束状态,无动画效果
motionInterpolator
:动画的差值器,其值为常用的几种效果bounce
,easeIn
,easeOut
,easeInOut
,linear
OnClick和OnSwipe
包含于Transition
元素,用来设置动画等触发方式
OnCLick
:点击触发transitionToStart
:从当前状态跳到constraintSetStart
属性指定的状态,有动画效果。transitionToEnd
:从当前状态跳到constraintSetEnd
属性指定的状态,有动画效果。jumpToStart
:从当前状态切换到constraintSetStart
属性指定的状态,无动画效果。jumpToEnd
:从当前状态切换到constraintSetEnd
属性指定的状态,无动画效果。toggle
:在transitionToStart
和constraintSetEnd
状态之间使用动画反复切换。每次点击从一种状态切换到另一种状态。targetId
:希望被点击后触发动画的视图id。当用户点击此视图时开始动画clickAction
: 点击时要执行的操作,支持的值包括。
OnSwipe
:滑动触发touchAnchorId
:受滑动影响的控件idtouchAnchorSide
:滑动所固定到的目标视图的一侧。MotionLayout 将尝试在该固定点与用户手指之间保持恒定的距离。可接受的值包括"left"
、"right"
、"top"
和"bottom"
。dragDirection
:用户滑动动作的方向。如果设置了此属性,将仅适用于沿特定方向的滑动。可接受的值包括"dragLeft"
、"dragRight"
、"dragUp"
和"dragDown"
dragScale
:控制视图相对于滑动长度的移动距离。默认值为 1,表明视图移动的距离应与滑动距离一致。如果dragScale
小于 1,视图移动的距离会远远小于滑动距离(例如,dragScale
为 0.5 意味着如果滑动移动 4 厘米,目标视图会移动 2 厘米)。如果dragScale
大于 1,视图移动的距离会大于滑动距离(例如,dragScale
为 1.5 意味着如果滑动移动 4 厘米,目标视图会移动 6 厘米)。maxVelocity
:目标视图的最大速maxAcceleration
:目标视图的最大加速度。
KeyFrameSet
包含于Transition
元素,这个元素用来描述一系列运动过程中的关键帧。我们可以利用其使动画效果变的更复杂。其子元素包含KeyPosition
、KeyAttribute
、KeyCycle
、KeyTimeCycle
、KeyTrigger
KeyPosition
指定动画序列中特定时刻的位置。该属性用于调整默认的运动路径。
motionTarget
:受影响的控件id。framePosition
:关键帧的位置取值为1 到 99 之间的整数,这个值相当于动画过程(时间)的百分比。例如,如果framePosition
为 25,则控件在整个动画过程的四分之一处到达点。percentX
、percentY
:被motionTarget
指定的控件在到达的framePosition
点时的位置。这两个数值的具体意义和keyPositionType
属性的设定有关。keyPositionType
:指定percentX
、percentY
的坐标系。parentRelative
percentX
和percentY
坐标系为父布局坐标系。即父布局左上角为坐标原点其值0为原点,1为X或Y轴的端点。
deltaRelative
percentX
和 percentY
坐标系以constraintSetStart
指定的位置为原点,X轴平行于父布局X轴,方向为动画开始的x点指向结束点x点,其值0为原点,1为动画整个动画X轴方向的运动距离。Y轴平行于父布局Y轴,方向为动画开始的y点指向结束点y点,其值0为原点,1为动画整个动画Y轴方向的运动距离。
pathRelative
以constraintSetStart
指定的位置为原点,链接动画开始点和结束点为X轴,X轴顺时针旋转90度为Y轴,0为坐标原点,1为动画开始点和结束点连线距离。
KeyAttribute
指定动画序列中特定时刻的视图属性。
motionTarget
和framePosition
与KeyPosition
意义相同我们可以设置以下属性
android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
transitionPathRotate
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ
例如:我们可以设置在动画到达一半时控件缩小为原来的0.2倍。<KeyAttribute>
设置如下:
<KeyFrameSet><KeyAttributemotion:motionTarget="@id/v_demo"motion:framePosition="50"android:scaleX="0.2"android:scaleY="0.2"/>
</KeyFrameSet>
我们可以得到如下效果:
KeyCycle
根据给定的函数对设定的属性进行周期性变化。
motionTarget
:想要控制的控件id。wavePeriod
:表示运动的周期数,waveShape
:表示周期的函数,这里支持的函数有sin
,cos
,square
,triangle
,saw
,reverse_saw
和bounce
动画会根据上面的
wavePeriod
,waveShape
对如下支持的属性进行周期变化android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ
例如:实现一个成正弦函数上下移动的动画效果,<KeyCycle>
设置如下:
<KeyFrameSet><KeyCyclemotion:motionTarget="@id/v_demo"motion:wavePeriod="1"motion:waveShape="sin"android:translationY="50dp"/>
</KeyFrameSet>
我们可以得到如下效果:
KeyTrigger
在动画中调用控件的指定方法。
motionTarget
:想要控制的控件idframePosition
:取值范围和意义与在KeyPosition
元素中相同,当动画执行到framePosition
设定的位置时会执行onCross
,onPositiveCross
,onNegativeCros
指定的方法。onCross
:指定需要调用的方法名,控件中必须有和此属性指定方法名同名的方法。无论动画正向还是反相只要当动画执行到framePosition
设置的位置都会执行指定方法。onPositiveCross
:作用同onCross
,但只有正向执行动画到达framePosition
设置的位置时才会执行指定的方法。onNegativeCross
:作用同onCross
,但只有反向执行动画到达framePosition
设置的位置时才会执行指定的方法。
例如:我们自定义一个ToggleButton添加一个toggle方法来控制控件的开关。
public class MyToggleButton extends AppCompatToggleButton
{//.... 省去构造方法//新添加的方法。public void toggle(){setChecked(!isChecked());}
}
然后我们在MotionScene
中这样写
<!-- onCross 中的名词和控件中新添加的方法名相同 -->
<KeyFrameSet><KeyTriggermotion:motionTarget="@id/tb"motion:framePosition="50"motion:onCross="toggle"/>
</KeyFrameSet>
效果如下,在动画进行到一半时开关会打开。
ConstraintSet
用来设置视图在开始或者结束时各个控件的位置和大小等状态,
id
:唯一标识符deriveConstraintsFrom
:另一个 ConstraintSet 的 ID。如果指定此属性,相应集内的所有约束条件都将应用于此 ConstraintSet,除非此集明确替换它们
Constraint
每一个Constraint
元素对应一个id属性所指向的View,
id
:用来指定布局中对应的view
Constraint
元素中我们可以设置控件的大小并使用ConstraintLayout
的属性来设置控件位置。除此之外我们还可以插入以下属性:
alpha
visibility
elevation
rotation
、rotationX
、rotationY
translationX
、translationY
、translationZ
scaleX
、scaleY
❝
注意:我们必须为控件设置宽和高即使在布局xml中已经设置过了
CustomAttribute
包含在Constraint
元素中,一个 <CustomAttribute>
本身包含两个属性:
motion:attributeName
是必需属性,并且必须与控件中具有 getter 和 setter 方法的属性相对应。比如填写motion:attributeName = "backgroundColor"
那么我们的控件中就必须有基本的getBackgroundColor()
和setBackgroundColor()
方法。第二个属性我们需要基于上面填写的属性来决定。比如上面填写的
backgroundColor
这里我们就需要使用customColorValue
。以下是支持的数据类型:customColorValue
适用于颜色customColorDrawableValue
适用于颜色的drawablecustomPixelDimension
适用于像素customIntegerValue
适用于整数customFloatValue
适用于浮点值customStringValue
适用于字符串customDimension
适用于尺寸customBoolean
适用于布尔值
❝
请注意,在指定自定义属性时,您必须在开始和结束的
<ConstraintSet>
元素中都为其指定。
例如:如果要改变控件的背景颜色,我们需要在原来的Constraint
元素下添加CustomAttribute
元素并向如下设置
<ConstraintSet android:id="@+id/start"><Constraintandroid:id="@+id/v_demo"android:layout_width="60dp"android:layout_height="60dp"motion:layout_constraintBottom_toBottomOf="parent"motion:layout_constraintLeft_toLeftOf="parent"motion:layout_constraintTop_toTopOf="parent" ><!-- 控件中需要有和attributeName同名的get和set方法 --><CustomAttributemotion:attributeName="backgroundColor"motion:customColorValue="#ff00ff"/></Constraint></ConstraintSet><ConstraintSet android:id="@+id/end"><Constraintandroid:id="@+id/v_demo"android:layout_width="60dp"android:layout_height="60dp"android:scaleX="1"android:scaleY="1"motion:layout_constraintRight_toRightOf="parent"motion:layout_constraintTop_toTopOf="parent"motion:layout_constraintBottom_toBottomOf="parent"><!-- 结束时同样需要设置颜色 --><CustomAttributemotion:attributeName="backgroundColor"motion:customColorValue="#00ffff"/></Constraint></ConstraintSet>
效果如下:
写在最后
文章中的动画效果算是个入门,MotionLayout还有些更复杂更不好理解的属性。还有MotionScene要怎样复用?代码如何控制动画?等等。那下次就和大家分享这些进阶一点的东西吧。
上期获奖名单公布
恭喜“阿策~”、“hao”、木雨夕、“_”、“大宇”!以上读者请及时添加小编微信:sohu-tech20兑书~
也许你还想看
(▼点击文章标题或封面查看)
【文末有惊喜!】iOS日历攻略:提醒调休并过滤法定节假日
2021-06-24
【文末有惊喜!】利用Swift API可用性解决App Extension无法编译
2021-06-10
【文末有惊喜!】详解:mach-o文件如何分析多余的类和方法
2021-07-08
正经分析iOS包大小优化
2021-05-27
【文末有惊喜!】如何让iOS推送播放语音?
2021-05-13
MotionLayout动画从未如此简单!相关推荐
- MotionLayout MotionScene 动画从未如此简单!
话不多说先上图. 这是要做的最终效果.通过这些动画我们将了解MotionLayout的使用方法和常用的一些属性. 第一步:添加依赖 如果要使用MotionLayout请将ConstraintLayou ...
- EasyFloat:浮窗从未如此简单
EasyFloat 项目地址:princekin-f/EasyFloat 简介: EasyFloat:浮窗从未如此简单 更多:作者 提 Bug 标签: EasyFloat:浮窗从未如此简单 特点功 ...
- 网络编程入门从未如此简单(一):假如你来设计网络,会怎么做?
本文原题"如果让你来设计网络",有修订和改动,收录已征得作者同意,转载请联系作者.本文已同步发布于52im社区:http://www.52im.net/thread-3330-1- ...
- 怎么用python处理excel文件-用python处理excel文件有多轻松?工作从未如此简单
最近需要频繁读写 excel 文件,想通过程序对 excel 文件进行自动化处理,发现使用 python 的 openpyxl 库进行 excel 文件读写实在太方便了,结构清晰,操作简单.本文对 o ...
- 【码云周刊第 3 期】来自国内开发者的实战项目,开源让通讯从未如此简单!...
为什么80%的码农都做不了架构师?>>> 类型:即时通讯 "小时候,乡愁是一枚小小的邮票,我在这头,母亲在那头-- " 春节将至,思乡心切,小一情不自禁的想 ...
- android 点赞动画_Android MotionLayout动画:续写ConstraintLayout新篇章
本文作者 作者:新小梦 链接: https://juejin.im/post/6854573206653812743 本文由作者授权发布. 0概述 MotionLayout作为ConstraintLa ...
- python做动画视频教程_Python入门教程:Python创建动画竟然这么简单!
数据下载地址:www.drugabuse.gov/sites/default/files/overdose_data_1999-2015.xls. 我们将用Matplotlib和Seaborn绘图,用 ...
- animate动画插件的简单运用
animate动画插件的简单运用 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工 ...
- 欢迎界面动画效果的简单实现
欢迎界面(Splash)是应用呈现给用户的第一个界面,一般来讲,我们会给欢迎界面加上一个动画效果,从而给用户一个较好的第一印象.而欢迎界面通常不会放太多的view,一般只有一个背景(backgroun ...
最新文章
- 小学六年级,自学计算机,会爬虫,搞崩过学校网站,还有女朋友...
- gearman python 实例
- java 实例化对象的几种姿势
- java collection详解_java 7 collection 详解(一)
- 虚拟化精华问答 | 怎样使虚拟机能够达到比较高的IO性能?
- 700 页的机器学习笔记火啦,图文生动形象
- jQuery获得select的值及其他操作
- html 生成image java makenoise,[图形学] 柏林噪声 (perlin noise)
- 一秒等于多少毫秒_全国首批!海宁5G正式商用!用手机的人必看!快多少?价贵吗?怎么换?...
- 【网络安全工程师面试合集】安全角度谈UDP、TCP和DHCP协议
- Linux 启动流程学习
- Java包装类介绍与类型之间相互转换
- (十六)企业部分之lvs
- 三维点云数据处理软件供技术原理说明_三维点云处理软件需求说明
- https://www.bejson.com/devtools/properties2yaml/
- [Hello World教程] 使用HBuilder和Uni-app 生成一个简单的微信小程序DEMO
- 重装/重置系统后,针对于虚拟机需要输入许可证,仍无法打不开问题
- Qt 中 Q_OBJECT 宏及 moc_*.cpp文件
- HTML为标题栏添加图片
- 【数据分享】2022年11月西南地区POI数据分享(重庆、四川、贵州、云南、西藏)
热门文章
- 一种快速毛玻璃虚化效果实现
- 最全消费者防坑手册:走过最长的路,就是商家的套路
- imx6q项目:使用psplash制作开机动画
- CSR8675学习笔记:从外部Flash读取bin文件
- leetcode_399. 除法求值
- mysql教程虫师_python使用mysql数据库 - 虫师
- 1.跳槽找工作避坑指南(2019版)
- Excel Vba无法连接 远程 Mysql数据库问题的解决方法
- 使用 Authing + Lambda 替代 AWS Cognito
- Atlassian 系列软件安装(Crowd、jira、confluence、bitbucket、bamboo)