Android】Android动画片入门Animation 、AnimationUtils_Android

Android】Android动画入门Animation 、AnimationUtils

本讲内容：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的内容如下：

01package?android.basic.lesson24;
02?
03import?android.app.Activity;
04import?android.os.Bundle;
05import?android.view.View;
06import?android.view.View.OnClickListener;
07import?android.view.animation.Animation;
08import?android.view.animation.AnimationUtils;
09import?android.widget.ImageButton;
10?
11public?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目录下

firefox_animation_0 ? firefox_animation_1 ? firefox_animation_10 ? firefox_animation_11 ? firefox_animation_12 ? firefox_animation_13 ? firefox_animation_14 ? firefox_animation_15 ? firefox_animation_16 ? firefox_animation_17 ? firefox_animation_18 ? firefox_animation_19 ? firefox_animation_2 ? firefox_animation_20 ? firefox_animation_21 ? firefox_animation_22 ? firefox_animation_23 ? firefox_animation_24 ? firefox_animation_3 ? firefox_animation_4 ? firefox_animation_5 ? firefox_animation_6 ? firefox_animation_7 ? firefox_animation_8 ? firefox_animation_9

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中的内容如下：

01package?android.basic.lesson24;
02?
03import?android.app.Activity;
04import?android.graphics.drawable.AnimationDrawable;
05import?android.os.Bundle;
06import?android.view.View;
07import?android.view.View.OnClickListener;
08import?android.widget.Button;
09import?android.widget.ImageView;
10?
11public?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