Activity過渡影片

前言
- 分解影片
- - 效果視頻
  - 決議
- 滑動影片
- - 效果視頻
  - 決議
- 淡出影片
- - 效果視頻
  - 決議
- 共享元素
- - 共享單個元素
  - - 效果視頻
    - 決議
  - 共享多個元素
  - - 效果視頻
全部代碼
- 第一個Activity XML布局檔案代碼
- 第一個Activity 代碼
- 第二個Activity XML布局檔案代碼
- 第二個Activity 代碼

前言

以前Activty之間得跳轉非常生硬，自Android.5X后，Google對Activity的切換設計更多豐富的影片效果，

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

?進入:一個進人的過渡影片決定Activity中的所有的視圖怎么進入螢屏，
?退出:一個退出的過渡影片決定-個Activity 中的所有視圖怎么退出螢屏，
?共享元素:一個共享元素過渡影片決定兩個Activities 之間的過渡，怎么共享它們的視圖，

進入和退出影片效果包括如下三種

?explode (分解)——從螢屏中間進或出，移動視圖
?slide (滑動) ——從屏 幕邊緣進或出，移動視圖
?fade(淡出)——通過改變螢屏上的視圖的不透明度達到添加或者移除視圖

共享元素包括:

?changeBounds——改變目標視圖的布局邊界
?changeClipBounds——裁剪目標視圖邊界
?changeTransform——改變目標規圖的編放比例和能轉角度
?changelmagTransfom——改空目標圖片的大小和縮放比例

分解影片

效果視頻

決議

分解影片的進場影片為上下向中間擠壓，退出影片為上下向外散開
通過在跳轉Activity的時候使用ActivityOptions.makeSceneTransitionAnimation( this ).toBundle()方法進行影片宣告，

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

然后再另外一個Activity設定影片效果，分解影片進場與退出代碼如下

進場效果代碼如下

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

退場效果代碼如下

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

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

滑動影片

效果視頻

決議

滑動影片的進場影片為逐漸向上進入，退出影片為逐漸向下退出
通過在跳轉Activity的時候使用ActivityOptions.makeSceneTransitionAnimation( this ).toBundle()方法進行影片宣告，

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

然后再另外一個Activity設定影片效果，進場與退出代碼如下

進場效果代碼如下

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

退場效果代碼如下

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

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

淡出影片

效果視頻

決議

談話影片的進場影片為由虛到實，由淺到深，退出影片則相反
通過在跳轉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中設定完成之后，我們需要在跳轉之后的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() );

然后，統一再另外一個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 );
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355365.html

標籤：其他

上一篇：【Flutter核心類分析】深入理解BuildOwner

下一篇：備戰2022，Android中高級面試必知必會

Android——淺析Activity過渡影片

Activity過渡影片

前言

分解影片

效果視頻

決議

滑動影片

效果視頻

決議

淡出影片

效果視頻

決議

共享元素

共享單個元素

效果視頻

決議

共享多個元素

效果視頻

全部代碼

第一個Activity XML布局檔案代碼

第一個Activity 代碼

第二個Activity XML布局檔案代碼

第二個Activity 代碼