《译文》MotionLayout系列-2

最新推荐文章于 2022-10-24 11:36:19 发布
最新推荐文章于 2022-10-24 11:36:19 发布
阅读量195 收藏
点赞数
分类专栏： Android 文章标签： android
原文链接：https://medium.com/google-developers/introduction-to-motionlayout-part-ii-a31acc084f59
版权

在本文中，我们将通过各种示例继续介绍MotionLayout的基本功能，介绍自定义属性插值，图像操作和关键帧。

  • 示例03：引入自定义属性
  • 例04：使用ImageFilterView（1/2）：交叉淡入淡出
  • 例05：使用ImageFilterView（2/2）：饱和度
  • 关键帧
  • 例06：关键帧（1/2）：位置
  • 示例07：关键帧（2/2）：属性
  • 结论

示例03：自定义属性

在第一部分中，我们最后创建了一个自包含的MotionLayout MotionScene。我们可以利用这一点来指定那些属性的过渡不是仅涉及位置。
自定义属性
实际上，最初ConstraintSet只封装了布局规则; 但是对于更丰富的动画，我们经常需要转换其他内容（例如，背景颜色）。在ConstraintLayout 2.0中，ConstraintSet还可以存储自定义属性状态。假设我们想要以下动作，我们视图的背景会改变颜色：
颜色变换
以前，您必须在代码中处理此问题。现在，您可以直接在XML中指定属性：

<Constraint 
    android：id =“@ + id / button”...> 
    < CustomAttribute 
        motion：attributeName =“backgroundColor” 
        motion：customColorValue =“＃D81​​B60”/> 
</ Constraint>

这是上面动画的修改后的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">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:interpolator="linear">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#D81B60" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#9999FF" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

scene_03.xml

CustomAttribute使用attributeName指定，该属性需要匹配对象的getter /
setter方法，以便：

  • getter ? getName例如getBackgroundColor）
  • setter ? setName例如setBackgroundColor）

还需要指定值类型：

  • customColorValue
  • customIntegerValue
  • customFloatValue
  • customStringValue
  • customDimension
  • customBoolean

最后，在定义自定义属性时，您需要在开始和结束ConstraintSet中定义它。

示例04：ImageFilterView（1/2）

在处理复杂的过渡时，通常需要对图像进行一些操作，并对它们进行动画处理。ConstraintLayout 2.0带来了一个名为ImageFilterView的小实用程序类（它是AppCompatImageView的子类），可以轻松实现这一点。
让我们举两个图像之间的简单交叉淡入淡出，例如：
图片示例
我们首先需要使用图像创建一个MotionLayout文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    app:layoutDescription="@xml/scene_04"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.utils.ImageFilterView
        android:id="@+id/image"
        android:background="@color/colorAccent"
        android:src="@drawable/roard"
        app:altSrc="@drawable/hoford"
        android:layout_width="64dp"
        android:layout_height="64dp"/>

</android.support.constraint.motion.MotionLayout>

motion_04_imagefilter.xml

与普通ImageView的主要区别在于altSrc属性：

<android.support.constraint.image.ImageFilterView
    android:id="@+id/image"
...
    android:src="@drawable/roard"
    app:altSrc="@drawable/hoford"/>

MotionScene文件将仅在crossfade属性上应用自定义属性：

<?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">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:interpolator="linear">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@+id/image"
            motion:touchAnchorSide="right" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customFloatValue="0" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customFloatValue="1" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

scene_04.xml

示例05：ImageFilterView（2/2）

  • 饱和度：0 =灰度，1 =原始，2 =超饱和
  • 对比度：1 =不变，0 =灰色，2 =高对比度
  • 温暖：1 =中性，2 =温暖（红色），0.5 =冷（蓝色）
  • 交叉淡化（带app:altSrc）

这是另一个展示如何使用图像饱和度的示例：
这个csdn不知道

只需使用自定义属性即可指定饱和度：

<CustomAttribute
    motion:attributeName="saturation"
    motion:customFloatValue="1" />

这是我们在这个例子中使用的MotionLayout文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    app:layoutDescription="@xml/scene_05"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.utils.ImageFilterView
        android:id="@+id/image"
        android:src="@drawable/sunset2"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

</android.support.constraint.motion.MotionLayout>

motion_05_imagefilter.xml

这是相应的场景文件：

<?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">

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@+id/image"
            motion:touchAnchorSide="top"
            motion:dragDirection="dragUp" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="saturation"
                motion:customFloatValue="1" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent">
            <CustomAttribute
                motion:attributeName="saturation"
                motion:customFloatValue="0" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

关键帧

MotionLayout的一般思想是“ 静止状态 ”实现为ConstraintSets。这样，我们就知道生成的布局将正确地适应不同的屏幕尺寸：实质上，MotionLayout的行为就像典型的ConstraintLayout。
在某些情况下，您可能希望拥有一个中间状态 - 要经历的状态，而不是要留下的状态。您可以指定两个以上的ConstraintSets，但更轻量级的方法是使用关键帧。

关键帧可以应用于位置或属性值; 它们基本上允许您指定转换期间某个时间点的更改。

例如，您可能希望在转换的25％处，窗口小部件应该变为红色。或者在转换的50％时，小部件应该向上移动。

例06：关键帧，位置

有几种方法（pathRelative，deltaRelative，parentRelative）你可以设置一个位置关键帧（KeyPosition），我们将在详细覆盖第四部分本系列。
key position
作为位置关键帧的快速介绍，以下是如何指定在总转换的50％处发生的中间位置，位于屏幕的25％：

<Transition ...>
    <KeyFrameSet>
        <KeyPosition
            motion:keyPositionType="parentRelative"
            motion:percentY="0.25"
            motion:framePosition="50"
            motion:target="@+id/button"/>
    </KeyFrameSet>
</Transition>

由此产生的移动将是：
keyposition

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    app:layoutDescription="@xml/scene_06"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/button"
        android:background="@color/colorAccent"
        android:layout_width="64dp"
        android:layout_height="64dp" />

</android.support.constraint.motion.MotionLayout>

scene_06.xml

MotionScene文件与我们之前看到的文件非常相似，只增加了一个KeyPosition元素：

<?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">

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000"
        motion:interpolator="linear">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right"
            motion:dragDirection="dragRight" />

        <KeyFrameSet>
            <KeyPosition
                motion:keyPositionType="parentRelative"
                motion:percentY="0.25"
                motion:framePosition="50"
                motion:target="@+id/button"/>
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#D81B60"/>
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#9999FF"/>
        </Constraint>
    </ConstraintSet>

</MotionScene>

示例07：关键帧，属性

以与定位关键帧类似的方式，您可以在转换中的特定点指定属性值（使用KeyAttribute）。
keyattribute
例如，我们可能希望指定我们在相同的50％位置操作的对象的比例和旋转，以获得以下转换：
keyattributedemo
这可以通过在以下内容中添加KeyAttribute元素来实现KeyFrameSet：

<KeyFrameSet>
    <KeyAttribute
        android:scaleX="2"
        android:scaleY="2"
        android:rotation="-45"
        motion:framePosition="50"
        motion:target="@id/button" />
</KeyFrameSet>

该MotionLayout文件与上一个示例中的MotionScene文件相同，文件的唯一区别是添加KeyAttribute：

<?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">

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000"
        motion:interpolator="linear">
        <OnSwipe
            motion:touchAnchorId="@+id/button"
            motion:touchAnchorSide="right"
            motion:dragDirection="dragRight" />

        <KeyFrameSet>
            <KeyAttribute
                android:scaleX="2"
                android:scaleY="2"
                android:rotation="-45"
                motion:framePosition="50"
                motion:target="@id/button" />
            <KeyPosition
                motion:keyPositionType="screenRelative"
                motion:percentY="0.2"
                motion:framePosition="50"
                motion:target="@id/button"/>
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#D81B60"/>
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#9999FF"/>
        </Constraint>
    </ConstraintSet>

</MotionScene>

结论

第二篇文章介绍了MotionLayout的更高级功能，给出了如何利用自定义属性和关键帧创建更具吸引力的动画的示例。

代码地址

林雨-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MotionLayout详解-基础使用
蜗牛快跑
10-24 1500
MotionLayout ConstraitLayout子类。在2.0时代添加，只要是动画。 涉及的东西有： MotionScene Transition OnSwipe OnClick KeyFrameSet ConstraintSet 位置res-xml，添加（例如,scene_youtube.xml） MotionScene 作为根目录 Transition 作为动画控制点。一般里面会有2个ConstraintSet 。分别控制动画开始状态和结束状态 Transition con
MotionLayout--在可视化编辑器中实现动画
qq_46653910的博客
07-26 494
在可视化编辑器中实现动画
Motion Editor (四) 文字，图片，复杂
Hanyang Li的专栏
10-24 337
Motion Editor (四) 文字，图片，复杂
「译」MotionLayout 介绍 (part II)
XiaoMu_Mu的博客
12-04 246
原文链接: Introduction to MotionLayout (part II) 前言 这是系列文章「MotionLayout 介绍」的 part II。阅读之前请先查看 part I! (中文点这) 在文本中，我们将继续通过各种示例揭露基本的 MotionLayout 特性，介绍自定义属性 (custom attribute)、图像操作 (image operations) 和关键帧 (keyframes)。 示例 03: 自定义属性 (Custom attribute) 在part I
Android新控件MotionLayout介绍（二）
成长的烧年
05-16 2975
文章目录自定义属性ImageFilterView (1/2)ImageFilterView (2/2)关键帧Keyframe (1/2), 位置Keyframe (1/2), 属性结论 有关 Android新控件MotionLayout介绍（一）。今天主要是来看第二章。 主要是通过一系列包括自定义属性、图片操作和关键帧来描绘一下MotionLayout的特征。 原文地址为：https://me...
译文_IEC-61851-23-2014
08-25
知识点2：IEC的职责和作用 IEC是一个全球领先的组织，负责制定和发布所有电气、电子和相关技术的国际标准。IEC的作用是确保电气和电子产品的安全性、可靠性和兼容性。 知识点3：电动汽车传导充电系统的技术要求 IEC...
译文_IEC-61851-1-2017 (1)
08-25
知识点2: 版本3.0 2017-02国际标准 本译文是基于IEC 61851-1:2017的国际标准，version 3.0，发布于2017年02月。该标准规定了电动汽车传导充电系统的一般要求。 知识点3: 电动汽车传导充电系统 电动汽车传导充电...
译文_High-Speed Tracking with Kernelized Correlation Filters.rar
08-22
大多数现代跟踪器的核心部件是识别分类器，其任务是区分目标和周围环境。为了应对自然图像的变化，这个分类器通常使用翻译和缩放的样本补丁进行训练。这样的样本集充满了冗余——任何重叠的像素都被限制为相同的。...
2016职称英语卫生C级阅读理解文章及译文(1-16篇).doc
10-12
2016职称英语卫生C级阅读理解文章及译文(1-16篇).doc
MotionLayout 常用属性
日积月累
07-27 857
1、基本使用 了解 开始状态设置 给view添加属性 结束状态设置 和开始状态设置一样 效果设置 添加关键帧（KeyFrameSet） KeyPosition:（位置关键帧） parentRelative：（简单） 是相对于母体坐标 左上（0,0） 右下（1,1） deltaRelative：（复杂） 根据起点到终点的 差值 作为xy轴 pathRelative：（复杂）在起点到终点拉一条线，起点0终点1 KeyCycle: 里面包含很多 周期 函数 squ
MotionLayout动画
反魂蝶五分的博客
07-04 3837
在今年的Google I/O 上 Google 开发者展示了这么一段视频 What’s New in ConstraintLayout (Google I/O’19) （视频在youtube上，需要翻墙），截了其中一段做了个gif图 图中动画使用ConstraintLayout 2.0里的MotionLayout完成。 ConstraintLayout 2.0现在还是beta版，不过已经可以实行...
MotionLayout 基础教程
XiaoMu_Mu的博客
12-04 1004
阅读说明： 本文假设读者已掌握如何使用 ConstraintLayout。 本文是一篇 MotionLayout 基础教程，如您已了解如何使用 MotionLayout，本文可能对您帮助不大。 本教程共有两篇文章，这是第一篇，另一篇请点击 这里。 建议读者跟随本文一起动手操作，如您现在不方便，建议稍后阅读。 本文基于 ConstraintLayout 2.0.0-alpha4 版本编写，建议读者优先使用这一版本。 由于 MotionLayout 官方文档不全，有些知识点是根据笔者自己的理解总结的
Android 动画之 Motion Editor / SVGA / Lottie
章鱼哥的博客
06-30 1800
Android 动画 SVGA 、 Lottie 与 Motion Editor 目前在直播时，我们会看到很多非常 酷炫的动画，通常会使用 Lottie 或者 SVGA 格式输出。 Lottie 、 SVGA是对图片内容进行动画； 两种各有优劣，lottie包含图片会很大，但能够在mac上支持ae的图层颜色渐变（svga不支持） (1) 相关的网站 用过的都说好，SVGA官网：https://svga.io/index.html 图片压缩网站：https://tinypng.com/
Android ConstraintLayout2.0 过度动画MotionLayout MotionScene2
FlyPig_Vip的博客
08-19 504
然后是变化时进行背景色的改变 <?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"&gt...
用MotionLayout实现这些不可思议的效果
郭霖
11-30 1383
/ 今日科技快讯 /近日，据外媒报道，自从研发电动汽车的计划取消后，家电品牌戴森正对其产品路线图进行重组，承诺在人工智能、机器人和能源储存等领域进行投资。该公司表示，计划在未来5...
Android MotionLayout详解
yingaizhu的博客
07-22 2569
文章目录一、前言二、使用入门2.1 引入依赖2.2 创建 MotionLayout 布局文件2.3 创建 MotionScene 一、前言     MotionLayout 其实是一种布局类型，可帮助您管理动画。MotionLayout 是 ConstraintLayout的子类（关于 ConstraintLayout 的介绍可以参考: Android ConstraintLayout从入门到精通），因此， MotionLayout 拥有者 ConstraintLay
ConstraintLayout&MotionLayout
xydzjnq的博客
09-07 1211
最近编辑于2018年9月7日 ConstraintLayout 顾名思义，约束布局———在constraintLayout下的子控件都会受到外来的“力”，从而确定该子控件的位置。 一、constraintLayout来自支持库，所以要想使用先要在gradle中引入 repositories { google() } dependencies { implementati...
iec62595-2-3译文
最新发布
01-05
IEC 62595-2-3是一个国际电工委员会（IEC）颁布的标准，涉及电子产品的可持续性和环境友好设计。 IEC 62595-2-3标准主要关注电子产品的能效要求和评估方法。它为各种类型的电子设备，如电视、电冰箱、空调等，制定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值