Android中Activity過渡動畫的實例講解

更新時間：2021年11月11日 11:26:26 作者：FranzLiszt1847

在android5.0 以上版本中,google為我們提供了幾種activity切換的過渡動畫,目的是為了讓 activity 切換轉(zhuǎn)場更加美觀,下面這篇文章主要給大家介紹了關(guān)于Android中Activity過渡動畫的相關(guān)資料,需要的朋友可以參考下

前言

以前Activty之間得跳轉(zhuǎn)非常生硬，自Android.5X后，Google對Activity的切換設計更多豐富的動畫效果。

Android 5.X提供了三種Transition類型，具體如下：

✧進入:一個進人的過渡動畫決定Activity中的所有的視圖怎么進入屏幕。

✧退出:一個退出的過渡動畫決定-個Activity 中的所有視圖怎么退出屏幕。

✧共享元素:一個共享元素過渡動畫決定兩個Activities 之間的過渡，怎么共享它們的視圖。

進入和退出動畫效果包括如下三種

✧explode (分解)——從屏幕中間進或出，移動視圖

✧slide (滑動) ——從屏幕邊緣進或出，移動視圖

✧fade(淡出)——通過改變屏幕上的視圖的不透明度達到添加或者移除視圖

共享元素包括:

✧changeBounds——改變目標視圖的布局邊界

✧changeClipBounds——裁剪目標視圖邊界

✧changeTransform——改變目標規(guī)圖的編放比例和能轉(zhuǎn)角度

✧changelmagTransfom——改空目標圖片的大小和縮放比例

分解動畫

效果視頻

解析

分解動畫的進場動畫為上下向中間擠壓，退出動畫為上下向外散開

通過在跳轉(zhuǎn)Activity的時候使用ActivityOptions.makeSceneTransitionAnimation( this ).toBundle()方法進行動畫聲明，

startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this ).toBundle() );

然后再另外一個Activity設置動畫效果，分解動畫進場與退出代碼如下

進場效果代碼如下

getWindow().setEnterTransition( new Explode(  ) );

退場效果代碼如下

getWindow().setExitTransition( new Explode(  ) );

全部代碼在文章底部會全部貼出

滑動動畫

效果視頻

解析

滑動動畫的進場動畫為逐漸向上進入，退出動畫為逐漸向下退出
通過在跳轉(zhuǎn)Activity的時候使用ActivityOptions.makeSceneTransitionAnimation( this ).toBundle()方法進行動畫聲明，

startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this ).toBundle() );

然后再另外一個Activity設置動畫效果，進場與退出代碼如下

進場效果代碼如下

 getWindow().setEnterTransition( new Slide(  ) );

退場效果代碼如下

 getWindow().setExitTransition( new Slide(  ) );

全部代碼在文章底部會全部貼出

淡出動畫

效果視頻

解析

談話動畫的進場動畫為由虛到實，由淺到深，退出動畫則相反
通過在跳轉(zhuǎn)Activity的時候使用ActivityOptions.makeSceneTransitionAnimation( this ).toBundle()方法進行動畫聲明，

startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this ).toBundle() );

然后再另外一個Activity設置動畫效果，進場與退出代碼如下

進場效果代碼如下

 getWindow().setEnterTransition( new Fade(  ) );

退場效果代碼如下

   getWindow().setExitTransition( new Fade(  ) );

全部代碼在文章底部會全部貼出

共享元素

共享單個元素

效果視頻

解析

共享元素需要再XML布局文件中綁定一個相同的名稱，例如再進場的Activity XML布局文件中的 android:transitionName="“屬性為share1，那么再另外一個Activity 的XML布局文件中 android:transitionName=”"屬性也應該設置為share1，保持一致

 <Button
        android:id="@+id/share1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="share1"
        android:transitionName="share1"
        android:layout_gravity="center"/>

設置完布局文件中的屬性之后，我們再Activiy中設置如下代碼，其中share1是我們申明的Button控件的定義share1 = findViewById( R.id.share1 );

其中字符串"share1"為我們在XML文件定義的屬性名稱

startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this, Pair.create( (View)share1,"share1" )).toBundle() );

在第一個Activity中設置完成之后，我們需要在跳轉(zhuǎn)之后的Activity進行接收，如上面所述，需要在XML布局文件中 android:transitionName=""屬性設置為share1，代碼如圖所示

<ImageView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:src="@drawable/sky"
    android:transitionName="share1"
    android:scaleType="fitXY"/>

綁定相同屬性之后，我們就無需在Activity進行任何設置，即可看到效果

共享多個元素

效果視頻

多個元素共享與單個元素共享原理一樣，在第一個Activity需要定義多個不同的名稱進行綁定，此處以兩個為例

<Button
        android:id="@+id/share1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="share1"
        android:transitionName="share1"
        android:layout_gravity="center"/>
    <Button
        android:id="@+id/share2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="share2"
        android:transitionName="share2"
        android:layout_gravity="center"/>

然后再Activity中進行屬性傳遞

  /*共享多個元素*/
 startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this, Pair.create( (View)share1,"share1" ), Pair.create( (View)share2,"share2" )).toBundle() );

然后，統(tǒng)一再另外一個Activty的XML布局文件設置相對應的屬性名稱

<ImageView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:src="@drawable/sky"
    android:transitionName="share1"
    android:scaleType="fitXY"/>

<ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:src="@drawable/ground"
        android:transitionName="share2"
        android:scaleType="fitXY"/>

全部代碼

第一個Activity XML布局文件代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:background="#cc00cc"
    >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="explode"
        android:onClick="Explode"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="slide"
        android:onClick="Slide"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fade"
        android:onClick="Fade"
        android:layout_gravity="center"/>
    <Button
        android:id="@+id/share1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="share1"
        android:transitionName="share1"
        android:layout_gravity="center"/>
    <Button
        android:id="@+id/share2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="share2"
        android:transitionName="share2"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="SingleShare"
        android:textAllCaps="false"
        android:onClick="SingleShare"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="MultShare"
        android:textAllCaps="false"
        android:onClick="MultShare"
        android:layout_gravity="center"/>

</LinearLayout>

第一個Activity 代碼

public class MainActivity extends AppCompatActivity {
    private Button share1,share2;
    private Intent intent;

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

    public void Explode(View view) {
        ReturnActivity(0);
    }

    public void Slide(View view) {
        ReturnActivity(1);
    }

    public void Fade(View view) {
        ReturnActivity(2);
    }
    public void SingleShare(View view) {
        ReturnActivity(3);
    }
    public void MultShare(View view) {
        ReturnActivity(4);
    }

    private void ReturnActivity(int num){
        intent = new Intent( this, TransitionActivity.class);
        switch (num){
            case 0:
                intent.putExtra( "flag",0 );
                break;
            case 1:
                intent.putExtra( "flag",1 );
                break;
            case 2:
                intent.putExtra( "flag",2 );
                break;
            case 3:

            case 4:
                intent.putExtra( "flag",3 );
                break;
        }
        if (num < 3){
            startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this ).toBundle() );
        }else if (num == 3){
            /*共享單個元素*/
            startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this, Pair.create( (View)share1,"share1" )).toBundle() );
        }else {
            /*共享多個元素*/
            startActivity( intent, ActivityOptions.makeSceneTransitionAnimation( this, Pair.create( (View)share1,"share1" ), Pair.create( (View)share2,"share2" )).toBundle() );
        }
    }

}

第二個Activity XML布局文件代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".TransitionActivity">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:src="@drawable/sky"
    android:transitionName="share1"
    android:scaleType="fitXY"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:src="@drawable/ground"
        android:transitionName="share2"
        android:scaleType="fitXY"/>
</LinearLayout>

第二個Activity 代碼

在第二個Activity設置getWindow().requestFeature( Window.FEATURE_CONTENT_TRANSITIONS );標識符，即可設置動畫效果

public class TransitionActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState );
        getWindow().requestFeature( Window.FEATURE_CONTENT_TRANSITIONS );
        int flag = getIntent().getExtras().getInt( "flag" );
        switch (flag){
            case 0:
                getWindow().setEnterTransition( new Explode(  ) );
                getWindow().setExitTransition( new Explode(  ) );
                break;
            case 1:
                getWindow().setEnterTransition( new Slide(  ) );
                getWindow().setExitTransition( new Slide(  ) );
                break;
            case 2:
                getWindow().setEnterTransition( new Fade(  ) );
                getWindow().setExitTransition( new Fade(  ) );
                break;
            case 3:
                break;
        }
        setContentView( R.layout.activity_transition );
    }
}