MotionLayout和ConstraintLayout的Demo
MotionLayout ConstraintLayout
发布日期:   2019-04-27
文章字数:   1.2k
阅读时长:   4 分
阅读次数:  

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

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

    QQ视频20190425102021.gif

QQ视频20190425102004.gif

QQ视频20190425101839.gif

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

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

image.png

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

赏

  转载请注明: 仕明同学 MotionLayout和ConstraintLayout的Demo

 上一篇
Vue.js学习No.5(WebPack配置二) Vue.js学习No.5(WebPack配置二)
欢迎关注我的公众号 学习的内容如下 开始 当我们需要频繁的修改main.js 我们每次都需要去构建，这样显得很麻烦，webpack .\src\main.js -o .\dist\bundle.js，通过配置文件去配置每次的打包入口
2019-06-09 Shiming_Li
WebPack
下一篇 
Vue.js学习No.5 Vue.js学习No.5
欢迎关注我的公众号 学习的内容如下 开始 npm的使用npm安装一些包会出现问题，很可能问题的原因是我们的网络。npm 的包的安装源有挺多，默认是npm，如果在国内，我们可以把安装源切换成taobao，这样安装的速度会快很多。 1
2019-04-24 Shiming_Li
WebPack
  目录