Android 頁面跳轉動畫的兩種實現方式

阿龍的故事發表於2016-11-18

先說一下在XML中定義動畫的型別,分別有:

alpha 漸變透明度動畫效果
scale 漸變尺寸伸縮動畫效果
translate 畫面轉換位置移動動畫效果
rotate 畫面轉移旋轉動畫效果

在XML中定義動畫上面的動畫型別可以隨意組合,達到想要的效果,下面是程式碼片段:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--  漸變透明度動畫效果   -->
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

    <!--
    fromAlpha:開始時透明度
    toAlpha: 結束時透明度
    duration:動畫持續時間 -->

</set>


<!-- 畫面轉移旋轉動畫效果   -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:pivotX="100%"
        android:pivotY="0"
        android:toDegrees="360"
        android:duration = "1000"/>
    <!--
  fromDegrees   動畫開始時的角度
  toDegrees     動畫結束時物件的旋轉角度,正代表順時針
  pivotX    屬性為動畫相對於物件的X座標的開始位置
  pivotY    屬性為動畫相對於物件的Y座標的開始位置    -->

</set>





<!-- 漸變尺寸伸縮動畫效果   -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-100%"
        android:toYDelta="0"
        android:duration = "500"/>
    <!--fromXDelta,fromYDelta   起始時X,Y座標,螢幕右下角的座標是-->
    <!--toXDelta, toYDelta     動畫結束時X,Y的座標 &ndash;&gt;-->

</set>

<!-- 畫面轉換位置移動動畫效果   -->
    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android">  
         <scale    
         android:interpolator= "@android:anim/decelerate_interpolator"      
         android:fromXScale="0.0"      
         android:toXScale="1.5"      
         android:fromYScale="0.0"      
         android:toYScale="1.5"      
         android:pivotX="50%"      
         android:pivotY="50%"      
         android:startOffset="0"      
         android:duration="10000"  
         android:repeatCount="1"    
         android:repeatMode="reverse"  
         />  
    </set>  
    <!--  
    interpolator指定動畫插入器,常見的有加速減速插入器accelerate_decelerate_interpolator,加速插入器accelerate_interpolator,減速插入器decelerate_interpolator。  
    fromXScale,fromYScale,動畫開始前X,Y的縮放,0.0為不顯示,1.0為正常大小  
    toXScale,toYScale,動畫最終縮放的倍數,1.0為正常大小,大於1.0放大  
    pivotX,pivotY動畫起始位置,相對於螢幕的百分比,兩個都為50%表示動畫從螢幕中間開始  
    startOffset,動畫多次執行的間隔時間,如果只執行一次,執行前會暫停這段時間,單位毫秒  
    duration,一次動畫效果消耗的時間,單位毫秒,值越小動畫速度越快  
    repeatCount,動畫重複的計數,動畫將會執行該值+1次  
    repeatMode,動畫重複的模式,reverse為反向,當第偶次執行時,動畫方向會相反。restart為重新執行,方向不變  
     -->  

第一種跳轉頁面的方法,在XML中定義兩個動畫,一個是頁面進入的動畫,一個是頁面退出動畫,實現方式如下:

寫一個進入動畫 alpha_in

<alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

alpha_out

<alpha
        <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

在java程式碼中實現方式:

startActivity(new Intent(A.this, B.class));               overridePendingTransition(R.anim.alpha_into,R.anim.alpha_out);

這種實現能在跳轉的時候實現動畫,當返回頁面時候就沒有動畫了。

第二種跳轉頁面的方法,在XML中定義四個,

第一個是開啟頁面的動畫 translate_into 相當於A跳轉B,B的動畫效果

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

第二個XML translate_out 相當於A跳轉B,A的動畫效果

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

第三個XML translate_close_into 相當於A跳轉B後,從B返回到A時候A的動畫效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="-100%"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="0"
        android:duration = "500"/>
</set>

第四個XML translate_close_out相當於A跳轉B後,從B返回到A時候B的動畫效果

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

在styles中定義:

<style name="Anim_fade" parent="android:Theme">
        <item name="android:windowAnimationStyle">@style/PageAnimation</item>
    </style>
        <style name="PageAnimation" parent="@android:style/Animation.Activity">
            <item name="android:activityOpenEnterAnimation" >@anim/translate_into</item>
            <item name="android:activityOpenExitAnimation">@anim/translate_out</item>
            <item name="android:activityCloseEnterAnimation">@anim/translate_close_into</item>
            <item name="android:activityCloseExitAnimation">@anim/translate_close_out</item>
        </style>

最後非同步在AndroidManifest中在需要跳轉的連個Activity設定 android:theme=”@style/Anim_fade”

<activity android:name=".A"
            android:theme="@style/Anim_fade"/>
            <activity android:name=".B"
            android:theme="@style/Anim_fade"/>

在java程式碼中正常呼叫跳轉也買年就行了,設定Theme在頁面返回也有退出的動畫效果

相關文章