建站
咨詢
售后
建站咨詢
新聞中心
介紹
本系列我們已經(jīng)介紹了ConstraintLayout的基本用法。學(xué)習(xí)到這里，相信你已經(jīng)熟悉ConstraintLayout的基本使用了，如果你對它的用法還不了解，建議您先閱讀我之前的文章。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計,雞冠網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:雞冠等地區(qū)。雞冠做網(wǎng)站價格咨詢:13518219792
使用ConstraintLayout創(chuàng)建動畫的基本思想是我們創(chuàng)建兩個不同的布局，每個布局有其不同的約束，從而我們使用其動畫框架來進(jìn)行兩種約束之間的切換。
傳統(tǒng)動畫
以往在我們創(chuàng)建簡單動畫時，通常我們會使用
- 視圖動畫（View Animation）
- 幀動畫（Drawable Animation）
- 屬性動畫（Property Animation）
這三種在我們制作簡單動畫時非常簡單和方便，特別是當(dāng)我們只對某個特定的View制作動畫時。但是當(dāng)我們需要制作復(fù)雜動畫時，特別是整個頁面多個View同時執(zhí)行動畫時，這幾種方式就顯得力不從心了，需要大量的工作。
當(dāng)然還有一種方式就是使用轉(zhuǎn)場動畫框架(Transition Framework)，通過共享元素(Shared Element)制作動畫，這個后面我們也會提到。
ConstraintLayout動畫
我們這里通過一個示例來說明ConstraintLayout動畫的創(chuàng)建。
- 首先，我們創(chuàng)建第一個布局（activity_main.xml），它是是我們的初始布局。
效果：
- 代碼：
我們的初始布局創(chuàng)建完畢后，我們需要創(chuàng)建一個動畫結(jié)束布局，讓動畫框架知道執(zhí)行完動畫后布局是什么樣的。
- 創(chuàng)建動畫結(jié)束布局（activity_main_detail.xml）。
- 效果：
- 代碼:
這個頁面是我們執(zhí)行動畫結(jié)束后的樣子。那么開始和結(jié)束的布局我們都有了，我們怎樣執(zhí)行動畫，讓兩個布局之間進(jìn)行過渡呢？
答案是通過Android的TransitionManager來執(zhí)行。
- 使用TransitionManager來執(zhí)行動畫
- 代碼（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;
}
});
}
}我們來解釋以上代碼。
首先我們發(fā)現(xiàn)使用了這個類ConstraintSet，它是一個約束集合，保存了布局上所有元素的約束，因為我們需要在兩個布局之間執(zhí)行動畫，所以我們需要創(chuàng)建兩個約束集合的對象。
ConstraintSet constraintSet1 = new ConstraintSet();
ConstraintSet constraintSet2 = new ConstraintSet();創(chuàng)建完約束集對象后，我們需要設(shè)置每個約束集對應(yīng)的約束：
constraintSet2.clone(this, R.layout.activity_main_detail);
constraintSet1.clone(mConstraintLayout);這里我們將當(dāng)前布局的約束應(yīng)用到constraintSet1中，將目標(biāo)布局的約束應(yīng)用到constraintSet2中。
接下來我們執(zhí)行動畫：
TransitionManager.beginDelayedTransition(mConstraintLayout);
# 從constraintSet1過渡到constraintSet2
constraintSet2.applyTo(mConstraintLayout);
# 從constraintSet2過渡到constraintSet1
constraintSet1.applyTo(mConstraintLayout);最終效果：
只需簡單的幾行代碼，就可以實現(xiàn)復(fù)雜的動畫了！當(dāng)然本示例為了說明ConstraintLayout動畫的創(chuàng)建方法，布局比較簡單。
如果需要復(fù)雜布局的動畫切換，這種方式的優(yōu)勢就非常明顯。如果使用傳統(tǒng)創(chuàng)建動畫方法，則有可能需要大量的時間和代碼來實現(xiàn)。
問題探討
為什么需要創(chuàng)建兩個布局文件？
可能有人認(rèn)為創(chuàng)建兩個布局文件不是一個好的方式，兩個布局中存在重復(fù)的代碼，這樣好嗎？
實際上可能并沒有你想象的那么不好，創(chuàng)建兩個布局文件的目的只是讓動畫框架知道不同的約束而已，然后將不同的約束應(yīng)用在過渡動畫中，你可以在布局中把與約束無關(guān)的屬性去掉。
如果你實在不喜歡創(chuàng)建兩個布局文件的話，當(dāng)然也可以在代碼中來描述不同的約束。顯然這樣會大大增加復(fù)雜度和代碼量。
與使用共享元素動畫(Shared Element)有什么區(qū)別？
使用共享元素動畫當(dāng)然也可以實現(xiàn)這樣的效果，但是使用共享元素動畫你也需要創(chuàng)建兩個布局，而且關(guān)鍵的不同是：
使用ConstraintLayout執(zhí)行動畫時，動畫前后的View是同一個View對象。
而使用共享元素動畫時動畫前后的View是兩個不同的View對象！
系列總結(jié)
本篇是本系列博客《掌握ConstraintLayout》的最后一篇。通過本系列的學(xué)習(xí)，相信你已經(jīng)掌握了使用ConstraintLayout的大部分功能。
在實際開發(fā)的過程中，使用ConstraintLayout會使開發(fā)速度有不少的提升，再結(jié)合我的另一個系列《使用Data Binding》，會大大減少開發(fā)Android時的工作量，達(dá)到事半功倍的效果，提升生產(chǎn)力！
謝謝你的支持！
如有更多疑問，請參考我的其它Android相關(guān)博客：我的博客地址
名稱欄目：Android開發(fā)-掌握ConstraintLayout（十一）復(fù)雜動畫！如此簡單！
當(dāng)前鏈接：http://fisionsoft.com.cn/article/iigddd.html
