Android 5.0 中Activity切換效果動畫介紹及例

在新版的Androiod5.0中,Google定義了Material Design的規範,Android新支持了不少炫酷的動畫效果本文我們來介紹一個Activity的切換效果動畫,非常炫,應用場景也多。

動畫效果圖如下:
Android 5.0 中Activity切換效果動畫介紹及例

下面要介紹的其中一種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中小機器人圖標的位置.

更多相關文章
  • CSS3中target實現選項卡切換效果
    選項卡切換使用js還是非常的簡單了,現在有了css就更簡單了,下面我們來看一個CSS3中target實現選項卡切換效果:target是什麽?MDN是這樣描述的::targetThe :target pseudo-class represents the unique element, if any,
  • ext中tabpanel選項卡的切換效果(顯示與隱藏)
    下面我們來看一個關于ext中tabpanel選項卡的切換效果(顯示與隱藏)希望此文章對各位同學會有所幫助.例1 代碼如下 var myTabs = new Ext.TabPanel({ id:'myTabs', region:'center', margins:'3 3 3 0', activeTa ...
  • 以前做flash js廣告同一頁面只能調用一次,本文章提供的這款js css教程圖片切換效果可以多次調用,並且可正常使用.<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http:// ...
  • 前面講到了三款圖片切換,這裏我再利用實現一款DGallery比較流行帶按鈕圖片切換效果,有需要的同學可嘗試參考.例子的速度慢死了 我和WEBSITE MANGER 溝通下才行寫這個代碼主要是因爲框架 本身沒有任何按鈕
  • 本文章來給大家一款大氣的jQ網站幻燈片切換效果焦點圖代碼,有需要了解習的朋友可進入參考.這款jQuery網站幻燈片切換效果焦點圖非常大氣,要是網站首頁應用此款效果,必定是蓬荜生輝啊!導入jquery代碼 代碼如下 <
  • js 滑鼠劃過tips切換效果
    js 滑鼠劃過tips教程切換效果//獲取對象屬性兼容方法function $(objec
  • 本文章接上面的方法來實例一款用于商城比較好看點兒 圖片切換效果代碼,有需要了解的朋友可參考. 代碼如下 <script type=“text/javascript” src=“../jquery.js”></scri
  • 提供一個基本的jquery ImageScroll的圖片切換效果,有需要的朋友可以參考一下哦. 代碼如下 (function($){ $.fn.ImageScroll = function(options) { va
一周排行
  • Kali Linux是基于Debian的Linux發行版, 設計用于數字取證和滲透測試.由Offensive Security Ltd維護和資助,本文爲各位介紹Kali Linux下Veil安裝與使用的方法,具體細節 ...
  • PclZip介紹 PclZip library能夠壓縮與解壓縮Zip格式的壓縮檔(WinZip.PKZIP);且能對此類類檔案進行處理,包括産生壓縮檔.列出壓縮檔的內容以及解壓縮檔案等等 數據庫備份是一件非常重要的事
  • Android高德地圖自定義Markers的例子
    下文爲各位重點介紹關于Android高德地圖自定義Markers的例子,希望這篇文章能夠讓 ...
  • 手機WAP觸屏站點中TAB菜單的設計及源碼僞網易
    本文我們來仿網易的手機WAP站觸屏版(http://3g.163.com/touch/)中 ...
  • 在Windows系統中IIS防盜鏈設置需一個ISAPI_Rewrite組件,然後我們把ISAPI_Rewrite載入到iis中,再就可以在iis中的httpd.ini中寫防盜鏈功能了,下面我來給各位同學介紹.首頁我們
  • 引用文件的方法有兩種:require 及 include.兩種方式提供不同的使用彈性. require 的使用方法如 require("MyRequireFile.php"); .這個函數通常放在 ...
  • iostat,用于報告中央處理器(CPU)統計信息和整個系統.適配器.tty 設備.磁盤和 CD-ROM 的輸入/輸出統計信息.現在我們來看看Linux系統iostat命令如何監控I/O效能的詳解教程.Linux系統 ...
  • 本文章來給各位同學介紹Ubuntu 10.04 + nginx + php5 + php-fpm安裝,並進行多站點配置具體過程有需要了解的同學可進入參考.首先,設置nginx最新穩定版本的源,還有php-fpm的源s
  • 本文章來給各位同學介紹關于在php中system,exec,passthru函數的一些使用方法,各位同學不防進入參考.php提供了system(),exec(),passthru()這幾個函數來調用外部的命令.他們的
  • register_globals是php中一個自定全局變量功能,在默認情況下是關閉了,但如果你使用thinkphp框架那麽就需要打開register_globals功能了,下面我們一起來看看如何開啓它吧.開啓方法我們