注:本文翻譯自Google官方的Android Developers Training文檔,譯者技術一般,由于喜愛安卓而產生了翻譯的念頭,純屬個人興趣愛好。
原文鏈接: http://developer.android.com/training/animation/crossfade.html
淡入淡出動畫(也稱作溶解效果):淡出一個組件并將另一個UI組件淡入的效果。淡入淡出效果一般來說都非常的短小,但是能提供一種屏幕切換的流暢轉換。如果你不使用淡入淡出效果,屏幕切換回顯得很突兀。
這里是一個淡入淡出的例子,它從一個進程指示器過度到文本內容。
如果你希望略過這部分內容直接看代碼樣例,可以直接 下載 樣例代碼,然后選擇淡入淡出動畫的例子。下面的文件是實現代碼:
-
src/CrossfadeActivity.java
-
layout/activity_crossfade.xml
-
menu/activity_crossfade.xml
一). 創建視圖
創建兩個你希望實現淡入淡出的視圖。下面的例子創建了一個進度指示器和一個可滑動的文本框:
< FrameLayout xmlns:android ="http://schemas.android.com/apk/res/android" android:layout_width ="match_parent" android:layout_height ="match_parent" > < ScrollView xmlns:android ="http://schemas.android.com/apk/res/android" android:id ="@+id/content" android:layout_width ="match_parent" android:layout_height ="match_parent" > < TextView style ="?android:textAppearanceMedium" android:lineSpacingMultiplier ="1.2" android:layout_width ="match_parent" android:layout_height ="wrap_content" android:text ="@string/lorem_ipsum" android:padding ="16dp" /> </ ScrollView > < ProgressBar android:id ="@+id/loading_spinner" style ="?android:progressBarStyleLarge" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:layout_gravity ="center" /> </ FrameLayout >
二). 設置動畫
要設置動畫的話:
創建你希望實現淡入淡出的視圖的成員變量。當在執行動畫期間改變視圖時,你需要這些引用。
對于淡入的視圖,將它的可視性( visibility )設置為 GONE 。這回阻止這個視圖占據布局空間,然后再計算布局時將它省略,加速處理的速度。
緩存
config_shortAnimTime
這一系統屬性到一個成員變量中。這個屬性定義了一個標準的動畫持續的一個較短的時間。這個持續的時間對于細微的動畫效果或者那些頻繁出現的動畫是比較合適的。你也可以使用
config_longAnimTime
和
config_mediumAnimTime
。
這里的一個例子使用了上述的布局文件作為activity的布局:
public class CrossfadeActivity extends Activity { private View mContentView; private View mLoadingView; private int mShortAnimationDuration; ... @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_crossfade); mContentView = findViewById(R.id.content); mLoadingView = findViewById(R.id.loading_spinner); // Initially hide the content view. mContentView.setVisibility(View.GONE); // Retrieve and cache the system's default "short" animation time. mShortAnimationDuration = getResources().getInteger( android.R.integer.config_shortAnimTime); }
三). 淡入淡出視圖
現在視圖已經配置好了,根據下面的步驟實現淡入淡出:
- 對于淡入的視圖,將alpha值設置為0,將可視性設置為 VISIBLE (記住在之前它被預設為 GONE ),這樣就使得這個視圖邊的可見但是是完全透明的。
- 對于淡入的視圖,將它的alpha動態地從0變化到1。同時,對于淡出的視圖, 將它的alpha動態地從1變化到0。
- 在一個 Animator.AnimatorListener 中使用 onAnimationEnd() ,將淡出的視圖的可視性設置為 GONE 。雖然它的alpha的值已經變成0了,但是將視圖的可視性設置為 GONE 可以阻止它占據布局空間,并將它略出布局的計算過程,以此來提高程序的執行性能。
下面的代碼是一個例子:
private View mContentView; private View mLoadingView; private int mShortAnimationDuration; ... private void crossfade() { // Set the content view to 0% opacity but visible, so that it is visible // (but fully transparent) during the animation. mContentView.setAlpha(0f); mContentView.setVisibility(View.VISIBLE); // Animate the content view to 100% opacity, and clear any animation // listener set on the view. mContentView.animate() .alpha(1f) .setDuration(mShortAnimationDuration) .setListener( null ); // Animate the loading view to 0% opacity. After the animation ends, // set its visibility to GONE as an optimization step (it won't // participate in layout passes, etc.) mLoadingView.animate() .alpha(0f) .setDuration(mShortAnimationDuration) .setListener( new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { mLoadingView.setVisibility(View.GONE); } }); }
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
