本讲内容：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目录下
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
