08 MotionLayout-Keyframes
2021-08-17 本文已影响0人
凤邪摩羯
废话少说先看效果
image
首页实现复杂的交互效果首要了解MotionLayout的一个重要的概念
关键帧Keyframes
MotionLayout的关键帧
关键帧可以帮助你扩展 MotionLayout 特殊效果。我们可以利用不同类型的关键帧实现我们的效果，MotionLayout涵盖了很多特殊的关键帧：
详细的关系各中关键帧的属性我这边不一一赘述,大概可以参考上面的链接进行学习
今天我们利用MotionLayout的Keyframes来实现简单的Youtube的切换效果
(一).第一步我们还是要创建一下布局activity_you_tube.xml
<androidx.constraintlayout.motion.widget.MotionLayout 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:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#444"
app:layoutDescription="@xml/scene_youtube"
tools:ignore="contentDescription"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/top_image_container"
android:layout_width="match_parent"
android:layout_height="320dp"
android:background="?android:attr/windowBackground"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="@+id/top_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@mipmap/timg"
app:layout_constraintTop_toTopOf="@id/top_image_container"
app:layout_constraintBottom_toBottomOf="@id/top_image_container"
app:layout_constraintStart_toStartOf="@id/top_image_container"
app:layout_constraintEnd_toEndOf="@id/top_image_container"
/>
<ImageView
android:id="@+id/image_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="@drawable/ic_play_arrow_gray_32dp"
android:alpha="0"
app:layout_constraintEnd_toStartOf="@id/image_clear"
app:layout_constraintTop_toTopOf="@id/top_image_container"
app:layout_constraintBottom_toBottomOf="@id/top_image_container"
/>
<ImageView
android:id="@+id/image_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="@drawable/ic_clear_gray_32dp"
android:alpha="0"
app:layout_constraintEnd_toEndOf="@id/top_image_container"
app:layout_constraintBottom_toBottomOf="@id/top_image_container"
app:layout_constraintTop_toTopOf="@id/top_image_container"
/>
<FrameLayout
android:id="@+id/recyclerview_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/top_image_container"
/>
<View
android:id="@+id/recyclerview_front"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/top_image_container" />
<!--BottomNavigationView 实现导航栏的点击问题-->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
这里播放按钮图标ic_play_arrow_gray_32dp是通过vector来写的
<vector android:height="32dp" android:tint="#505050"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="32dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M8,5v14l11,-7z"/>
</vector>
同样ic_clear_gray_32dp也是通过vector来写的
<vector android:height="32dp" android:tint="#505050"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="32dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>
底部菜单栏布局bottom_nav_menu,部分缺少的图标大家自行替换吧
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="首页" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="中间页" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="关于我" />
</menu>
第二步创建MotionScene scene_youtube.xml
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:motionInterpolator="linear">
<OnSwipe
motion:touchAnchorId="@+id/top_image_container"
motion:touchAnchorSide="bottom"
motion:dragDirection="dragUp" />
<ConstraintSet android:id="@id/start">
<Constraint
android:id="@id/top_image_container"
android:layout_width="0dp"
android:layout_height="320dp"
motion:layout_constraintTop_toTopOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintEnd_toEndOf="parent" />
<Constraint
android:id="@id/top_image"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintTop_toTopOf="@id/top_image_container"
motion:layout_constraintBottom_toBottomOf="@id/top_image_container"
motion:layout_constraintStart_toStartOf="@id/top_image_container"
motion:layout_constraintEnd_toEndOf="@id/top_image_container"
/>
<Constraint
android:id="@id/recyclerview_container"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintTop_toBottomOf="@id/top_image_container"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent" />
<Constraint
android:id="@id/recyclerview_front"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintTop_toBottomOf="@id/top_image_container"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"/>
<Constraint android:id="@id/image_play" >
<PropertySet motion:alpha="0" />
</Constraint>
<Constraint android:id="@id/image_clear" >
<PropertySet motion:alpha="0" />
</Constraint>
<Constraint
android:id="@id/bottom_nav"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintTop_toBottomOf="parent"
motion:layout_constraintLeft_toLeftOf="parent"
motion:layout_constraintRight_toRightOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@id/end">
<Constraint
android:id="@id/top_image_container"
android:layout_width="0dp"
android:layout_height="54dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toTopOf="@id/bottom_nav" />
<Constraint
android:id="@id/top_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
motion:layout_constraintTop_toTopOf="@id/top_image_container"
motion:layout_constraintBottom_toBottomOf="@id/top_image_container"
motion:layout_constraintStart_toStartOf="@id/top_image_container"
motion:layout_constraintDimensionRatio="H,1:2.5"
/>
<Constraint
android:id="@id/recyclerview_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
motion:layout_constraintTop_toBottomOf="@id/top_image_container"
motion:layout_constraintBottom_toTopOf="@id/bottom_nav"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent" />
<Constraint
android:id="@id/recyclerview_front"
android:layout_width="0dp"
android:layout_height="0dp"
android:alpha="0"
motion:layout_constraintTop_toBottomOf="@id/top_image_container"
motion:layout_constraintBottom_toBottomOf="@id/top_image_container"
motion:layout_constraintEnd_toEndOf="@id/top_image_container"
motion:layout_constraintStart_toStartOf="@id/top_image_container"
/>
<Constraint android:id="@id/image_play" >
<PropertySet motion:alpha="1" />
</Constraint>
<Constraint android:id="@id/image_clear" >
<PropertySet motion:alpha="1" />
</Constraint>
<Constraint
android:id="@id/bottom_nav"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintLeft_toLeftOf="parent"
motion:layout_constraintRight_toRightOf="parent" />
</ConstraintSet>
<KeyFrameSet>
<KeyPosition
motion:motionTarget="@id/top_image"
motion:framePosition="90"
motion:percentWidth="0"
motion:percentX="0"
motion:curveFit="linear"
/>
<KeyPosition
motion:motionTarget="@id/top_image_container"
motion:framePosition="90"
motion:percentWidth="0"
motion:curveFit="linear"
/>
<KeyPosition
motion:motionTarget="@id/recyclerview_container"
motion:framePosition="90"
motion:percentWidth="0"
motion:curveFit="linear"
/>
<KeyAttribute
android:alpha="0"
motion:framePosition="75"
motion:motionTarget="@id/recyclerview_front" />
<KeyAttribute
android:alpha="0.10"
motion:framePosition="90"
motion:motionTarget="@id/image_clear" />
<KeyAttribute
android:alpha="0.10"
motion:framePosition="90"
motion:motionTarget="@id/image_play" />
</KeyFrameSet>
</Transition>
</MotionScene>
授人以鱼不如授人以渔,最后简单介绍一下关键帧
MotionLayout 支持不同的关键帧：
- 位置关键帧 Position keyframe : KeyPosition
- 属性关键帧 Attribute keyframe : KeyAttribute
- 循环关键帧 Cycle keyframe : KeyCycle
- 周期关键整 TimeCycle keyframe : KeyTimeCycle
注意，每种类型的关键帧都是独立于其他类型的关键帧的——也就是说，你不需要在相同的点上定义所有的关键帧（但是你不能在相同的点上定义相同类型的多个关键帧）
通用属性
所有关键帧（位置、属性、循环、周期）都有一些关键的通用属性：
- 节点 motion:framePosition : 关键帧在过渡中（从0到100）的作用时机
- 目标 motion:target : 哪个对象受该关键帧影响
- 插值器 motion:transitionEasing : 使用哪种插值器（默认为线性）
- 曲线拟合motion:curveFit : 样条（默认）或线形——使用哪个曲线拟合关键帧。默认情况下是单调样条曲线，这使得过渡更加平滑，当然你也可以决定使用线性 (linear) 拟合。
具体学习深入理解关键帧参考文档
Defining motion paths in MotionLayout
Defining motion paths in MotionLayout(译文)
