Android之MotionLayout(六),如果使用Keyframes实现实现YouTube切换效果

目录

Android之MotionLayout(一),MotionLayout的基本使用
Android之MotionLayout(二),MotionScene的标签属性说明
Android之MotionLayout(三),用 MotionLayout 来做过渡动画,如何使用ConstraintSet
Android之MotionLayout(四),用 MotionLayout实现向上拉的折叠效果
Android之MotionLayout(五),如何使用 MotionLayout的自定义属性
Android之MotionLayout(六),如果使用Keyframes实现实现YouTube切换效果

废话少说先看效果

youtube.gif

首页实现复杂的交互效果首要了解MotionLayout的一个重要的概念关键帧Keyframes

MotionLayout的关键帧

关键帧可以帮助你扩展 MotionLayout 特殊效果。我们可以利用不同类型的关键帧实现我们的效果，MotionLayout涵盖了很多特殊的关键帧：

• 关键帧 Keyframes
• 位置关键帧 Position Keyframes
• 曲线动作 Arc Motion
• 时间模型 Easing
• 属性关键帧 Attributes Keyframes

详细的关系各中关键帧的属性我这边不一一赘述,大概可以参考上面的链接进行学习

今天我们利用MotionLayout的Keyframes来实现简单的Youtube的切换效果

(一).第一步我们还是要创建一下布局activity_you_tube.xml

这里播放按钮图标ic_play_arrow_gray_32dp是通过vector来写的

同样ic_clear_gray_32dp也是通过vector来写的

底部菜单栏布局bottom_nav_menu,部分缺少的图标大家自行替换吧

第二步创建MotionScene scene_youtube.xml

授人以鱼不如授人以渔,最后简单介绍一下关键帧

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(译文)

(每天学习一点点.每天进步一点点,分享不宜路过点个赞呀,喜欢的点个关注后续更新不断)