Android開(kāi)發(fā) - 掌握ConstraintLayout（十一）復(fù)雜動(dòng)畫(huà)！如此簡(jiǎn)單！

介紹

本系列我們已經(jīng)介紹了ConstraintLayout的基本用法。學(xué)習(xí)到這里，相信你已經(jīng)熟悉ConstraintLayout的基本使用了，如果你對(duì)它的用法還不了解，建議您先閱讀我之前的文章。

使用ConstraintLayout創(chuàng)建動(dòng)畫(huà)的基本思想是我們創(chuàng)建兩個(gè)不同的布局，每個(gè)布局有其不同的約束，從而我們使用其動(dòng)畫(huà)框架來(lái)進(jìn)行兩種約束之間的切換。

傳統(tǒng)動(dòng)畫(huà)

以往在我們創(chuàng)建簡(jiǎn)單動(dòng)畫(huà)時(shí)，通常我們會(huì)使用

• 視圖動(dòng)畫(huà)（View Animation）
• 幀動(dòng)畫(huà)（Drawable Animation）
• 屬性動(dòng)畫(huà)（Property Animation）

這三種在我們制作簡(jiǎn)單動(dòng)畫(huà)時(shí)非常簡(jiǎn)單和方便，特別是當(dāng)我們只對(duì)某個(gè)特定的View制作動(dòng)畫(huà)時(shí)。但是當(dāng)我們需要制作復(fù)雜動(dòng)畫(huà)時(shí)，特別是整個(gè)頁(yè)面多個(gè)View同時(shí)執(zhí)行動(dòng)畫(huà)時(shí)，這幾種方式就顯得力不從心了，需要大量的工作。

當(dāng)然還有一種方式就是使用轉(zhuǎn)場(chǎng)動(dòng)畫(huà)框架(Transition Framework)，通過(guò)共享元素(Shared Element)制作動(dòng)畫(huà)，這個(gè)后面我們也會(huì)提到。

ConstraintLayout動(dòng)畫(huà)

我們這里通過(guò)一個(gè)示例來(lái)說(shuō)明ConstraintLayout動(dòng)畫(huà)的創(chuàng)建。

1. 首先，我們創(chuàng)建第一個(gè)布局（activity_main.xml），它是是我們的初始布局。

• 效果：
  

• 代碼：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/cl_root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="評(píng)分：8.3分"
        app:layout_constraintStart_toStartOf="@+id/tv_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_name" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="8dp"
        android:text="無(wú)敵破壞王2"
        android:textColor="#282828"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@+id/iv_poster"
        app:layout_constraintTop_toTopOf="@+id/iv_poster" />

    <ImageView
        android:id="@+id/iv_poster"
        android:layout_width="120dp"
        android:layout_height="160dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/wreck_it_ralph" />

</android.support.constraint.ConstraintLayout>

我們的初始布局創(chuàng)建完畢后，我們需要?jiǎng)?chuàng)建一個(gè)動(dòng)畫(huà)結(jié)束布局，讓動(dòng)畫(huà)框架知道執(zhí)行完動(dòng)畫(huà)后布局是什么樣的。

2. 創(chuàng)建動(dòng)畫(huà)結(jié)束布局（activity_main_detail.xml）。

• 效果：

• 代碼:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/cl_root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="52dp"
        android:text="評(píng)分：8.3分"
        app:layout_constraintBottom_toBottomOf="@+id/tv_name"
        app:layout_constraintStart_toEndOf="@+id/tv_name"
        app:layout_constraintTop_toTopOf="@+id/tv_name"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:text="無(wú)敵破壞王2"
        android:textColor="#282828"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv_poster"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="65dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/wreck_it_ralph" />

</android.support.constraint.ConstraintLayout>

這個(gè)頁(yè)面是我們執(zhí)行動(dòng)畫(huà)結(jié)束后的樣子。那么開(kāi)始和結(jié)束的布局我們都有了，我們?cè)鯓訄?zhí)行動(dòng)畫(huà)，讓兩個(gè)布局之間進(jìn)行過(guò)渡呢？

答案是通過(guò)Android的TransitionManager來(lái)執(zhí)行。

3. 使用TransitionManager來(lái)執(zhí)行動(dòng)畫(huà)

• 代碼（MainActivity.java）

package cn.examplecode.constraintlayoutdemo;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;

public class MainActivity extends AppCompatActivity {

    private ConstraintLayout mConstraintLayout;
    private boolean mIsDetail;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mConstraintLayout = findViewById(R.id.cl_root);

        ConstraintSet constraintSet1 = new ConstraintSet();
        ConstraintSet constraintSet2 = new ConstraintSet();

        constraintSet2.clone(this, R.layout.activity_main_detail);
        constraintSet1.clone(mConstraintLayout);

        findViewById(R.id.iv_poster).setOnClickListener(v -> {
            TransitionManager.beginDelayedTransition(mConstraintLayout);
            if (!mIsDetail) {
                constraintSet2.applyTo(mConstraintLayout);
                mIsDetail = true;
            } else {
                constraintSet1.applyTo(mConstraintLayout);
                mIsDetail = false;
            }
        });
    }
}

我們來(lái)解釋以上代碼。
首先我們發(fā)現(xiàn)使用了這個(gè)類(lèi)ConstraintSet，它是一個(gè)約束集合，保存了布局上所有元素的約束，因?yàn)槲覀冃枰趦蓚€(gè)布局之間執(zhí)行動(dòng)畫(huà)，所以我們需要?jiǎng)?chuàng)建兩個(gè)約束集合的對(duì)象。

ConstraintSet constraintSet1 = new ConstraintSet();
ConstraintSet constraintSet2 = new ConstraintSet();

創(chuàng)建完約束集對(duì)象后，我們需要設(shè)置每個(gè)約束集對(duì)應(yīng)的約束：

constraintSet2.clone(this, R.layout.activity_main_detail);
constraintSet1.clone(mConstraintLayout);

這里我們將當(dāng)前布局的約束應(yīng)用到constraintSet1中，將目標(biāo)布局的約束應(yīng)用到constraintSet2中。

接下來(lái)我們執(zhí)行動(dòng)畫(huà)：

TransitionManager.beginDelayedTransition(mConstraintLayout);
# 從constraintSet1過(guò)渡到constraintSet2
constraintSet2.applyTo(mConstraintLayout);

# 從constraintSet2過(guò)渡到constraintSet1
constraintSet1.applyTo(mConstraintLayout);

最終效果：

只需簡(jiǎn)單的幾行代碼，就可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)了！當(dāng)然本示例為了說(shuō)明ConstraintLayout動(dòng)畫(huà)的創(chuàng)建方法，布局比較簡(jiǎn)單。
如果需要復(fù)雜布局的動(dòng)畫(huà)切換，這種方式的優(yōu)勢(shì)就非常明顯。如果使用傳統(tǒng)創(chuàng)建動(dòng)畫(huà)方法，則有可能需要大量的時(shí)間和代碼來(lái)實(shí)現(xiàn)。

問(wèn)題探討

為什么需要?jiǎng)?chuàng)建兩個(gè)布局文件？

可能有人認(rèn)為創(chuàng)建兩個(gè)布局文件不是一個(gè)好的方式，兩個(gè)布局中存在重復(fù)的代碼，這樣好嗎？

實(shí)際上可能并沒(méi)有你想象的那么不好，創(chuàng)建兩個(gè)布局文件的目的只是讓動(dòng)畫(huà)框架知道不同的約束而已，然后將不同的約束應(yīng)用在過(guò)渡動(dòng)畫(huà)中，你可以在布局中把與約束無(wú)關(guān)的屬性去掉。
如果你實(shí)在不喜歡創(chuàng)建兩個(gè)布局文件的話，當(dāng)然也可以在代碼中來(lái)描述不同的約束。顯然這樣會(huì)大大增加復(fù)雜度和代碼量。

與使用共享元素動(dòng)畫(huà)(Shared Element)有什么區(qū)別？

使用共享元素動(dòng)畫(huà)當(dāng)然也可以實(shí)現(xiàn)這樣的效果，但是使用共享元素動(dòng)畫(huà)你也需要?jiǎng)?chuàng)建兩個(gè)布局，而且關(guān)鍵的不同是：
使用ConstraintLayout執(zhí)行動(dòng)畫(huà)時(shí)，動(dòng)畫(huà)前后的View是同一個(gè)View對(duì)象。
而使用共享元素動(dòng)畫(huà)時(shí)動(dòng)畫(huà)前后的View是兩個(gè)不同的View對(duì)象！

系列總結(jié)

本篇是本系列博客《掌握ConstraintLayout》的最后一篇。通過(guò)本系列的學(xué)習(xí)，相信你已經(jīng)掌握了使用ConstraintLayout的大部分功能。

在實(shí)際開(kāi)發(fā)的過(guò)程中，使用ConstraintLayout會(huì)使開(kāi)發(fā)速度有不少的提升，再結(jié)合我的另一個(gè)系列《使用Data Binding》，會(huì)大大減少開(kāi)發(fā)Android時(shí)的工作量，達(dá)到事半功倍的效果，提升生產(chǎn)力！

謝謝你的支持！

如有更多疑問(wèn)，請(qǐng)參考我的其它Android相關(guān)博客：我的博客地址