Android Activity 切換動畫（非原創）

在Android開發過程當中，常常會碰到Activity之間的切換效果的問題，下面介紹一下如何實現左右滑動的切換效果，首先了解一下Activity切換的實現，從Android2.0開始在Activity增長了一個方法：

 

public void overridePendingTransition (int enterAnim, int exitAnim)

其中：

enterAnim 定義Activity進入屏幕時的動畫

exitAnim 定義Activity退出屏幕時的動畫

overridePendingTransition 方法必須在startActivity()或者 finish()方法的後面。

Android已經內置了幾種動畫效果，能夠見 android.R.anim 類。通常狀況下咱們須要本身定義屏幕切換的效果。首先咱們先了解Activity的位置定義，以下圖：

 

從上圖能夠看出，以手機屏幕下面邊未X軸，屏幕左邊爲Y軸，當Activity在X軸值爲-100%p時，恰好在屏幕的左邊（位置1），當X軸值爲0%p時，恰好再屏幕內(位置2），當X=100%p時恰好在屏幕右邊（位置3）。

清楚了位置後，咱們就能夠實現左右滑動的切換效果，首先讓要退出的Activity從位置2移動到位置1，同時讓進入的Activity從位置3移動位置2，這樣就能實現從左右切換效果。

實現過程以下，首先定義2個動畫，在 res目錄建立anim目錄， 而後在目錄建立動畫的xml文件：out_to_left.xml (從左邊退出動畫) 、in_from_right.xml(從右邊進入動畫)

out_to_left.xml (從 位置2 移動到 位置1)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="0%p" android:toXDelta="-100%p"
        android:duration="500" />
</set>

in_from_right.xml (從 位置3 移動到 位置2)

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="100%p" android:toXDelta="0%p"
        android:duration="500" />
</set>

注： android:fromXDelta 動畫開始的位置，  android:toXDelta 動畫結束的位置，android:duration動畫的時間。

 

 

Android 代碼以下：

public class LeftRightSlideActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Button button = (Button)findViewById(R.id.button1);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setClass(LeftRightSlideActivity.this, SlideSecondActivity.class);
                startActivity(intent);
                //設置切換動畫，從右邊進入，左邊退出
                overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);
            }
        });
    }
}

效果圖以下：

    

 

雖然左右滑動切換的實現很簡單，可是對於原理的理解很重要，掌握了原理能夠充分發揮想象力設計出各類各樣的動畫效果，但願對一些入門的新手有幫助。

 

Activity的切換效果使用的是Android的動畫效果，Android的動畫在官方有相關資料：http://developer.android.com/guide/topics/graphics/animation.html和http://developer.android.com/guide/topics/resources/animation-resource.html，Activity的切換動畫其實是Android的View Animation(視圖動畫)中的Tween Animation效果，Tween Animation分爲4種動畫效果，分別是：alpha (透明變化) translate(位置移動) scale(縮放) rotate(旋轉), 而左右滑動切換使用的是 translate(位置移動)的效果，在下一篇咱們再討論一下 alpha (透明變化) 、scale(縮放)、 rotate(旋轉) 這三種效果，本篇只將 translate(位置移動)。

Translate動畫是很是好理解，就是定義一個開始的位置和一個結束位置，定義移動時間，而後就能自動產生移動動畫。Android的translate移動方向有 橫向(X) 豎向(Y), 左右滑動使用了橫向移動效果，對於豎向(Y)的位置以下：

定義一個向上退出的動畫（從位置2 移動位置3）和從下面進入（從位置1移動位置2）的動畫定義文件以下：

out_to_up.xml (從屏幕上面退出)

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_interpolator"     android:fromYDelta="0%p"     android:toYDelta="-100%p"     android:duration="1000"> </translate>

in_from_down.xml (從屏幕下面進入)

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_interpolator"     android:fromYDelta="100%p"     android:toYDelta="0%p"     android:duration="1000"> </translate>

接下來說一講translate的幾個重要的屬性：

android:interpolator: 加速器，很是有用的屬性，能夠簡單理解爲動畫的速度，能夠是愈來愈快，也能夠是愈來愈慢，或者是先快後忙，或者是均勻的速度等等，對於值以下：

@android:anim/accelerate_interpolator： 愈來愈快 @android:anim/decelerate_interpolator：愈來愈慢 @android:anim/accelerate_decelerate_interpolator：先快後慢 @android:anim/anticipate_interpolator: 前後退一小步而後向前加速 @android:anim/overshoot_interpolator：快速到達終點超出一小步而後回到終點 @android:anim/anticipate_overshoot_interpolator：到達終點超出一小步而後回到終點 @android:anim/bounce_interpolator：到達終點產生彈球效果，彈幾下回到終點 @android:anim/linear_interpolator：均勻速度。

android:duration: 動畫運行時間，定義在屢次時間（ms）內完成動畫

android:startOffset: 延遲必定時間後運行動畫

fromXDelta: X軸方向開始位置，能夠是%，也能夠是具體的像素 具體見圖

toXDelta:   X軸方向結束位置，能夠是%，也能夠是具體的像素

fromYDelta: Y軸方向開始位置，能夠是%，也能夠是具體的像素

toYDelta:    Y軸方向結束位置，能夠是%，也能夠是具體的像素

 

當你瞭解上面的屬性後，你能夠組合出不少有趣的位置移動效果。好比使用加速器：@android:anim/bounce_interpolator 能夠產生彈球落地時的效果。

在實際項目中須要在進行只使用「左右上下滑動」的效果可能還不夠炫，但願在切換時能產生更動態的效果，好比開始切換時第1個Activity先向後退一步，而後在向左方向退出屏幕。而後第2個Activity緊跟後面從右邊進入屏幕，到達終點時有一個動態效果。在瞭解了動畫加速器後，你們都知道能夠採用：anticipate_overshoot_interpolator 、anticipate_interpolator、overshoot_interpolator這三個加速器實現左右滑動切換時啓動或者結束的動態效果。

動畫文件定義以下：

dync_out_to_left.xml 

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android"     android:duration="500"     android:fromXDelta="0%p"     android:interpolator="@android:anim/anticipate_interpolator"     android:toXDelta="-100%p" />

dync_in_from_right.xml

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android"     android:duration="500"     android:fromXDelta="100%p"     android:interpolator=" @android:anim/anticipate_overshoot_interpolator "     android:toXDelta="0%p" />

可是再使用以上動畫配置，會出現如下問題：

1.     第1個Activity使用anticipate_interpolator時，開始移動時先向後退一步，而後向前移動。但向後退一步步伐太大，略顯誇張，實際應用中只但願退後一小小步就好了。

2.     因爲開始向後退一步，額外增長了移動時間，致使前一Activity和後一個Activity的時間不一樣步。

爲了解決以上問題，從新定義動態效果，將第1個Activity的移動分爲2個動畫效果：（1）用200毫秒時間先向後移動2%p的位置 (2) 延遲200毫秒後從2%p位置向前移動到-100%p位置。 而後第2個Activity從延遲200毫秒而後從102%p位置移動到0%p位置。

動畫定義以下：

new_dync_out_to_left.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"     android:shareInterpolator="false" >       <translate         android:duration="200"         android:fromXDelta="0%p"         android:interpolator="@android:anim/accelerate_decelerate_interpolator"         android:toXDelta="2%p" />     <translate         android:duration="1000"         android:fromXDelta="2%p"         android:interpolator="@android:anim/accelerate_interpolator"         android:startOffset="200"         android:toXDelta="-100%p" />   </set>

new_dync_in_from_right.xml

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android"     android:duration="1000"     android:fromXDelta="102%p"     android:interpolator="@android:anim/anticipate_overshoot_interpolator"     android:startOffset="200"     android:toXDelta="0%p" />