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中小機器人圖標的位置.