Material Design-過渡動畫

Android 5.0 對 Activity的跳轉動畫增加了新的特效。

三種Translation類型
進入:一個進入的過渡(動畫)決定activity中的所有的視圖怎麼進入屏幕。
退出:一個退出的過渡(動畫)決定一個activity中的所有視圖怎麼退出屏幕。
共享元素:一個共享元素過渡動畫決定兩個activities之間的過渡,怎麼共享它們的視圖。

其中 進入退出包括
explode(分解) –進或出地移動視圖,從屏幕中間
slide(滑動) -進或出地移動視圖,從屏幕邊緣
fade(淡出) –通過改變屏幕上視圖的不透明度達到添加或者移除視圖(的效果)

共享元素包括
changeBounds - 改變目標視圖的佈局邊界
changeClipBounds - 裁剪目標視圖邊界
changeTransform - 改變目標視圖的縮放比例和旋轉角度
changeImageTransform - 改變目標圖片的大小和縮放比例

過渡使用方法 :
1.在ActivityA調轉時調用

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

2.在ActivityB中設置 , 代表允許使用Transitions

    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 或者在樣式文件中設置 
      <item name="android:windowContentTransitions">true</item>  

3.在ActivityB中設置進入的動畫效果

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

或 在ActivityA中設置離開的動畫效果

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

共享元素使用方法:
1.在ActivityA調轉時調用

    //單個元素共享  
     startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle()); 
     //多個元素共享
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(v, "share"), Pair.create(fab, "fab")).toBundle()); 
2. 在兩個activity文件中設置相同android:transitionName="xx" 元素的節點即可 

具體實例

ActivityA

public class MainActivity extends AppCompatActivity {

    private Intent intent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    //分解
    public void explode(View v) {
        intent = new Intent(this, OtherActivity.class);
        intent.putExtra("flag", 0);
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    }

    //滑動
    public void slide(View v) {
        intent = new Intent(this, OtherActivity.class);
        intent.putExtra("flag", 1);
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    }

    //淡出
    public void fade(View v) {
        intent = new Intent(this, OtherActivity.class);
        intent.putExtra("flag", 2);
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    }


    //共享元素
    public void share(View v) {
        View fab = findViewById(R.id.fab);

        intent = new Intent(this, OtherActivity.class);
        intent.putExtra("flag", 3);
       // startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, v, "share").toBundle());
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(v, "share"),
                Pair.create(fab, "fab")).toBundle());
    }
}

activityA的佈局文件中設置了兩個共享元素

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="5dp"
    android:text="share"
    android:onClick="share"
    android:transitionName="share"
    />

<Button
    android:id="@+id/fab"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:transitionName="fab"
    android:background="@android:drawable/ic_btn_speak_now"
    android:elevation="5dp"
    />

ActivityB, 注意setContentView方法一定要在requestFeature方法與設置的動畫效果之後執行,而已這裏不能繼承AppCompatActivity 我們直接繼承Activity

public class OtherActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

        int flag = getIntent().getIntExtra("flag", -1);
        //設置進入的動畫
        if (flag == 0) {
            getWindow().setEnterTransition(new Explode());
        } else if (flag == 1) {
            getWindow().setEnterTransition(new Slide());
        } else if (flag == 2) {
            getWindow().setEnterTransition(new Fade());
        } else if (flag ==3) {
        }


        setContentView(R.layout.content_main);
    }
}

ActivityB中設置了兩個共享元素與ActivityA中的名稱一致

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.jiangwei.transanimation.MainActivity"
    tools:showIn="@layout/activity_main">

    <View
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@android:color/darker_gray"
        android:transitionName="share" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="fab"
        android:layout_centerInParent="true"
        android:text="xxxxxxxxxxxxxxxxxx" />
</RelativeLayout>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章