「譯」MotionLayout 介紹 (part II)

高傑發表於2019-03-04

原文連結: Introduction to MotionLayout (part II)

前言

這是系列文章「MotionLayout 介紹」的 part II。閱讀之前請先檢視 part I! (中文點這)

在文字中，我們將繼續通過各種示例揭露基本的 MotionLayout 特性，介紹自定義屬性 (custom attribute)、影像操作 (image operations) 和關鍵幀 (keyframes)。

示例 03: 自定義屬性 (Custom attribute)

在part I的最後，我們建立了一個引用MotionScene的MotionLayout（self-contained MotionScene）。我們可以進一步利用它，來實現其他屬性的過渡。

事實上，最初的ConstraintSet只封裝了佈局規則；但是為了豐富動畫效果，我們經常需要做些別的事（比如背景顏色）。在 ConstraintLayout 2.0，ConstraintSet也可以儲存自定義屬性狀態。檢視下方動畫，背景顏色跟著移動過程發生了改變。

以前，你不得不在程式碼中處理此問題。現在，你可以直接通過 XML 指定屬性：

<Constraint
    android:id="@+id/button" ...>
    <CustomAttribute
        motion:attributeName="backgroundColor"
        motion:customColorValue="#D81B60"/>
</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>
複製程式碼

自定義屬性是用屬性名字 (attributeName) 來指定的，屬性名字需要和物件中的getter/setter方法對應：

getter: getName (e.g. getBackgroundColor)
setter: setName (e.g. setBackgroundColor)

另外還需要指定屬性值的型別：

customColorValue
customIntegerValue
customFloatValue
customStringValue
customDimension
customBoolean

最後當我們定義一個自定義屬性，你需要同時定義開始 (start) 和結束 (end) 的ConstraintSet

示例 04 : 影像濾鏡(ImageFilterView)(1/2)

當我們處理複雜的過渡時，常常需要對影像進行一些操作，並且對他們進行動畫處理。ConstraintLayout2.0 引入了名為 ImageFilterView （繼承與AppCompatImageView）的一個有用的工具類來輕鬆實現這一點。

下面是我們在兩張圖片之間做的淡入淡出 (cross-fade) 效果：

首先我們需要建立一個包含 ImageFilterView 的 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>
複製程式碼

它與 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>
複製程式碼

示例 05 : 影像濾鏡(ImageFilterView)(1/2)

ImageFilterView 也提供了更多的功能:

飽和度 saturation : 0 = grayscale, 1 = original, 2 = hyper saturated
對比度 contrast : 1 = unchanged, 0 = gray, 2 = high contrast
色溫 warmth : 1 = neutral, 2 = warm (red tint), 0.5 = cold (blue tint)
淡入淡出 crossfade (with app:altSrc)

這裡有另外一個例子顯示怎麼使用濾鏡飽和度：

簡單的指定自定義屬性就可以操作飽和度：

<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>
複製程式碼

這裡是對應的場景（Scene）檔案：

<?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>
複製程式碼

關鍵幀(Keyframes)

大多數情況下，MotionLayout 是使用“靜止狀態” (resting states) 的 ConstraintSets 實現的。這種方式下，我們知道最終的佈局結果將適應不同的螢幕尺寸：從本質上來說，MotionLayout的表現像一個典型的 ConstraintLayout。

原文：The general idea for MotionLayout is that “resting states” are implemented as ConstraintSets. This way, we know that the resulting layouts will correctly adapt to different screen sizes: essentially, MotionLayout will behave like a typical ConstraintLayout.

在某些情況，你可能希望有一箇中間狀態——一個要經過的狀態(a state to go through)，而不是要停留的狀態(not a state to stay in)。當然你可以指定兩個以上的 ConstraintSets 來解決，但是更好的做法是使用 Keyframes。

關鍵幀可以應用於位置或屬性值。它們主要讓你在轉換期間指定一個時間節點上的改變。

舉個例子，你可能想讓一個控制元件在過渡進行到 25% 的時候轉換變成紅色。或者在過渡中的 50% 時，改為向上移動。

示例 06 : 關鍵幀 (1/2), 座標(postion)

有多種設定位置關鍵幀 (KeyPosition) 的方法 (pathRelative、deltaRelative、parentRelative)，我們將在本系列的第4部分詳細介紹。

簡單介紹位置關鍵幀 (position keyframes)，這裡指定了在過渡進行到 50% 的時候，位置在螢幕高度的 25%處。

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

最終的效果如下：

和以往一樣，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_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>
複製程式碼

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>
複製程式碼

Example 07 : 關鍵幀 (2/2), 屬性(attribute)

類似位置關鍵幀，你可以在過渡中的特定的指定屬性值(使用KeyAttribute)。

例如，我們可能需要操縱物件在 50% 位置的時候，指定執行縮放和旋轉，效果如下：

這可以通過在KeyFrameSet中新增一個KeyAttribute 元素來實現:

<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 更高階的功能，給出瞭如何利用自定義屬性和關鍵幀建立更引入注目的動畫示例。

你可以在ConstraintLayout examples github repository檢視這些示例的原始碼。

在本系列文章中還有更多內容:

Introduction to MotionLayout (part I)
Custom attributes, image transitions, keyframes (part II)
Taking advantage of MotionLayout in your existing layouts (CoordinatorLayout, DrawerLayout, ViewPager) (part III)
All about Keyframes! (part IV)
MotionLayout as a choreographer of root layout
Nesting MotionLayout & other Views
MotionLayout with fragments

「譯」MotionLayout介紹 (part III)
2019-03-04
「譯」 MotionLayout 介紹 (Part IV) 深入理解關鍵幀
2018-12-25
[譯] part 20: golang 併發介紹
2019-04-01
Golang
[譯] React Hook 介紹 — React 系列教程 Part 1
2018-11-08
ReactHook
[譯]LINQ TO SQL 介紹(定義資料模型類) – Part.2
2021-09-09
SQL模型
[譯]介紹一下漸進式 Web App(離線) - Part 1
2017-12-14
WebAPP
Prepack 介紹（譯）
2018-12-25
前端測試：Part1 （介紹）
2019-02-27
前端
[譯]介紹一下漸進式 Web App(訊息推送) – Part 3
2019-03-01
WebAPP
[譯]介紹一下漸進式 Web App(訊息推送) - Part 3
2017-12-18
WebAPP
[譯]介紹一下漸進式 Web App(即時載入) – Part 2
2019-02-25
WebAPP
[譯]介紹一下漸進式 Web App(即時載入) - Part 2
2017-12-15
WebAPP
[譯] React Profiler 介紹
2019-03-04
React
【譯】介紹JSX
2016-07-12
JS
Business Objects Query Builder – Part II
2013-06-17
ObjectUI
Delphi物件模型(Part II) (轉)
2007-10-14
物件模型
Vue webpack 介紹翻譯
2018-03-13
VueWeb
【譯文】OAuth 2 介紹
2017-08-31
OAuth
expat介紹文件翻譯
2012-03-22
Asp.Net 構架(HttpModule 介紹) - Part.3
2021-09-09
ASP.NETHTTP
【譯】2分鐘介紹Rx
2018-09-12
[譯] Chrome 71 新特性介紹
2018-12-12
Chrome
[譯] 谷歌：Wake Lock API 介紹
2018-12-23
谷歌API
.NET 編譯器（”Roslyn“）介紹
2014-11-12
編譯ROS
【做題記錄】ds合集 Part II
2024-10-18
Structure of Linux Kernel Device Driver(Part II)
2024-07-16
StructLinuxdev
MotionLayout 基礎教程
2019-04-10
[譯] Laravel 5 之美 – 1) 介紹
2019-02-16
Laravel
NEO Python編譯器介紹
2018-12-11
Python編譯
java命令直譯器介紹-bsh
2014-04-22
Java
前端測試：Part II （單元測試）
2018-06-27
前端
oracle administrator's guide Part II
2015-03-28
OracleGUIIDE
On Designing Good Libraries -- Part II (轉)
2008-01-31
Go
MySQL 複製全解析 Part 1 實驗環境介紹
2019-07-16
MySql
測試你的前端程式碼 - part1（介紹篇）
2017-03-24
前端
Selenium Part1：框架搭建與selenium框架介紹
2018-05-07
框架
測試你的前端程式碼 – part1（介紹篇）
2017-04-21
前端
[譯] 介紹適用於 iOS 的 AloeStackView
2018-11-19
iOSView