【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

 
<?xmlversion="1.0"encoding="utf-8"?> 
 
<set> 
 
<alphaandroid: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"> 
 
<alphaandroid: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"> 
 
</alpha></alpha></set>

composite_animation.xml

 
<setxmlns:android="http://schemas.android.com/apk/res/android"android:shareinterpolator="false"> 
 
<scaleandroid: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"> 
 
</scale></set><setandroid:interpolator="@android:anim/decelerate_interpolator"> 
 
<scaleandroid: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"> 
 
<rotateandroid: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"> 
 
</rotate></scale></set>

rotate_animation.xml

 
<?xmlversion="1.0"encoding="utf-8"?> 
 
<set> 
 
<rotateandroid: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"> 
 
</rotate> 
 
</set>

scale_animation.xml

 
<?xmlversion="1.0"encoding="utf-8"?> 
 
<set> 
 
<scaleandroid: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"> 
 
</scale> 
 
<scaleandroid: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"> 
 
</scale> 
 
</set>

translate_animation.xml

 
<?xmlversion="1.0"encoding="utf-8"?> 
 
<set> 
 
<translateandroid: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"> 
 
</translate> 
 
<translateandroid: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"> 
 
</translate> 
 
</set>

3、MainActivity.java的内容如下：

 
packageandroid.basic.lesson24; 
 
   02
 
importandroid.app.Activity; 
 
importandroid.os.Bundle; 
 
importandroid.view.View; 
 
importandroid.view.View.OnClickListener; 
 
importandroid.view.animation.Animation; 
 
importandroid.view.animation.AnimationUtils; 
 
importandroid.widget.ImageButton; 
 
   10
 
publicclassMainAnimationextendsActivity { 
 
/** Called when the activity is first created. */ 
 
@Override 
 
publicvoidonCreate(Bundle savedInstanceState) { 
 
super.onCreate(savedInstanceState); 
 
setContentView(R.layout.main); 
 
   17
 
//定义UI组件 
 
finalImageButton ib1 = (ImageButton) findViewById(R.id.ImageButton01); 
 
finalImageButton ib2 = (ImageButton) findViewById(R.id.ImageButton02); 
 
finalImageButton ib3 = (ImageButton) findViewById(R.id.ImageButton03); 
 
finalImageButton ib4 = (ImageButton) findViewById(R.id.ImageButton04); 
 
finalImageButton ib5 = (ImageButton) findViewById(R.id.ImageButton05); 
 
   24
 
//定义监听器 
 
OnClickListener ocl =newOnClickListener() { 
 
   27
 
@Override 
 
publicvoidonClick(View v) { 
 
switch(v.getId()) { 
 
caseR.id.ImageButton01: 
 
//创建Animation对象 
 
Animation ani1 = AnimationUtils.loadAnimation( 
 
getApplicationContext(), R.anim.alpha_animation); 
 
//组件播放动画 
 
ib1.startAnimation(ani1); 
 
break; 
 
caseR.id.ImageButton02: 
 
Animation ani2 = AnimationUtils.loadAnimation( 
 
getApplicationContext(), R.anim.scale_animation); 
 
ib2.startAnimation(ani2); 
 
break; 
 
caseR.id.ImageButton03: 
 
Animation ani3 = AnimationUtils.loadAnimation( 
 
getApplicationContext(), R.anim.translate_animation); 
 
ib3.startAnimation(ani3); 
 
break; 
 
caseR.id.ImageButton04: 
 
Animation ani4 = AnimationUtils.loadAnimation( 
 
getApplicationContext(), R.anim.rotate_animation); 
 
ib4.startAnimation(ani4); 
 
break; 
 
caseR.id.ImageButton05: 
 
Animation ani5 = AnimationUtils.loadAnimation( 
 
getApplicationContext(), R.anim.composite_animation); 
 
ib5.startAnimation(ani5); 
 
break; 
 
} 
 
   59
 
} 
 
   61
 
}; 
 
   63
 
//绑定监听器 
 
ib1.setOnClickListener(ocl); 
 
ib2.setOnClickListener(ocl); 
 
ib3.setOnClickListener(ocl); 
 
ib4.setOnClickListener(ocl); 
 
ib5.setOnClickListener(ocl); 
 
} 
 
   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 内容如下：

 
<?xmlversion="1.0"encoding="utf-8"?> 
 
<animation-list=""xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_0"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_1"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_2"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_3"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_4"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_5"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_6"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_7"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_8"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_9"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_10"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_11"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_12"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_13"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_14"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_15"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_16"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_17"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_18"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_19"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_20"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_21"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_22"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_23"> 
 
<itemandroid:duration="50"android:drawable="@drawable/firefox_animation_24"> 
 
</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中写入如下内容：

 
<?xmlversion="1.0"encoding="utf-8"?> 
 
<linearlayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"> 
 
   03
 
<textviewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:textsize="20sp"android:text="Android逐帧动画示例"> 
 
   05
 
<imageviewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="10dp"android:id="@+id/ImageView01"android:background="@anim/firefox_animation"> 
 
</imageview> 
 
   08
 
<buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textsize="20sp"android:text="开始动画"android:id="@+id/Button01"> 
 
</button> 
 
<buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textsize="20sp"android:text="停止动画"android:id="@+id/Button02"> 
 
</button> 
 
</textview></linearlayout>

3、在MainFrameAnimation.javaz中的内容如下：

 
packageandroid.basic.lesson24; 
 
   02
 
importandroid.app.Activity; 
 
importandroid.graphics.drawable.AnimationDrawable; 
 
importandroid.os.Bundle; 
 
importandroid.view.View; 
 
importandroid.view.View.OnClickListener; 
 
importandroid.widget.Button; 
 
importandroid.widget.ImageView; 
 
   10
 
publicclassMainFrameAnimatonextendsActivity { 
 
/** Called when the activity is first created. */ 
 
@Override 
 
publicvoidonCreate(Bundle savedInstanceState) { 
 
super.onCreate(savedInstanceState); 
 
setContentView(R.layout.main); 
 
   17
 
// 定义UI组件 
 
Button b1 = (Button) findViewById(R.id.Button01); 
 
Button b2 = (Button) findViewById(R.id.Button02); 
 
finalImageView iv = (ImageView) findViewById(R.id.ImageView01); 
 
   22
 
// 定义点击监听器 
 
OnClickListener ocl =newOnClickListener() { 
 
   25
 
@Override 
 
publicvoidonClick(View v) { 
 
   28
 
// 定义"动画可画"对象，我起的名字，你看着不顺眼就当不存在^_^ 
 
AnimationDrawable ad = (AnimationDrawable) iv.getBackground(); 
 
   31
 
switch(v.getId()) { 
 
caseR.id.Button01: 
 
//调用动画可画对象的开始播放方法 
 
ad.start(); 
 
break; 
 
caseR.id.Button02: 
 
//调用动画可画对象的停止播放方法 
 
ad.stop(); 
 
break; 
 
} 
 
} 
 
}; 
 
   44
 
//绑定监听器 
 
b1.setOnClickListener(ocl); 
 
b2.setOnClickListener(ocl); 
 
} 
 
   49}