Android開發之圖形圖像與動畫(三)Animation效果的XML實現

2020-04-11 12:32:11

字體：大中小

來源：轉載

供稿：網友

使用XML來定義Tween Animation
動畫的XML文件在工程中res/anim目錄，這個文件必須包含一個根元素，可以使<alpha><scale> <translate> <rotate>插值元素或者是把上面的元素都放入<set>元素組中，默認情況下，所以的動畫指令都是同時發生的，為了讓他們按序列發生，需要設置一個特殊的屬性startOffset。動畫的指令定義了你想要發生什么樣的轉換，當他們發生了，應該執行多長時間，轉換可以是連續的也可以使同時的。例如，你讓文本內容從左邊移動到右邊，然后旋轉180度，或者在移動的過程中同時旋轉，沒個轉換需要設置一些特殊的參數（開始和結束的大小尺寸的大小變化，開始和結束的旋轉角度等等，也可以設置些基本的參數（例如，開始時間與周期），如果讓幾個轉換同時發生，可以給它們設置相同的開始時間，如果按序列的話，計算開始時間加上其周期。
Tween Animation共同的節點屬性

屬性[類型]	功能	備注
Duration[long]	屬性為動畫持續時間	時間以毫秒為單位
fillAfter [boolean]	當設置為true ，該動畫轉化在動畫結束后被應用
fillBefore[boolean]	當設置為true ，該動畫轉化在動畫開始前被應用
interpolator	指定一個動畫的插入器	有一些常見的插入器 accelerate_decelerate_interpolator 加速-減速動畫插入器 accelerate_interpolator 加速-動畫插入器 decelerate_interpolator 減速- 動畫插入器其他的屬于特定的動畫效果
repeatCount[int]	動畫的重復次數
RepeatMode[int]	定義重復的行為	1：重新開始 2：plays backward
startOffset[long]	動畫之間的時間間隔，從上次動畫停多少時間開始執行下個動畫
zAdjustment[int]	定義動畫的Z Order的改變	0：保持Z Order不變 1：保持在最上層 -1：保持在最下層

表二
XML節點	功能說明
alpha	漸變透明度動畫效果
<alpha android:fromAlpha=”0.1″ android:toAlpha=”1.0″ android:duration=”3000″ />
fromAlpha	屬性為動畫起始時透明度	0.0表示完全透明 1.0表示完全不透明以上值取0.0-1.0之間的float數據類型的數字 duration為動畫持續時間，ms單位
toAlpha	屬性為動畫結束時透明度

表三
scale	漸變尺寸伸縮動畫效果
<scale android:interpolator= “@android:anim/accelerate_decelerate_interpolator” android:fromXScale=”0.0″ android:toXScale=”1.4″ android:fromYScale=”0.0″ android:toYScale=”1.4″ android:pivotX=”50%” android:pivotY=”50%” android:fillAfter=”false” android:startOffset=“700” android:duration=”700″ android:repeatCount=”10″ />
fromXScale[float] fromYScale[float]	為動畫起始時，X、Y坐標上的伸縮尺寸	0.0表示收縮到沒有 1.0表示正常無伸縮值小于1.0表示收縮值大于1.0表示放大
toXScale [float] toYScale[float]	為動畫結束時，X、Y坐標上的伸縮尺寸
pivotX[float] pivotY[float]	為動畫相對于物件的X、Y坐標的開始位置	屬性值說明：從0%-100%中取值，50%為物件的X或Y方向坐標上的中點位置

表四
translate	畫面轉換位置移動動畫效果
<translate android:fromXDelta=”30″ android:toXDelta=”-80″ android:fromYDelta=”30″ android:toYDelta=”300″ android:duration=”2000″ />
fromXDelta toXDelta	為動畫、結束起始時 X坐標上的位置
fromYDelta toYDelta	為動畫、結束起始時 Y坐標上的位置

表五
rotate	畫面轉移旋轉動畫效果
<rotate android:interpolator=”@android:anim/accelerate_decelerate_interpolator” android:fromDegrees=”0″ android:toDegrees=”+350″ android:pivotX=”50%” android:pivotY=”50%” android:duration=”3000″ />
fromDegrees	為動畫起始時物件的角度	說明當角度為負數――表示逆時針旋轉當角度為正數――表示順時針旋轉 (負數from――to正數:順時針旋轉) (負數from――to負數:逆時針旋轉) (正數from――to正數:順時針旋轉) (正數from――to負數:逆時針旋轉)
toDegrees	屬性為動畫結束時物件旋轉的角度可以大于360度
pivotX pivotY	為動畫相對于物件的X、Y坐標的開始位	說明：以上兩個屬性值從0%-100%中取值 50%為物件的X或Y方向坐標上的中點位置

下面給出一個完整的XML定義（SDK提供）

復制代碼代碼如下:

 
<SPAN style="FONT-SIZE: 18px"><set android:shareInterpolator="false" xmlns:android="http://schemas.android.com/apk/res/android"> 
<scale 
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
android:fromXScale="1.0" 
android:toXScale="1.4" 
android:fromYScale="1.0" 
android:toYScale="0.6" 
android:pivotX="50%" 
android:pivotY="50%" 
android:fillAfter="false" 
android:duration="700" /> 
<set android:interpolator="@android:anim/decelerate_interpolator"> 
<scale 
android:fromXScale="1.4" 
android:toXScale="0.0" 
android:fromYScale="0.6" 
android:toYScale="0.0" 
android:pivotX="50%" 
android:pivotY="50%" 
android:startOffset="700" 
android:duration="400" 
android:fillBefore="false" /> 
<rotate 
android:fromDegrees="0" 
android:toDegrees="-45" 
android:toYScale="0.0" 
android:pivotX="50%" 
android:pivotY="50%" 
android:startOffset="700" 
android:duration="400" /> 
</set> 
</set></SPAN> 

一下是實現的一個實例的截圖：
pic
所用到的xml文件如下：
1.alpha

復制代碼代碼如下:

 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<alpha 
android:fromAlpha="1.0" 
android:toAlpha="0.0" 
android:startOffset="500" 
android:duration="2000" 
/> 
</set> 

2.rotate

復制代碼代碼如下:

 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<rotate 
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
android:fromDegrees="0" 
android:toDegrees="360" 
android:pivotX="50%" 
android:pivotY="50%" 
android:duration="2000" 
/> 
</set> 

3.scale

復制代碼代碼如下:

 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<scale 
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
android:fromXScale="0.0" 
android:toXScale="1.0" 
android:fromYScale="0.0" 
android:toYScale="1.0" 
android:pivotX="50%" 
android:pivotY="50%" 
android:fillAfter="false" 
android:duration="2000" 
/> 
</set> 

4.translate

復制代碼代碼如下:

 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<translate 
android:fromXDelta="10" 
android:toXDelta="100" 
android:fromYDelta="10" 
android:toYDelta="100" 
android:duration="2000" 
/> 
</set> 

具體的實現源代碼如下：

復制代碼代碼如下:

 
public class Animation_XML_Activity extends Activity { 
private Button button1; 
private Button button2; 
private Button button3; 
private Button button4; 
private ImageView imageView; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_animation__xml_); 
button1=(Button)findViewById(R.id.button_alpha); 
button2=(Button)findViewById(R.id.button_rotate); 
button3=(Button)findViewById(R.id.button_scale); 
button4=(Button)findViewById(R.id.button_translate); 
imageView=(ImageView)findViewById(R.id.imageview); 
button1.setOnClickListener(new MyButton()); 
button2.setOnClickListener(new MyButton()); 
button3.setOnClickListener(new MyButton()); 
button4.setOnClickListener(new MyButton()); 
} 
class MyButton implements OnClickListener{ 
@Override 
public void onClick(View v) { 
// TODO Auto-generated method stub 
switch (v.getId()) { 
case R.id.button_alpha: 
Alpha(); 
break; 
case R.id.button_rotate: 
Rotate(); 
break; 
case R.id.button_scale: 
Scale(); 
break; 
case R.id.button_translate: 
Translate(); 
break; 
default: 
break; 
} 
} 

} 
public void Alpha() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.alpha); 
imageView.startAnimation(animation); 
} 
public void Rotate() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.rotate); 
imageView.startAnimation(animation); 
} 
public void Scale() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.scale); 
imageView.startAnimation(animation); 
} 
public void Translate() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.translate); 
imageView.startAnimation(animation); 
} 
@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.activity_animation__xml_, menu); 
return true; 
} 
} 