Android 頁面跳轉動畫的兩種實現方式
先說一下在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的座標 –>-->
</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在頁面返回也有退出的動畫效果
相關文章
- PHP頁面跳轉幾種實現方法PHP
- 成品直播原始碼,html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- url跳轉的兩種實現方式 域名 80埠占用
- Flutter 實現底部擴散模糊動畫(一)跳轉頁面Flutter動畫
- PHP中實現頁面跳轉PHP
- PHP頁面跳轉如何實現延時跳轉PHP
- 給你的Flutter頁面跳轉加上動畫Flutter動畫
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- [轉]spring mvc註解方式實現嚮導式跳轉頁面SpringMVC
- JS實現各種級別直接的頁面跳轉@重新整理頁面@框架集的綜合案例JS框架
- iOS專案開發實戰——使用三種方式實現頁面跳轉與引數傳遞(一)iOS
- iOS專案開發實戰——使用三種方式實現頁面跳轉與引數傳遞(二)iOS
- iOS專案開發實戰——使用三種方式實現頁面跳轉與引數傳遞(三)iOS
- uni-APP 新增頁面實現路由跳轉APP路由
- js頁面跳轉的問題(跳轉到父頁面、最外層頁面、本頁面)JS
- ASP.NET頁面跳轉的三種方法ASP.NET
- SSH整合實現分頁查詢(兩種方式)
- asyUI分頁中,如何實現頁面跳轉,再返回時,...UI
- vue中實現路由跳轉的三種方式(精選)Vue路由
- Flutter頁面跳轉到IOS原生介面 如何實現?FlutteriOS
- vue頁面跳轉Vue
- Flutter頁面跳轉Flutter
- javascript 跳轉頁面JavaScript
- js頁面跳轉JS
- 直播系統中網頁類似app頁面切換動畫的實現方式網頁APP動畫
- react跳轉url,跳轉外鏈,新頁面開啟頁面React
- 【Android】2:控制元件使用及頁面跳轉實戰Android控制元件
- react-navigation自定義StackNavigator頁面跳轉動畫ReactNavigation動畫
- 鴻蒙HarmonyOS實戰-ArkUI動畫(頁面轉場動畫)鴻蒙UI動畫
- 說說如何使用 vue-router 實現頁面跳轉Vue
- struts2實現登入後跳轉回本頁面
- 微信小程式中頁面間跳轉傳參方式微信小程式
- vue 跳轉的兩種方法Vue
- Android activity相互跳轉後臺出現兩個頁面的坑Android
- Android Jetpack - 使用 Navigation 管理頁面跳轉AndroidJetpackNavigation
- java servlet 與jsp幾種頁面跳轉的方法JavaServletJS
- js跳轉頁面方法(轉)JS
- Flutter:如何跳轉頁面?Flutter