Android Developers:兩個視圖漸變

淡入淡出動畫(也被稱為漸隱)逐漸淡出一個UI組件,同時淡入另一個。這個動畫在你想在你的應用程序中切換內容或者是視圖的情況下非常有用。淡入淡出非常微妙並短,但支持從一個屏幕到下一個屏幕流暢的過渡。當你不使用它們的時候,然而,過渡經常感覺生硬和倉促。

下面是從一個進度指示器到一些文本內容漸變的例子。

如果你想跳過並查看一個完整的工作示例,下載並運行這個實例應用,並選著漸變例子。查看下面的文件的代碼實現:

  • src/CrossfadeActivity.java

  • layout/activity_crossfade.xml

  • menu/activity_crossfade.xml

    創建視圖

    ——————————————————————————————————————————————————————————————-——

    創建兩個你想漸變的視圖。下面的例子創建瞭一個過程指示器和一個滑動文本視圖:

    <frameLayout xmlns:android="https://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"> 
     
        
     
            
     
        
     
        
     
    </frameLayout> 

    設置動畫

    ——————————————————————————————————————————————————————————————————————

    為瞭設置動畫:

    1. 創建你想漸變的視圖的成員變量。你稍後在動畫過程中修改視圖時需要這些引用。

    2. 對於淡入的視圖,設置它的可見性為GONE。它阻止瞭視圖占用佈局控件,並在佈局計算中忽略它,加快處理時間。

    3. 在一個成員變量中緩存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); 
         } 

      淡入淡出視圖

      ——————————————————————————————————————————————————————–———————————

      現在這個試圖是正確的設置,通過執行下面的操作漸入漸出它們:

      1. 對於漸入的視圖,從0到可見性VISIBLE設置透明度值.(記住它初始化為GONE.)它會使的這個視圖可見但是完全透明.

      2. 對於漸入的視圖,推動它的透明值從0到1.在這個時候,對於這個漸出的視圖,推動它的透明值從1到0.

      3. 在一個Animator.AnimatorListener中使用nonAnimationEnd()方法,設置淡出為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.) 
           mHideView.animate() 
                   .alpha(0f) 
                   .setDuration(mShortAnimationDuration) 
                   .setListener(new AnimatorListenerAdapter() { 
                       @Override 
                       public void onAnimationEnd(Animator animation) { 
                           mHideView.setVisibility(View.GONE); 
                       } 
                   }); 
        }

發佈留言