MotionLayout和ConstraintLayout的De

• 欢迎关注我的公众号
  公众号

• App完成的效果图
  QQ视频20190425102024.gif

QQ视频20190425102021.gif QQ视频20190425102004.gif QQ视频20190425101839.gif

• 欢迎下载体验

  
  image.png

• 本文代码的地址：AndroidXMotionLayoutDemo（求star）

MotionLayout是什么？

image.png

• MotionLayout 继承ConstraintLayout 实现 NestedScrollingParent2 ，是谷歌的一个新的Layout！能实现上面有趣的效果

• 1、基本示例1/2 左右移动 ，然后慢慢的滚回到远点

  • 使用引用的ConstraintLayout文件的基本运动示
    设置MotionLayout的app:layoutDescription="@xml/scene_01" 左右移动 ，然后慢慢的滚回到远点
    image.png

• 2、基本示例2/2 左右移动，另外的一种的实现的方式 ，可以改变小球的大小

  • 使用在MotionScene文件中定义的约束集的基本运动示例
    tools:layout_editor_absoluteX="147dp" 表示此控件在布局中X轴的绝对坐标点。 tools:layout_editor_absoluteY="230dp" 表示此控件在布局中X轴的绝对坐标点。

    
    image.png

• 3、自定义属性
  * 左右移动，颜色渐变，大小渐变，在中间，我个人感觉是两个颜色的重叠，注意在布局中的颜色其实设置没有什么作用
  image.png

image.png image.png

• 4、ImageFilterView1/2

  • 使用IamgeFilterView 两张图片的重合，左右滑动，可以不断的切换图片 在两张图片之间做的淡入淡出 (cross-fade) 效果

    
    image.png

image.png image.png

• 5、ImageFilterView2/2

  • 显示图像饱和度转换（使用ml的imagefilterview+自定义属性）

    
    image.png
    image.png

• Saturation 饱和度的意思 图片在上下位移的时候 ，动态改变饱和度 motion:attributeName="Saturation" 从1变为0

• 什么是图像的饱和度？饱和度指的是图像的颜色的浓度，饱和度越高，颜色越饱满，饱和度越低，颜色就会显示的陈旧和惨淡，饱和度为0，图像就是灰色的图像

• 6、关键帧位置（1/3）

  • 使用简单的关键帧更改插值运动

    
    image.png
    image.png

• 7、关键帧插值（2/3）
  • 更复杂的关键帧，添加旋转插值,加上了自身的旋转

image.png
image.png image.png

• 8、关键帧周期（3/3）

  • 关键帧 使用了抛物线的轨迹

    
    image.png
    image.png

• 9、CoordinatorLayout示例（1/3）

  • 使用motionlayout+appbarlayout的基本示例

    
    image.png

  • CollapsibleToolbar 是把位移的监听 直接放到自己的类来了，可以很方便的节约性能，这种方式定义自定义控件有很好的效果

    
    image.png

• 10、CoordinatorLayout示例示例（2/3
  • 用多个元素和视差背景替换appbarlayout的稍复杂的motionlayout示例

  • app:fontFamily="cursive" 字体的设置
    layout_constraintBaseline_toBaselineOf 我个人理解就是这个文字要和 label 这一行在同一行: layout_constraint（本组件的部位）_to（建立连接的组件部位）Of：（建立连接的id）

    
    image.png

• 11、CoordinatorLayout示例3/3

  • 另一个 AppBarLayout 替换示例

    
    image.png
    image.png

• 12、drawerlayout示例（1/2）

  • 抽屉布局 记得往右拉动，一个很复杂的布局动画 牛逼

    
    image.png
    image.png

• 13、drawerlayout示例（2/2）

  • 这个动画做的不太一样，从旋转的方向看不一样

    
    image.png

• 14、侧面板示例
  • 侧面板，与motionlayout一起实现,侧板的信息栏，这里是可以展示侧边的抽屉框。但是不知道有什么用处 MockView MockView(新特性的布局)

image.png
image.png

• 15、视差示例
  • 就是使用 新的特性控制下，拖拽的效果，背景有个变大的效果

image.png
image.png

• 16、ViewPagerActivit和Viewpager使用的实例
  image.png
  image.png

image.png

• 17、ViewPager Lottie Example
  • lottie是一个面向Android和iOS的移动库，它解析导出为带有bodymovin的json格式的Adobe After Effects动画，并在移动设备上进行本地渲染！
  • 第一次，设计师可以创造和发送美丽的动画，而无需一个工程师刻意用手重新创造。他们说一张图片值1000个字，所以这里有13000个：

image.png image.png

• 18、复杂运动示例（1/4）

  • 其实就是给一个图形花了一个对角线的东西

    
    image.png

• 19、复杂运动示例（2/4）
  • 配合着 FloatingActionButton 使用 这个控件的动画是由谁来控制的呢？是由secen_18 控制的

image.png

• 20、复杂运动示例（3/4）
  • 高级协调布局类似行为（添加FAB），视图调整了大小
  • 配合着 FloatingActionButton 使用 视图发生了放大的效果

• 21、复杂运动示例（4/4）"
  • 高级同步reval运动+助手（反弹），这个动画比较炫酷哦

image.png

• 22、Fragment转换示例（1/2）
  • 这种新的特性我一定要利用起来啊

image.png image.png

• 23、Fragment转换示例（2/2）
  • 使用动画，开启一个fragment 然后这个fragment中有一个list条目，点击这item，开启itemfragment，然后呢，中间这个listFragment就自动关闭了，慢慢的拖动，也可以返回到上一个fragment，下一个使用这个效果，很有意思哦
    谷歌的Demo有两处的错误 ，我提了 issues
    https://github.com/googlesamples/android-ConstraintLayoutExamples/issues/76
    https://github.com/googlesamples/android-ConstraintLayoutExamples/issues/75

• 24、YouTube类运动示例
  • 显示像YouTube一样的过渡示例
  • BottomNavigationView 这个导航栏的使用，复杂的动画效果

image.png

感谢Google官方的Demo给与我的帮助，再次感谢

• Google官方的Demo：Google Samples
• Google官方的Demo：[ConstraintLayoutExamples](https://github.com/googlesamples/android-ConstraintLayoutExamples