2018年9月16日 星期日

Android-換頁特效

各位在開發頁面過程中
一定多多少少聽到換頁、轉頁這樣的抱怨

能有啥麼特效可以呈現 ?
這是什麼使用者體驗 ?
一堆讓人滿頭問號的 What...

今天就來寫簡單的範例讓大家秒懂
此篇以左右滑動特效為例子

公式圖表 :
















先想 A 頁面位移量為多少
再想 B 頁面位移量為多少



















1 . 先創立 res/anim folder













2 . 建立特效
A頁面主頁滑至左底<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p" />
</set>
B頁面右底滑至主頁
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:duration="500"
    android:fromXDelta="100%p"
    android:toXDelta="0%p" />
</set>

3 . 立即將此風格套用在 Style.xml 上吧
<style name="transitionPage" style="@android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">@anim/open_in_from_right</item>
<item name="android:activityOpenExitAnimation">@anim/open_out_from_left</item>
<item name="android:activityCloseEnterAnimation">@anim/close_in_from_left</item>
<item name="android:activityCloseExitAnimation">@anim/close_out_from_right</item>
</style>

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">    .
    .
    <item name="android:windowAnimationStyle">@style/transitionPage</item>    .
</style>

參考資料:设置Activity退出动画无效问题的解决

沒有留言:

張貼留言