原文  http://www.cnblogs.com/wingyip/p/4558923.html 

Android 5.0 Activity切換動畫

在Androiod5.0中,Google定義了Material Design的規範.而動畫切換,能給使用者直覺的連貫性的體驗,也是Google推崇的.

為此,在Android5.0中,Android新支援了不少炫酷的動畫效果. 這裡是Android官方對于Material Design的動畫的介紹文檔 . 

下面要介紹的其中一種Activity的切換效果(如上圖).目前後兩個Activity有共同的UI元素時候,适合用這種動畫效果,給使用者連貫性的體驗.

實作步驟

1. 建立一個Android應用Project,裡面有兩個Activity;

2. 下面是MainActivity的代碼和XML布局;

代碼和布局都非常簡單.解釋一下onClick()方法的代碼.

makeSceneTransactionAnimation()方法第二個參數是用來告訴指定共同的UI元素是哪一個,這裡是shareView.

makeSceneTransactionAnimation()方法第三個參數是"robot",和XML布局裡面的android:transactionName="robot"的值是一一對應的.

package com.example.garena.myapplication;
import android.app.ActionBar;
import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final View shareView = findViewById(R.id.share_element_image_view);
    shareView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(MainActivity.this, shareView, "robot");
        startActivity(intent, options.toBundle());
      }
    });
    ActionBar actionBar = getActionBar();
    if (actionBar != null) {
      actionBar.setTitle(R.string.first_activity);
    }
  }
}
           

<LinearLayout 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"
  android:orientation="vertical"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity">
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />
  <ImageView
    android:id="@+id/share_element_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
    android:transitionName="robot" />
</LinearLayout>      

3. 下面是SecondActivity的代碼和布局;

在onClick()方法裡面,調用finishAfterTransaction()來finish activity.

在XML布局裡面,同樣是需要用android:transactionName="roboto"來辨別共同的UI元素.

package com.example.garena.myapplication;
import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
public class SecondActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.second_activity);
    ActionBar actionBar = getActionBar();
    if (actionBar !=  null) {
      actionBar.setTitle(R.string.second_activity);
    }
    View btnBack = findViewById(R.id.btn_back);
    btnBack.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        finishAfterTransition();
      }
    });
  }
}
           

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
  android:orientation="vertical">
  <ImageView
    android:id="@+id/title_icon_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
    android:transitionName="robot" />
  <Button
    android:id="@+id/btn_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/back" />
</LinearLayout>      

4. 運作效果(如上圖);

從最終運作的效果圖可以看到,點選小機器人的圖示進入SecondActivity時,能看到小機器人圖示移動到SecondActivity這個小機器人圖示的位置.

點選SecondActivity的Back按鈕,小機器人圖示會移動到MainActivity中小機器人圖示的位置.