ActivityOptionsCompat實現(xiàn)MD風格的Activity過渡動畫

相信大家對于Activity的過度動畫都很熟悉了,一般情況下我們直接使用

overridePendingTransition(enterAnim, exitAnim);

但是這種老舊、生硬的方式怎么能適合我們的MD風格的App呢!好在google在新的sdk中給我們提供了另外一種Activity的過度動畫——ActivityOptions

  • 并且提供了兼容包——ActivityOptionsCompat
  • 這篇博客我們就是來了解下這個新的activity過度機制痴怨。

一、 簡介

ActivityOptionsCompat是一個靜態(tài)類辕翰,提供了為數(shù)不多的幾個方法,下面我們來羅列一下:
1狈谊、ActivityOptionsCompat.makeCustomAnimation(Context context, int enterResId, int exitResId)
2喜命、ActivityOptionsCompat.makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)
3沟沙、ActivityOptionsCompat.makeThumbnailScaleUpAnimation(View source,Bitmap thumbnail, int startX, int startY)
4、ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName)
5壁榕、ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity,Pair<View, String>… sharedElements)
恩矛紫,就這5個方法可以調用,也就是說為我們提供了這么5中過度方式牌里,在使用的時候我們需要在theme指定:

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowContentTransitions">true</item>
    </style>

接下來我們就一一進行了解一下颊咬。

二、 makeCustomAnimation

這個很簡單牡辽,從參數(shù)中我們可以發(fā)現(xiàn)喳篇,這個和overridePendingTransition非常類似,確實态辛,在實現(xiàn)效果上和overridePendingTransition也是相同的麸澜。 下面就一段代碼演示一下效果:

    public void click(View view) {
        ActivityOptionsCompat compat = ActivityOptionsCompat.makeCustomAnimation(this, R.anim.translate_in, R.anim.translate_none);
        ActivityCompat.startActivity(this, new Intent(this, Activity2.class), compat.toBundle());
    }

三個參數(shù),第一個是指當前activity因妙,第二個和第三個參數(shù)分別是進入動畫和退出動畫痰憎,需要注意的是我們啟動activity的方式是使用ActivityCompat.startActivity,最后一個參數(shù)我們使用compat.toBundle攀涵。
來看看目標的activity,

    public class Activity2 extends AppCompatActivity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }

        @Override
        public void onBackPressed() {
            super.onBackPressed();
            ActivityCompat.finishAfterTransition(this);
        }
    }

在退出的時候調用ActivityCompat.finishAfterTransition(this)
進行退出動畫洽沟。



以上使用方式在接下來的幾個方式中使用一致以故,大家可以多了解一下。

三裆操、 makeScaleUpAnimation

這種方式個人感覺用途還是很廣的怒详,效果就是不斷的 放大一個view,進而進行activity的過度踪区, 看代碼

    private void launch(View view) {
        ActivityOptionsCompat compat = ActivityOptionsCompat.makeScaleUpAnimation(view, view.getWidth() / 2, view.getHeight() / 2, 0, 0);
        ActivityCompat.startActivity(this, new Intent(this, Activity2.class), compat.toBundle());
    }

說明下幾個參數(shù)昆烁,第1個參數(shù)是scale哪個view的大小,第2和3個參數(shù)是以view為基點缎岗,從哪開始動畫静尼,這里是該view的中心,4和5參數(shù)是新的activity從多大開始放大传泊,這里是從無到有的過程鼠渺。


四、 makeThumbnailScaleUpAnimation

該方法和上面的makeScaleUpAnimation非常相似眷细,只不過拦盹,這里是通過放大一個圖片,最后過度到一個新的activity溪椎,第2個參數(shù)是指那個圖片要放大普舆,3和4參數(shù)表示從哪開始動畫恬口,使用方法很簡單,這里就不演示了沼侣。接下來我們要進入兩個稍微復雜點的動畫楷兽,這兩個的方法名相同,都是makeSceneTransitionAnimation华临。

五芯杀、 單一的makeSceneTransitionAnimation

什么是scene? 就是場景動畫雅潭,在這里就體現(xiàn)在兩個activity中的某些view協(xié)同去完成過度動畫揭厚,先來看一個效果吧,



從效果中可以看到是兩個activity的兩個view進行協(xié)作的動畫扶供,該動畫怎么實現(xiàn)呢?其實很簡單

    private void launch(View view) {
        ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, view, getString(R.string.transition));
        ActivityCompat.startActivity(this, new Intent(this, Activity2.class), compat.toBundle());
    }

相信你已經(jīng)看到了makeSceneTransitionAnimation
方法筛圆,前兩個參數(shù)不用說了,那第三個參數(shù)是什么椿浓?是這樣的太援?因為要協(xié)作動畫的兩個view在不同的activity中,那我們怎么指定是哪兩個view呢扳碍?這里Android 給我們提供了一個新xml配置項android:transitionName
用來指定哪些view進行寫作提岔,例如該demo中第一個activity的布局文件,

<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=".MainActivity">
<ImageView
    android:id="@+id/image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:scaleType="fitXY"
    android:src="@drawable/show"
    android:transitionName="@string/image" />
</RelativeLayout>

看ImageView的android:transitionName屬性笋敞,我們指定為name是image的string碱蒙,繼續(xù)看看第二個activity的布局文件,肯定也有一個transitionName是name為image的string夯巷!

<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=".MainActivity">
<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:scaleType="fitXY"
    android:src="@drawable/show"
    android:transitionName="@string/image" />
</RelativeLayout>

果然如此赛惩,這樣android就知道這兩個activity中哪個view進行動畫了,因為我們在makeSceneTransitionAnimation 的第三個參數(shù)是getString(R.string.transition)
趁餐。

六喷兼、 多個view的協(xié)作 makeSceneTransitionAnimation

既然能指定一個view來進行協(xié)作,那肯定也能指定多個view了后雷,來看看效果季惯,



通過效果圖可以看到兩個activity參加動畫有一個ImageView和一個TextView,那么這種多個view協(xié)作的動畫怎么實現(xiàn)呢喷面?我們通過代碼來了解一下星瘾,首先是兩個activity的布局文件,第一個activity,

<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=".MainActivity"> <TextView
    android:id="@+id/text"
    android:textSize="20sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:text="LOADER!!" />

<ImageView
    android:id="@+id/image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_above="@id/text"
    android:layout_centerHorizontal="true"
    android:src="@drawable/show"
    android:transitionName="@string/name" />
</RelativeLayout>

很簡單惧辈,我們分別給TextView和ImageView指定了transitionName,再來看看另一個activity的布局文件琳状,肯定也是這樣,分別給TextView和ImageView指定transitionName,

<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=".MainActivity"> <ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/show"
    android:scaleType="fitXY"
    android:transitionName="@string/name" />

<TextView
    android:id="@+id/text"
    android:textSize="20sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/image"
    android:layout_centerHorizontal="true"
    android:text="LOADER!!" />
</RelativeLayout>

果然如此盒齿,我們就不詳細說了念逞, 那來看看activity中怎么寫代碼吧困食,

    private void launch() {
        Pair<View, String> imagePair = Pair.create(mImageView, getString(R.string.image));
        Pair<View, String> textPair = Pair.create(mTextView, getString(R.string.name));
        ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imagePair, textPair);
        ActivityCompat.startActivity(this, new Intent(this, Activity2.class), compat.toBundle());
    }

首先我們通過Pair.create靜態(tài)方法創(chuàng)建了兩個Pair
對象,這里有兩個泛型翎承,分別指定為View和String類型硕盹,create方法接受兩個參數(shù),第一個是參與動畫的View叨咖,第二個是該View上的transitionName,和前面單一協(xié)作的類似瘩例,我們還是通過makeSceneTransitionAnimation方法創(chuàng)建一個compat,只需要第二個參數(shù)是一個Pair類型的可變參數(shù)最后同樣適用ActivityCompat.startActivity啟動新的activity。
代碼其實很簡單甸各,這里就說這么多垛贤,現(xiàn)在思考一個問題,除了第一個我們指定了動畫外趣倾,其他的我們好像沒有機會去指定動畫聘惦,我們想換一種動畫咋辦?不要著急儒恋,android給我們提供了幾種預設的動畫方式善绎,它們分別是

change_bounds
change_clip_bounds
change_transition
change_image_transition
change_scroll

這5個東西該怎么樣呢?首先我們需要在res目錄下新建一個我們以前沒見過的目錄transition
诫尽,然后在transition目錄里新建xml文件禀酱,如果是change_bounds,則代碼這么寫箱锐,

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds />
</transitionSet>

如果是change_clip_bounds比勉,則代碼這么寫,

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeClipBounds />
</transitionSet>

其他的類似驹止,大家可以通過下載demo的源碼查看,是不是很簡單观蜗?那我們怎么指定使用這些呢臊恋?還在styles.xml文件中配置我們的theme,

<resources>
<style
    name="AppTheme"
    parent="Theme.AppCompat.Light">

    <item name="android:windowContentTransitions">true</item>

    <item name="android:windowAllowEnterTransitionOverlap">true</item>

    <item name="android:windowAllowReturnTransitionOverlap">true</item>

    <item name="android:windowEnterTransition">@android:transition/slide_bottom</item>

    <item name="android:windowExitTransition">@android:transition/slide_bottom</item>

    <item name="android:windowSharedElementEnterTransition">@transition/change_bounds</item>

    <item name="android:windowSharedElementExitTransition">@transition/change_bounds</item>
</style>
</resources>

第一個item博客最開始說了墓捻,接下來的6個很有規(guī)律抖仅,我們兩個一伙開始說,前兩個砖第,指定進入和退出的動畫可以重疊撤卢,中間兩個指定普通進入和退出的transition,這里使用了android預設的兩個transition,最后兩個指定我們使用sharedElement時的進入和退出動畫,這里使用了我們自定義的transition梧兼。除此之外放吩,我們還可以指定我們的transition動畫的速度插值器和動畫時長,

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />
</transitionSet>

這里我們給changeBounds
指定了速度插值器是加速度減速度插值羽杰,時長為500ms渡紫。好了到推,到這里ActivityOptionCompat就講解完了,總體來說使用起來還是非常簡單的惕澎,但是需要的注意的是莉测,雖然是compat,雖然是向下兼容的唧喉,但是sharedElement動畫還是只能在android 5.0以上才能運行捣卤,其他的動畫大多數(shù)也只能兼容到android 4.0以上,叫compat的是因為我們指定了動畫雖然在舊的版本上不能看到效果八孝,但能保證程序不掛董朝。
ok,ok,最后是一些參考資料
原文地址:http://blog.csdn.net/qibin0506/article/details/48129139/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末唆阿,一起剝皮案震驚了整個濱河市益涧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌驯鳖,老刑警劉巖闲询,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異浅辙,居然都是意外死亡扭弧,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門记舆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸽捻,“玉大人,你說我怎么就攤上這事泽腮∮眩” “怎么了?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵诊赊,是天一觀的道長厚满。 經(jīng)常有香客問我,道長碧磅,這世上最難降的妖魔是什么碘箍? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮鲸郊,結果婚禮上丰榴,老公的妹妹穿的比我還像新娘。我一直安慰自己秆撮,他們只是感情好四濒,可當我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般峻黍。 火紅的嫁衣襯著肌膚如雪复隆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天姆涩,我揣著相機與錄音挽拂,去河邊找鬼。 笑死骨饿,一個胖子當著我的面吹牛亏栈,可吹牛的內容都是我干的。 我是一名探鬼主播宏赘,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绒北,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了察署?” 一聲冷哼從身側響起闷游,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贴汪,沒想到半個月后脐往,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡扳埂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年业簿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阳懂。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡梅尤,死狀恐怖,靈堂內的尸體忽然破棺而出岩调,到底是詐尸還是另有隱情巷燥,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布号枕,位于F島的核電站矾湃,受9級特大地震影響,放射性物質發(fā)生泄漏堕澄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一霉咨、第九天 我趴在偏房一處隱蔽的房頂上張望蛙紫。 院中可真熱鬧,春花似錦途戒、人聲如沸坑傅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唁毒。三九已至蒜茴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浆西,已是汗流浹背粉私。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留近零,地道東北人诺核。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像久信,于是被迫代替她去往敵國和親窖杀。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內容