1. 程式人生 > >android動畫 通過動畫布局宣告檔案和關聯檔案為容器佈局----佈局動畫

android動畫 通過動畫布局宣告檔案和關聯檔案為容器佈局----佈局動畫

先上圖:

當然,在這裡你是無法看到動態的動畫效果的,當然如果你將筆者的程式碼執行,自然是可以看到動畫效果的。這裡的效果是說,當我們的list中的每一項最終顯示為上圖中的樣子前展示給我們的動畫效果。

讓我們看看activity程式碼:

[java] view plain copy print?
  1. package cn.com.chenzheng_java.animation;  
  2. import <a href=“http://lib.csdn.net/base/android”class=‘replace_word’ title=“Android知識庫” target=‘_blank’ style=‘color:#df3434; font-weight:bold;’
    >Android</a>.app.Activity;  
  3. import android.os.Bundle;  
  4. import android.widget.ArrayAdapter;  
  5. import android.widget.ListView;  
  6. /** 
  7.  * @description 佈局動畫 
  8.  * 何謂佈局動畫:將容器內的檢視製作成動畫,它是補間動畫的一種。當 
  9.  * 前的例子中,我們要將listView容器中的內容做成動畫 
  10.  * @author chenzheng_java 
  11.  * @since 2011/03/24 
  12.  */
  13. publicclass Animation2Activity 
    extends Activity{  
  14.     ListView listView;  
  15.     String[]city = new String[]{  
  16.             ”中關村”,  
  17.             ”海淀劇院”,  
  18.             ”海淀醫院”,  
  19.             ”人民大學”
  20.     };  
  21. @Override
  22. protectedvoid onCreate(Bundle savedInstanceState) {  
  23.     super.onCreate(savedInstanceState);  
  24.     setContentView(R.layout.animation2);  
  25.     listView = (ListView) findViewById(R.id.listView_animation2);  
  26.     ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, city);  
  27.     listView.setAdapter(adapter);  
  28. }  
  29. }  
package cn.com.chenzheng_java.animation; import <a href=”http://lib.csdn.net/base/android” class=’replace_word’ title=”Android知識庫” target=’_blank’ style=’color:#df3434; font-weight:bold;’>Android</a>.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.ListView; /** * @description 佈局動畫 * 何謂佈局動畫:將容器內的檢視製作成動畫,它是補間動畫的一種。當 * 前的例子中,我們要將listView容器中的內容做成動畫 * @author chenzheng_java * @since 2011/03/24 */ public class Animation2Activity extends Activity{ ListView listView; String[]city = new String[]{ “中關村”, “海淀劇院”, “海淀醫院”, “人民大學” }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.animation2); listView = (ListView) findViewById(R.id.listView_animation2); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, city); listView.setAdapter(adapter); } }

animation2.xml佈局檔案:

[xhtml] view plain copy print?
  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2. <LinearLayoutxmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:layout_width=“fill_parent”android:layout_height=“fill_parent”
  4.     android:orientation=“vertical”>
  5.     <ListViewandroid:layout_width=“fill_parent”
  6.     android:id=“@+id/listView_animation2”
  7.     android:persistentDrawingCache=“animation|scrolling”
  8.     android:layoutAnimation=“@anim/animation2_drawable”
  9.     android:layout_height=“wrap_content”></ListView>
  10. </LinearLayout>
  11. <!–   
  12.     我們可以看到,在ListView的佈局設定中,我們設定了兩個和動畫相關的屬性:  
  13.     android:persistentDrawingCache:該屬性建議進行設定,它會對動畫和滾動效果進行優化。  
  14.     android:layoutAnimation:當前佈局容器所對應的動畫關聯檔案,注意,這裡指定的是動畫關聯檔案,而並非動畫宣告檔案  
  15.  –>
<?xml version=”1.0” encoding=”utf-8”?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:orientation=”vertical”> <ListView android:layout_width=”fill_parent” android:id=”@+id/listView_animation2” android:persistentDrawingCache=”animation|scrolling” android:layoutAnimation=”@anim/animation2_drawable” android:layout_height=”wrap_content”></ListView> </LinearLayout> <!– 我們可以看到,在ListView的佈局設定中,我們設定了兩個和動畫相關的屬性: android:persistentDrawingCache:該屬性建議進行設定,它會對動畫和滾動效果進行優化。 android:layoutAnimation:當前佈局容器所對應的動畫關聯檔案,注意,這裡指定的是動畫關聯檔案,而並非動畫宣告檔案 –>

動畫宣告檔案:

scale_anim.xml

[xhtml] view plain copy print?
  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2. <setxmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:interpolator=“@android:anim/accelerate_interpolator”>
  4.     <scale
  5.     android:fromXScale=“1”
  6.     android:toXScale=“1”
  7.     android:fromYScale=“0.1”
  8.     android:toYScale=“1.0”
  9.     android:duration=“1000”
  10.     android:pivotX=“50%”
  11.     android:pivotY=“50%”
  12.     android:startOffset=“100”>
  13.     </scale>
  14. </set>
  15. <!–   
  16.     動畫宣告檔案     該檔案位於res/anim資料夾下  
  17.     對動畫的具體行為進行定義:  
  18.     android:fromXScale=“1”
  19.     android:toXScale=“1”指定了在X軸上,不進行縮放  
  20.     android:fromYScale=“0.1”
  21.     android:toYScale=“1.0” 指定了再Y軸上,從十分之一開始方法,一直放大到正常大小  
  22.     android:duration=“1000”動畫展示的時間  
  23.     android:pivotX=“50%”
  24.     android:pivotY=“50%” 在動畫執行的中間點,物件的大小在X/Y軸上都是50%  
  25.     android:startOffset=“100” 改動畫執行之前等待的毫秒數  
  26.  –>
<?xml version=”1.0” encoding=”utf-8”?> <set xmlns:android=”http://schemas.android.com/apk/res/android” android:interpolator=”@android:anim/accelerate_interpolator”> <scale android:fromXScale=”1” android:toXScale=”1” android:fromYScale=”0.1” android:toYScale=”1.0” android:duration=”1000” android:pivotX=”50%” android:pivotY=”50%” android:startOffset=”100”> </scale> </set> <!– 動畫宣告檔案 該檔案位於res/anim資料夾下 對動畫的具體行為進行定義: android:fromXScale=”1” android:toXScale=”1”指定了在X軸上,不進行縮放 android:fromYScale=”0.1” android:toYScale=”1.0” 指定了再Y軸上,從十分之一開始方法,一直放大到正常大小 android:duration=”1000”動畫展示的時間 android:pivotX=”50%” android:pivotY=”50%” 在動畫執行的中間點,物件的大小在X/Y軸上都是50% android:startOffset=”100” 改動畫執行之前等待的毫秒數 –>

動畫關聯檔案:

animation2_drawable.xml

[xhtml] view plain copy print?
  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2. <layoutAnimationxmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:delay=“30%”
  4.     android:animationOrder=“reverse”
  5.     android:animation=“@anim/scale_anim”
  6. >
  7. </layoutAnimation>
  8. <!– 動畫關聯檔案      該檔案位於res/anim資料夾下  
  9.     該檔案是容器和動畫宣告檔案的中間媒介,它繫結到了一個動畫宣告檔案,  
  10.     並且對該動畫的一些播放屬性進行了設定,例如這裡的  
  11.     android:delay 每一項動畫應該在延遲動畫總時間的30%開始執行(當前列表有多個動畫時使用),  
  12.                 延遲動畫總時間對應著動畫宣告檔案中android:startOffset的總和  
  13.     android:animationOrder:列表中的動畫的執行順序(當前列表有多個動畫時使用)  
  14.     android:animation 指定了動畫宣告檔案  
  15.  –>
<?xml version=”1.0” encoding=”utf-8”?> <layoutAnimation xmlns:android=”http://schemas.android.com/apk/res/android” android:delay=”30%” android:animationOrder=”reverse” android:animation=”@anim/scale_anim” > </layoutAnimation> <!– 動畫關聯檔案 該檔案位於res/anim資料夾下 該檔案是容器和動畫宣告檔案的中間媒介,它繫結到了一個動畫宣告檔案, 並且對該動畫的一些播放屬性進行了設定,例如這裡的 android:delay 每一項動畫應該在延遲動畫總時間的30%開始執行(當前列表有多個動畫時使用), 延遲動畫總時間對應著動畫宣告檔案中android:startOffset的總和 android:animationOrder:列表中的動畫的執行順序(當前列表有多個動畫時使用) android:animation 指定了動畫宣告檔案 –>

程式碼中的註釋已經說得很明白了,我就不多說了。我們這裡需要注意的是,佈局檔案中,動畫宣告檔案和動畫關聯檔案的位置都是在res/anim資料夾下哦。

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

上面只是展示了一個縮放動畫,那麼常見的動畫還有那些呢?

[xhtml] view plain copy print?
  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2. <setxmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:interpolator=“@android:anim/accelerate_interpolator”>
  4.     <!– rotate旋轉動畫,圍繞著文字的中心旋轉一圈 –>
  5.     <rotate
  6.         android:fromDegrees=“0.0”
  7.         android:toDegrees=“360”
  8.         android:pivotY=“50%”
  9.         android:pivotX=“50%”
  10.         android:duration=“5000”
  11.     ></rotate>
  12.     <!– translate代表著移動動畫,改動畫將文字從當前所分配的顯示空間的頂部移動到底部 –>
  13.     <translate
  14.         android:fromYDelta=“-100%”
  15.         android:toYDelta=“0”
  16.         android:duration=“10000”
  17.     ></translate>
  18.     <!– alpha代表著可見度漸變動畫,從不可見,變為完全可見 –>
  19.     <alpha
  20.         android:fromAlpha=“0.0”
  21.         android:toAlpha=“1.0”
  22.         android:duration=“3000”
  23.     ></alpha>
  24. </set>
<?xml version=”1.0” encoding=”utf-8”?> <set xmlns:android=”http://schemas.android.com/apk/res/android” android:interpolator=”@android:anim/accelerate_interpolator”> <!– rotate旋轉動畫,圍繞著文字的中心旋轉一圈 –> <rotate android:fromDegrees=”0.0” android:toDegrees=”360” android:pivotY=”50%” android:pivotX=”50%” android:duration=”5000” ></rotate> <!– translate代表著移動動畫,改動畫將文字從當前所分配的顯示空間的頂部移動到底部 –> <translate android:fromYDelta=”-100%” android:toYDelta=”0” android:duration=”10000” ></translate> <!– alpha代表著可見度漸變動畫,從不可見,變為完全可見 –> <alpha android:fromAlpha=”0.0” android:toAlpha=”1.0” android:duration=”3000” ></alpha> </set>

在這裡,我們可以看到,無論是哪個動畫宣告檔案中,都有這麼一行程式碼:

android:interpolator=”@android:anim/accelerate_interpolator”

那麼,這行程式碼到底是幹什麼用的呢?

這東西,我們在android中叫做插值器。它告訴系統我們的動畫的實現細節,例如一個顏色隨著時間的變化而變化時,是按照線性變換,還是指數變換?還是開始的時候很快,後邊漸漸地開始變慢呢?

我們都知道,@android方式代表著,這裡引用的是android系統提供的一個xml佈局檔案。實際上,這個佈局檔案是android.view.animation下一個類的對映。這一類的類主要有:

AccelerateDecelerateInterpolator

AccelrateInterpolator

CycleInterpolator

LinearInterpolator

……