本講內(nèi)容：Android 動(dòng)畫(huà)入門(mén)指南
1、補(bǔ)間動(dòng)畫(huà)
2、逐幀動(dòng)畫(huà)
Android中動(dòng)畫(huà)的實(shí)現(xiàn)分兩種方式，一種方式是補(bǔ)間動(dòng)畫(huà) Teen Animation，就是說(shuō)你定義一個(gè)開(kāi)始和結(jié)束，中間的部分由程序運(yùn)算得到。另一種叫逐幀動(dòng)畫(huà) Frame Animation，就是說(shuō)一幀一幀的連起來(lái)播放就變成了動(dòng)畫(huà)。有點(diǎn)Flash基礎(chǔ)的同學(xué)理解起來(lái)會(huì)很容易。接下來(lái)我們一個(gè)一個(gè)學(xué)習(xí)。
一、補(bǔ)間動(dòng)畫(huà) Teen Animation
Android中實(shí)現(xiàn)補(bǔ)間動(dòng)畫(huà)的思路是這樣的，
1、首先用XML定義一個(gè)動(dòng)畫(huà)效果
2、依據(jù)這個(gè)XML使用AnimationUtils工具類(lèi)創(chuàng)建一個(gè)Animationd對(duì)象
3、調(diào)用View組件的startAnimation方法實(shí)現(xiàn)動(dòng)畫(huà)。
接下來(lái)我們用一個(gè)例子來(lái)看一下。
1、創(chuàng)建一個(gè)項(xiàng)目 Lesson24_Animation，主Activity名字叫MainActivity.java
2、在res目錄下創(chuàng)建一個(gè)anim目錄，在目錄下創(chuàng)建下面五個(gè)動(dòng)畫(huà)定義文件，需要注意的是這5個(gè)文件在是2.2下調(diào)試通過(guò)的，網(wǎng)上很多文檔的xml是無(wú)法通過(guò)IDE的檢查的，可能是新版本檢查更嚴(yán)格了。
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的內(nèi)容如下：
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
|
//定義監(jiān)聽(tīng)器
|
26
|
OnClickListener ocl =
new
OnClickListener() {
|
27
|
28
|
@Override
|
29
|
public
void
onClick(View v) {
|
30
|
switch
(v.getId()) {
|
31
|
case
R.id.ImageButton01:
|
32
|
//創(chuàng)建Animation對(duì)象
|
33
|
Animation ani1 = AnimationUtils.loadAnimation(
|
34
|
getApplicationContext(), R.anim.alpha_animation);
|
35
|
//組件播放動(dòng)畫(huà)
|
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
|
//綁定監(jiān)聽(tīng)器
|
65
|
ib1.setOnClickListener(ocl);
|
66
|
ib2.setOnClickListener(ocl);
|
67
|
ib3.setOnClickListener(ocl);
|
68
|
ib4.setOnClickListener(ocl);
|
69
|
ib5.setOnClickListener(ocl);
|
70
|
}
|
71
|
}
|
4、運(yùn)行程序，查看結(jié)果
原始圖
點(diǎn)擊第一個(gè)按鈕的透明度變化效果
點(diǎn)擊第二個(gè)按鈕的縮放效果，這里看到的是兩個(gè)縮放效果同時(shí)作用疊加的效果。也就是說(shuō)默認(rèn)情況下效果是同時(shí)發(fā)生的，而不是先后執(zhí)行的，除非你使用 startoffset屬性指定。同學(xué)們看這一講最重要的還是自己練習(xí)來(lái)體會(huì)。
點(diǎn)擊第三個(gè)按鈕的位移效果，這個(gè)例子里我們可以清楚看到android:startOffset="2000"的作用，數(shù)獨(dú)按鈕前2秒向右移了300像素，后2秒又回到原處，注意第二個(gè)translate中的負(fù)值參數(shù)，它清晰的告訴我們位移數(shù)據(jù)是相對(duì)自身當(dāng)時(shí)位置的。
點(diǎn)擊第四個(gè)按鈕的旋轉(zhuǎn)效果，負(fù)的度數(shù)表示逆時(shí)針旋轉(zhuǎn)。
點(diǎn)擊第五個(gè)按鈕的復(fù)合動(dòng)畫(huà)效果，這個(gè)效果的代碼我是直接粘貼的官方幫助文檔里的代碼，看著效果還不賴^_^
二、逐幀動(dòng)畫(huà)
我們知道，Android是不支持Gif動(dòng)畫(huà)的，也不建議使用Gif動(dòng)畫(huà)，比較不幸的是到Android 2.2版本為止也不支持APNG這種png動(dòng)畫(huà)格式，所以我們制作只能用多張png圖片逐幀播放的方式來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。下面我們用一個(gè)例子來(lái)學(xué)習(xí)一下逐幀動(dòng)畫(huà)。
1、新建一個(gè)項(xiàng)目 Lesson24_FrameAnimation , 主Acitivy名字叫 MainFrameAnimation.java
2、拷貝下列圖片到 res/drawable目錄下
2、在res/anim目錄下，新建一個(gè)文件 firefox_animation.xml 內(nèi)容如下：
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中寫(xiě)入如下內(nèi)容：
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逐幀動(dòng)畫(huà)示例"
>
|
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
=
"開(kāi)始動(dòng)畫(huà)"
android:id
=
"@+id/Button01"
>
|
10
|
</
button
>
|
11
|
<
button
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:textsize
=
"20sp"
android:text
=
"停止動(dòng)畫(huà)"
android:id
=
"@+id/Button02"
>
|
12
|
</
button
>
|
13
|
</
textview
></
linearlayout
>
|
3、在MainFrameAnimation.javaz中的內(nèi)容如下：
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
|
// 定義點(diǎn)擊監(jiān)聽(tīng)器
|
24
|
OnClickListener ocl =
new
OnClickListener() {
|
25
|
26
|
@Override
|
27
|
public
void
onClick(View v) {
|
28
|
29
|
// 定義"動(dòng)畫(huà)可畫(huà)"對(duì)象，我起的名字，你看著不順眼就當(dāng)不存在^_^
|
30
|
AnimationDrawable ad = (AnimationDrawable) iv.getBackground();
|
31
|
32
|
switch
(v.getId()) {
|
33
|
case
R.id.Button01:
|
34
|
//調(diào)用動(dòng)畫(huà)可畫(huà)對(duì)象的開(kāi)始播放方法
|
35
|
ad.start();
|
36
|
break
;
|
37
|
case
R.id.Button02:
|
38
|
//調(diào)用動(dòng)畫(huà)可畫(huà)對(duì)象的停止播放方法
|
39
|
ad.stop();
|
40
|
break
;
|
41
|
}
|
42
|
}
|
43
|
};
|
44
|
45
|
//綁定監(jiān)聽(tīng)器
|
46
|
b1.setOnClickListener(ocl);
|
47
|
b2.setOnClickListener(ocl);
|
48
|
}
|
49
|
}
|
4、運(yùn)行程序，查看效果：
換個(gè)背景再來(lái)一張，可以看到png動(dòng)畫(huà)的透明就是不一般^_^
順便提一下，我的這些可愛(ài)的小狐貍圖標(biāo)，是在APNG這個(gè)項(xiàng)目中找到的，感興趣的朋友去搜搜APNG吧。
本講就到這里吧。
圖片直接鏈接的，顯示不了的話，去源地址看吧。
轉(zhuǎn)載自: http://android.yaohuiji.com/archives/tag/animationutils
【Android】Android動(dòng)畫(huà)入門(mén)Animation 、AnimationUtils
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
