【Android】Android动画入门Animation 、AnimationUtils
来源:互联网 发布:刘文展举报 知乎 编辑:程序博客网 时间:2024/06/05 17:09
本讲内容: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
- 【Android】Android动画入门Animation 、AnimationUtils
- 【Android】Android动画入门Animation 、AnimationUtils
- 【Android】Android动画入门Animation 、AnimationUtils
- Android动画Property Animation入门
- Android 移动跟渐变动画代码实现(AnimationUtils)
- 【Android入门 十二】animation动画效果
- Android动画-Android Animation
- 【Android】【动画】Android 动画 (Animation)
- Android 动画效果 --Animation
- Android 动画效果 --Animation
- Android 动画效果 --Animation
- Android Animation动画效果
- android Animation 动画效果
- Android的animation(动画)
- Android animation动画
- Android动画--Frame Animation
- Android Property Animation动画
- Android Animation动画
- Android Makefile中是 如何识别 TARGET_PRODUCT 的
- 自己写 的trim有点问题
- PHP的四书五经(3)
- 【Android】Android动画入门Animation 、AnimationUtils
- [Android]将一个视窗(windows)盖在整个Application的最上面
- 【Android】Android动画入门Animation 、AnimationUtils
- tomcat集群时统计session与在线人数
- ubuntu明明白白安装中文字体
- C# ToString 大全
- Adobe Premiere CS4/5 使用笔记
- Eclipse中的快捷键
- 泡面健康煮法 [Health Tips]
- Why Is Chinese Web Design So Bad?
- 提前祝大家新年快乐!!!