Tech Fantasy: Android UI 特效實戰 (1) Cross Fading

分享一下最近實作Android App的一些小經驗, 手法都不是新的, 但還是記錄一下, 希望能夠幫上有同樣需求的人

特效 (1) CrossFade
一個很常見的特效, 簡單來說就是利用動畫效果讓A View切到B View時視覺效果不要太突兀, 比如說A View 漸出(Fade out) B View 漸入(Fade in), 讓切換的畫面是連續的.

達到這目標其實有很多方式, 以下分享一下我用過的經驗:

a.View.animate() :
Android Developer也詳細的教學, 在此就不多說. 要注意的是此方法需要使用Honycomb(level 12)才有的API, 為了相容性, 我選擇了其他方式.

優點:簡單
缺點:需要處Framework理相容性問題

PS: 如果想要在Android 2.3以下裝置使用, 有套Library叫NineOldAndroid可以實現, 但我覺得有點殺雞用牛刀, 就先跳過了.

b.TransitionDrawable : 很方便的元件, 不需要太多程式碼, 範例如下

Drawable[] layers = new Drawable[2];
layers[0] = new ColorDrawable(Color.TRANSPARENT);
layers[1] = new BitmapDrawable(bitmap);
TransitionDrawable drawable = new TransitionDrawable(layers);
image.setImageDrawable(drawable);
drawable.startTransition(300);

利用Android提供的TranditionDrawable可以讓不同的Drawable互相切換. 所以就把已經在畫面上的圖設給第一個drawable(layers[0]), 想要切換的圖設給第二個drawable(layers[1]), 然後設定切換時間, 將此drawable塞入ImageView就結束了.

優點: 也很簡單
缺點: 動畫效果只有FadeIn/FadeOut, 而且相互切換的圖案必須要相同大小, 不然Scaling的比例會不對. 國外討論串.

PS: 當然也是有辦法克服, 繼承Drawable去控制圖片的大小, 讓兩張圖維持一致即可. 打造Drawable有一個不錯的範例, 有興趣的可以下載他的source code來研究.

c. ViewAnimator

這是一個在API Level 1就提供的ViewGroup, 顯示的內容也是獨立的View不會有圖片大小限制. 使用起來也不會太複雜. 只要將想要切換的View加入當成Child, 然後預先指定好Animation, 呼叫ViewAnimator的.showNext()即會自動套用動畫. 範例Code如下:

int newIndex = mAnimator.getDisplayedChild() == 0 ? 1 : 0;
ImageView iv = (ImageView) mBlurredAnimator.getChildAt(newIndex);
iv.setImageBitmap(bitmap);
mBlurredAnimator.showNext();

XML:

<ViewAnimator
        android:id="@+id/animator_blurred_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/fade_in"
        android:outAnimation="@anim/fade_out" >

        <ImageView
            android:id="@+id/image_blurred_backgound1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />

        <ImageView
            android:id="@+id/image_blurred_backgound2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />
</ViewAnimator>

優點: 簡單, 無API Dependency
缺點: 目前還沒碰到

如果都無法解決你的問題, 那最後的手段就是去註冊Animation的AnimationListener, 自己去處理Animation事件, 相對上是麻煩很多.

目前我自己用過的方法就是以上這些, 如果有其他更好的方式, 歡迎大家來討論.

Tech Fantasy

2013年1月24日星期四

Android UI 特效實戰 (1) Cross Fading

沒有留言:

張貼留言

2013年1月24日 星期四

Android UI 特效實戰 (1) Cross Fading

沒有留言:

張貼留言

2013年1月24日星期四