Android5.0Activity的轉場動畫和共享元素

稀飯_發表於2018-06-29
Android動畫

Android5.0之前要修改頁面轉場動畫，只能去寫一些view動畫，然後通過overridePendingTransition方法設定進去。Android5.0之後Activity的出入場動畫總體上來說可以分為兩種，一種就是分解、滑動進入、淡入淡出，另外一種就是共享元素動畫，下面我們分別就這兩種動畫進行說明：

分解：

跳轉程式碼

//建立intnet物件
val intent = Intent(this, TwoActivity::class.java)
//建立一個Builde物件（這裡值傳遞一個上下文物件，系統會自動封裝轉場動畫）
val options = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
//呼叫兩個引數的跳轉方法
startActivity(intent, options)複製程式碼

在twoActivity頁面寫上：

window.enterTransition = Explode().setDuration(2000)
window.exitTransition = Explode().setDuration(2000)複製程式碼

比之前的頁面跳轉多了Bundle引數，然後另外一個頁面設定設定兩行程式碼，就能完成分解的轉場動畫。

滑動進入：

跳轉程式碼

//建立intnet物件
val intent = Intent(this, TwoActivity::class.java)
//建立一個Builde物件（這裡值傳遞一個上下文物件，系統會自動封裝轉場動畫）
val options = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
//呼叫兩個引數的跳轉方法
startActivity(intent, options)複製程式碼

在twoActivity頁面寫上：

window.enterTransition = Slide().setDuration(2000)
window.exitTransition = Slide().setDuration(2000)複製程式碼

淺入淺出效果

跳轉程式碼

//建立intnet物件
val intent = Intent(this, TwoActivity::class.java)
//建立一個Builde物件（這裡值傳遞一個上下文物件，系統會自動封裝轉場動畫）
val options = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
//呼叫兩個引數的跳轉方法
startActivity(intent, options)複製程式碼

在twoActivity頁面寫上：

window.enterTransition = Fade().setDuration(2000)
window.exitTransition = Fade().setDuration(2000)複製程式碼

共享元素

共享單個元素

共享元素和上邊的程式碼不同的是用三個引數的makeSceneTransitionAnimation（x,y,z）方法獲取一個buidle物件，然後傳遞過去，且要跳轉的頁面不需要設定window，只是需要和相關聯的控制元件設定上transitionName屬性值一樣即可，類似程式碼如下：

頁面A佈局：

<ImageView
    android:id="@+id/image"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:transitionName="@string/transition_image" />複製程式碼

頁面A跳轉程式碼

Intent intent = new Intent(this, TwoActivity.class);
intent.putExtra("bigUrl", bigUrl);
intent.putExtra("smallUrl", smallUrl);
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, image, getString(R.string.transition_image));
ActivityCompat.startActivity(MainActivity.this, intent, compat.toBundle());複製程式碼

引數x：是上下文物件

引數y：要共享元素的控制元件物件

引數z：共享元素的transitionName值

對應的頁面B的佈局只需要這樣寫即可

<ImageView
    android:id="@+id/image"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:transitionName="@string/transition_image" />複製程式碼

類似微信的共享元素程式碼：github.com/XiFanYin/Vi…








相關文章