本講內容：Android 動畫入門指南
1、補間動畫
2、逐幀動畫
Android中動畫的實現分兩種方式，一種方式是補間動畫 Teen Animation，就是說你定義一個開始和結束，中間的部分由程序運算得到。另一種叫逐幀動畫 Frame Animation，就是說一幀一幀的連起來播放就變成了動畫。有點Flash基礎的同學理解起來會很容易。接下來我們一個一個學習。
一、補間動畫 Teen Animation
Android中實現補間動畫的思路是這樣的，
1、首先用XML定義一個動畫效果
2、依據這個XML使用AnimationUtils工具類創建一個Animationd對象
3、調用View組件的startAnimation方法實現動畫。
接下來我們用一個例子來看一下。
1、創建一個項目 Lesson24_Animation，主Activity名字叫MainActivity.java
2、在res目錄下創建一個anim目錄，在目錄下創建下面五個動畫定義文件，需要注意的是這5個文件在是2.2下調試通過的，網上很多文檔的xml是無法通過IDE的檢查的，可能是新版本檢查更嚴格了。
alpha_animation.xml
1
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
2
|
<
set
>
|
3
|
<
alpha
android:duration
=
"300"
android:toalpha
=
"1.0"
android:fromalpha
=
"0.5"
android:repeatmode
=
"restart"
android:repeatcount
=
"1"
android:interpolator
=
"@android:anim/accelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
>
|
4
|
<
alpha
android:duration
=
"3000"
android:toalpha
=
"1.0"
android:fromalpha
=
"0.5"
android:repeatmode
=
"restart"
android:repeatcount
=
"0"
android:interpolator
=
"@android:anim/accelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
>
|
5
|
</
alpha
></
alpha
></
set
>
|
composite_animation.xml
1
|
<
set
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:shareinterpolator
=
"false"
>
|
2
|
<
scale
android:duration
=
"700"
android:interpolator
=
"@android:anim/accelerate_decelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:fillafter
=
"false"
android:pivoty
=
"50%"
android:pivotx
=
"50%"
android:toyscale
=
"0.6"
android:fromyscale
=
"1.0"
android:toxscale
=
"1.4"
android:fromxscale
=
"1.0"
>
|
3
|
</
scale
></
set
><
set
android:interpolator
=
"@android:anim/decelerate_interpolator"
>
|
4
|
<
scale
android:duration
=
"400"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:pivoty
=
"50%"
android:pivotx
=
"50%"
android:toyscale
=
"0.0"
android:fromyscale
=
"0.6"
android:toxscale
=
"0.0"
android:fromxscale
=
"1.4"
android:fillbefore
=
"false"
android:startoffset
=
"700"
>
|
5
|
<
rotate
android:duration
=
"400"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:pivoty
=
"50%"
android:pivotx
=
"50%"
android:toyscale
=
"0.0"
android:startoffset
=
"700"
android:todegrees
=
"-45"
android:fromdegrees
=
"0"
>
|
6
|
</
rotate
></
scale
></
set
>
|
rotate_animation.xml
1
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
2
|
<
set
>
|
3
|
<
rotate
android:duration
=
"4000"
android:interpolator
=
"@android:anim/decelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:pivoty
=
"50%"
android:pivotx
=
"50%"
android:todegrees
=
"-1440"
android:fromdegrees
=
"0"
>
|
4
|
</
rotate
>
|
5
|
</
set
>
|
scale_animation.xml
1
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
2
|
<
set
>
|
3
|
<
scale
android:duration
=
"1000"
android:interpolator
=
"@android:anim/decelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:fillafter
=
"false"
android:pivoty
=
"100%"
android:pivotx
=
"0%"
android:toyscale
=
"1.0"
android:fromyscale
=
"0.0"
android:toxscale
=
"1.0"
android:fromxscale
=
"0.0"
>
|
4
|
</
scale
>
|
5
|
<
scale
android:duration
=
"1000"
android:interpolator
=
"@android:anim/decelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:fillafter
=
"false"
android:pivoty
=
"50%"
android:pivotx
=
"50%"
android:toyscale
=
"1.0"
android:fromyscale
=
"0.0"
android:toxscale
=
"1.0"
android:fromxscale
=
"0.0"
>
|
6
|
</
scale
>
|
7
|
</
set
>
|
translate_animation.xml
1
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
2
|
<
set
>
|
3
|
<
translate
android:duration
=
"2000"
android:interpolator
=
"@android:anim/decelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:toydelta
=
"0"
android:fromydelta
=
"0"
android:toxdelta
=
"300"
android:fromxdelta
=
"0"
>
|
4
|
</
translate
>
|
5
|
<
translate
android:duration
=
"2000"
android:interpolator
=
"@android:anim/decelerate_interpolator"
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:startoffset
=
"2000"
android:toydelta
=
"0"
android:fromydelta
=
"0"
android:toxdelta
=
"-300"
android:fromxdelta
=
"0"
>
|
6
|
</
translate
>
|
7
|
</
set
>
|
3、MainActivity.java的內容如下：
01
|
package
android.basic.lesson24;
|
02
|
03
|
import
android.app.Activity;
|
04
|
import
android.os.Bundle;
|
05
|
import
android.view.View;
|
06
|
import
android.view.View.OnClickListener;
|
07
|
import
android.view.animation.Animation;
|
08
|
import
android.view.animation.AnimationUtils;
|
09
|
import
android.widget.ImageButton;
|
10
|
11
|
public
class
MainAnimation
extends
Activity {
|
12
|
/** Called when the activity is first created. */
|
13
|
@Override
|
14
|
public
void
onCreate(Bundle savedInstanceState) {
|
15
|
super
.onCreate(savedInstanceState);
|
16
|
setContentView(R.layout.main);
|
17
|
18
|
//定義UI組件
|
19
|
final
ImageButton ib1 = (ImageButton) findViewById(R.id.ImageButton01);
|
20
|
final
ImageButton ib2 = (ImageButton) findViewById(R.id.ImageButton02);
|
21
|
final
ImageButton ib3 = (ImageButton) findViewById(R.id.ImageButton03);
|
22
|
final
ImageButton ib4 = (ImageButton) findViewById(R.id.ImageButton04);
|
23
|
final
ImageButton ib5 = (ImageButton) findViewById(R.id.ImageButton05);
|
24
|
25
|
//定義監聽器
|
26
|
OnClickListener ocl =
new
OnClickListener() {
|
27
|
28
|
@Override
|
29
|
public
void
onClick(View v) {
|
30
|
switch
(v.getId()) {
|
31
|
case
R.id.ImageButton01:
|
32
|
//創建Animation對象
|
33
|
Animation ani1 = AnimationUtils.loadAnimation(
|
34
|
getApplicationContext(), R.anim.alpha_animation);
|
35
|
//組件播放動畫
|
36
|
ib1.startAnimation(ani1);
|
37
|
break
;
|
38
|
case
R.id.ImageButton02:
|
39
|
Animation ani2 = AnimationUtils.loadAnimation(
|
40
|
getApplicationContext(), R.anim.scale_animation);
|
41
|
ib2.startAnimation(ani2);
|
42
|
break
;
|
43
|
case
R.id.ImageButton03:
|
44
|
Animation ani3 = AnimationUtils.loadAnimation(
|
45
|
getApplicationContext(), R.anim.translate_animation);
|
46
|
ib3.startAnimation(ani3);
|
47
|
break
;
|
48
|
case
R.id.ImageButton04:
|
49
|
Animation ani4 = AnimationUtils.loadAnimation(
|
50
|
getApplicationContext(), R.anim.rotate_animation);
|
51
|
ib4.startAnimation(ani4);
|
52
|
break
;
|
53
|
case
R.id.ImageButton05:
|
54
|
Animation ani5 = AnimationUtils.loadAnimation(
|
55
|
getApplicationContext(), R.anim.composite_animation);
|
56
|
ib5.startAnimation(ani5);
|
57
|
break
;
|
58
|
}
|
59
|
60
|
}
|
61
|
62
|
};
|
63
|
64
|
//綁定監聽器
|
65
|
ib1.setOnClickListener(ocl);
|
66
|
ib2.setOnClickListener(ocl);
|
67
|
ib3.setOnClickListener(ocl);
|
68
|
ib4.setOnClickListener(ocl);
|
69
|
ib5.setOnClickListener(ocl);
|
70
|
}
|
71
|
}
|
4、運行程序，查看結果
原始圖
點擊第一個按鈕的透明度變化效果
點擊第二個按鈕的縮放效果，這里看到的是兩個縮放效果同時作用疊加的效果。也就是說默認情況下效果是同時發生的，而不是先后執行的，除非你使用 startoffset屬性指定。同學們看這一講最重要的還是自己練習來體會。
點擊第三個按鈕的位移效果，這個例子里我們可以清楚看到android:startOffset="2000"的作用，數獨按鈕前2秒向右移了300像素，后2秒又回到原處，注意第二個translate中的負值參數，它清晰的告訴我們位移數據是相對自身當時位置的。
點擊第五個按鈕的復合動畫效果，這個效果的代碼我是直接粘貼的官方幫助文檔里的代碼，看著效果還不賴^_^
二、逐幀動畫
我們知道，Android是不支持Gif動畫的，也不建議使用Gif動畫，比較不幸的是到Android 2.2版本為止也不支持APNG這種png動畫格式，所以我們制作只能用多張png圖片逐幀播放的方式來實現動畫效果。下面我們用一個例子來學習一下逐幀動畫。
1、新建一個項目 Lesson24_FrameAnimation , 主Acitivy名字叫 MainFrameAnimation.java
2、拷貝下列圖片到 res/drawable目錄下
2、在res/anim目錄下，新建一個文件 firefox_animation.xml 內容如下：
01
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
02
|
<
animation
-list
=
""
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:oneshot
=
"false"
>
|
03
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_0"
>
|
04
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_1"
>
|
05
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_2"
>
|
06
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_3"
>
|
07
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_4"
>
|
08
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_5"
>
|
09
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_6"
>
|
10
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_7"
>
|
11
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_8"
>
|
12
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_9"
>
|
13
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_10"
>
|
14
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_11"
>
|
15
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_12"
>
|
16
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_13"
>
|
17
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_14"
>
|
18
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_15"
>
|
19
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_16"
>
|
20
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_17"
>
|
21
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_18"
>
|
22
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_19"
>
|
23
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_20"
>
|
24
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_21"
>
|
25
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_22"
>
|
26
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_23"
>
|
27
|
<
item
android:duration
=
"50"
android:drawable
=
"@drawable/firefox_animation_24"
>
|
28
|
</
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
item
></
animation
>
|
3、在res/layout/main.xml中寫入如下內容：
01
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
|
02
|
<
linearlayout
xmlns:android
=
"
http://schemas.android.com/apk/res/android
"
android:orientation
=
"vertical"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
|
03
|
04
|
<
textview
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:textsize
=
"20sp"
android:text
=
"Android逐幀動畫示例"
>
|
05
|
06
|
<
imageview
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_margin
=
"10dp"
android:id
=
"@+id/ImageView01"
android:background
=
"@anim/firefox_animation"
>
|
07
|
</
imageview
>
|
08
|
09
|
<
button
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:textsize
=
"20sp"
android:text
=
"開始動畫"
android:id
=
"@+id/Button01"
>
|
10
|
</
button
>
|
11
|
<
button
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:textsize
=
"20sp"
android:text
=
"停止動畫"
android:id
=
"@+id/Button02"
>
|
12
|
</
button
>
|
13
|
</
textview
></
linearlayout
>
|
3、在MainFrameAnimation.javaz中的內容如下：
01
|
package
android.basic.lesson24;
|
02
|
03
|
import
android.app.Activity;
|
04
|
import
android.graphics.drawable.AnimationDrawable;
|
05
|
import
android.os.Bundle;
|
06
|
import
android.view.View;
|
07
|
import
android.view.View.OnClickListener;
|
08
|
import
android.widget.Button;
|
09
|
import
android.widget.ImageView;
|
10
|
11
|
public
class
MainFrameAnimaton
extends
Activity {
|
12
|
/** Called when the activity is first created. */
|
13
|
@Override
|
14
|
public
void
onCreate(Bundle savedInstanceState) {
|
15
|
super
.onCreate(savedInstanceState);
|
16
|
setContentView(R.layout.main);
|
17
|
18
|
// 定義UI組件
|
19
|
Button b1 = (Button) findViewById(R.id.Button01);
|
20
|
Button b2 = (Button) findViewById(R.id.Button02);
|
21
|
final
ImageView iv = (ImageView) findViewById(R.id.ImageView01);
|
22
|
23
|
// 定義點擊監聽器
|
24
|
OnClickListener ocl =
new
OnClickListener() {
|
25
|
26
|
@Override
|
27
|
public
void
onClick(View v) {
|
28
|
29
|
// 定義"動畫可畫"對象，我起的名字，你看著不順眼就當不存在^_^
|
30
|
AnimationDrawable ad = (AnimationDrawable) iv.getBackground();
|
31
|
32
|
switch
(v.getId()) {
|
33
|
case
R.id.Button01:
|
34
|
//調用動畫可畫對象的開始播放方法
|
35
|
ad.start();
|
36
|
break
;
|
37
|
case
R.id.Button02:
|
38
|
//調用動畫可畫對象的停止播放方法
|
39
|
ad.stop();
|
40
|
break
;
|
41
|
}
|
42
|
}
|
43
|
};
|
44
|
45
|
//綁定監聽器
|
46
|
b1.setOnClickListener(ocl);
|
47
|
b2.setOnClickListener(ocl);
|
48
|
}
|
49
|
}
|
4、運行程序，查看效果：
換個背景再來一張，可以看到png動畫的透明就是不一般^_^
順便提一下，我的這些可愛的小狐貍圖標，是在APNG這個項目中找到的，感興趣的朋友去搜搜APNG吧。
本講就到這里吧。
圖片直接鏈接的，顯示不了的話，去源地址看吧。
轉載自: http://android.yaohuiji.com/archives/tag/animationutils
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
