Android中Animation详解

2024-11-13 来源：个人技术集锦

Animation从总体来说可以分为两类：

一、Tweened Animations

Tweened Animations也有四种类型：

Alpha：淡入淡出效果
Scale：缩放效果
Rotate：旋转效果
Translate：移动效果

设置动画效果可以在XML文件中设置，也可以在Java代码中设置。我们先来讲解在Java代码中怎么设置这四种动画效果

Java代码中设置动画效果的步骤：

创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合）
根据需要创建相应的Animation对象
根据需要对Animation对象的各个属性进行设值
将Animation对象添加到AnimationSet对象中
使用控件的startAnimation()方法执行AnimationSet

Java代码中的通用属性：

setDuration(long durationMillis)：设置动画持续事件（单位：毫秒）
setFillAfter(boolean fillAfter)：如果fillAfter设为true，则动画执行后，控件将停留在动画结束的状态
setFillBefore(boolean fillBefore)：如果fillBefore设为true，则动画执行后，控件将回到动画开始的状态
setStartOffset(long startOffset)：设置动画执行之前等待的时间（单位：毫秒）
setRepeatCount(int repeatCount)：设置动画重复的次数
setInterpolator(Interpolator i)：设置动画的变化速度

Java代码中设置动画效果的Demo（AnimationDemo01）：

main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="100dip" android:src="@drawable/ic_launcher" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="bottom" android:orientation="vertical" > <Button android:id="@+id/alphaButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="测试alpha动画效果" /> <Button android:id="@+id/scaleButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="测试scale动画效果" /> <Button android:id="@+id/rotateButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="测试rotate动画效果" /> <Button android:id="@+id/translateButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="测试translate动画效果" /> </LinearLayout> </LinearLayout>
AnimationDemoActivity.java

package com.tianjf; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; public class AnimationDemoActivity extends Activity implements OnClickListener { private ImageView mImageView; private Button mAlphaButton; private Button mScaleButton; private Button mRotateButton; private Button mTranslateButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mImageView = (ImageView) findViewById(R.id.imageView); mAlphaButton = (Button) findViewById(R.id.alphaButton); mScaleButton = (Button) findViewById(R.id.scaleButton); mRotateButton = (Button) findViewById(R.id.rotateButton); mTranslateButton = (Button) findViewById(R.id.translateButton); mAlphaButton.setOnClickListener(this); mScaleButton.setOnClickListener(this); mRotateButton.setOnClickListener(this); mTranslateButton.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.alphaButton: // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合） AnimationSet animationSet = new AnimationSet(true); // 创建一个AlphaAnimation对象（参数表示从完全不透明到完全透明） AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0); // 设置动画执行的时间（单位：毫秒） alphaAnimation.setDuration(1000); // 将AlphaAnimation对象添加到AnimationSet当中 animationSet.addAnimation(alphaAnimation); // 使用ImageView的startAnimation方法开始执行动画 mImageView.startAnimation(animationSet); break; case R.id.scaleButton: // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合） animationSet = new AnimationSet(true); // 创建一个ScaleAnimation对象（以某个点为中心缩放） ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1, 0.1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // 设置动画执行之前等待的时间（单位：毫秒） scaleAnimation.setStartOffset(1000); // 设置动画执行的时间（单位：毫秒） scaleAnimation.setDuration(2000); // 如果fillAfter设为true，则动画执行后，控件将停留在动画结束的状态 // 运行了一下发现以下奇怪的现象 // scaleAnimation.setFillAfter(true);不会停留在动画结束的状态 // animationSet.setFillAfter(true);则会停留在动画结束的状态 animationSet.setFillAfter(true); // 将ScaleAnimation对象添加到AnimationSet当中 animationSet.addAnimation(scaleAnimation); // 使用ImageView的startAnimation方法开始执行动画 mImageView.startAnimation(animationSet); break; case R.id.rotateButton: // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合） animationSet = new AnimationSet(true); // 创建一个RotateAnimation对象（以某个点为圆心旋转360度） RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.25f); // 设置动画执行的时间（单位：毫秒） rotateAnimation.setDuration(5000); // 将RotateAnimation对象添加到AnimationSet当中 animationSet.addAnimation(rotateAnimation); // 使用ImageView的startAnimation方法开始执行动画 mImageView.startAnimation(animationSet); break; case R.id.translateButton: // 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合） animationSet = new AnimationSet(true); // 创建一个RotateAnimation对象（从某个点移动到另一个点） TranslateAnimation translateAnimation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.0f); // 设置动画执行的时间（单位：毫秒） translateAnimation.setDuration(1000); // 将TranslateAnimation对象添加到AnimationSet当中 animationSet.addAnimation(translateAnimation); // 使用ImageView的startAnimation方法开始执行动画 mImageView.startAnimation(animationSet); break; default: break; } } }
AlphaAnimation很简单，不多说，直接看代码注释

剩下的3中动画效果都涉及到了参考点的问题，下面我们逐一解释

RotateAnimation的创建中用到了Animation.RELATIVE_TO_PARENT（表示以父控件为参考），另外还有2种参考：Animation.RELATIVE_TO_SELF（以自身为参考），Animation.ABSOLUTE（绝对坐标，没有参考）

我们就拿Animation.RELATIVE_TO_PARENT来画图讲解到底RotateAnimation旋转的圆心在哪儿？

例子中，X轴设置了相对于父控件，值是0.5f；Y轴设置了相对于父控件，值是0.25f。也就是说，圆心是0.5个父控件的width和0.25个父控件的height，如下图

那么，控件就围绕着上图的圆心，从0°旋转到360°（如果是0,-360，那么就是0°旋转到-360°）

以父控件为参照理解了的话，以自身为参考就可以举一反三了。

ScaleAnimation的创建的参数的解释：缩放的中心点可以按照上文中的计算方法（如下图），缩小后的图片大小是0.1个自身width，0.1个自身height，相当于缩小90%

TranslateAnimation的创建的参数的解释：参数主要是决定移动的起始点和终了点，计算方法参考上文（如下图）

上面的Java代码设置动画效果有一个缺点：代码的可复用性很低，不利于维护。为了维护，可以使用XML来设置动画效果

XML中设置动画效果的步骤：

在res文件夹下新建一个名为anim的文件夹
创建xml文件，并首先加入set标签（set标签就相当于Java代码中的AnimationSet）
在Set标签中加入alpha，scale，rotate，translate标签（相当于Java代码中的AlphaAnimation，ScaleAnimation，RotateAnimation，TranslateAnimation）
在Java代码中使用AnimationUtils的loadAnimation方法来加载XML文件，并得到一个Animation对象
使用控件的startAnimation()方法执行这个Animation对象

XML中的通用属性：

android:duration：设置动画持续事件（单位：毫秒）
android:fillAfter：如果fillAfter设为true，则动画执行后，控件将停留在动画结束的状态
android:fillBefore：如果fillBefore设为true，则动画执行后，控件将回到动画开始的状态
android:startOffset(long startOffset)：设置动画执行之前等待的时间（单位：毫秒）
android:repeatCount(int repeatCount)：设置动画重复的次数
android:interpolator：设置动画的变化速度

android:interpolator="@android:anim/accelerate_decelerate_interpolator"：先加速，后减速

android:interpolator="@android:anim/accelerate_interpolator"：加速

android:interpolator="@android:anim/decelerate_interpolator"：减速

android:interpolator="@android:anim/cycle_Interpolator"：动画循环播放特定次数，速率改变沿着正弦曲线

android:interpolator="@android:anim/linear_Interpolator"：匀速

以及其他一些特定的动画效果

XML中设置动画效果的Demo（AnimationDemo02）：

main.xml

同上

alpha.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" > <alpha android:duration="500" android:fromAlpha="1.0" android:startOffset="500" android:toAlpha="0.0" /> </set>
rotate.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" > <rotate android:duration="5000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" /> </set>
scale.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" > <scale android:duration="2000" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="0.0" android:toYScale="0.0" /> </set>
translate.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" > <translate android:duration="2000" android:fromXDelta="50%" android:fromYDelta="0%" android:toXDelta="100%" android:toYDelta="100%" /> </set>
AnimationDemoActivity.java

值得一提的是，AnimationDemo01中出现的绝对定位（Animation.ABSOLUTE），相对于自身定位（Animation.RELATIVE_TO_SELF），相对于父控件定位（Animation.RELATIVE_TO_PAREN），在XML文件中用XX（绝对），XX%（相对于自身），XX%p（相对于父控件）

上面两个例子都有一个类叫：AnimationSet（XML文件中是set标签），这个AnimationSet就相当于一个集合，可以存放一个或多个Animation对象，如果我们对AnimationSet设置属性值，那么，这些属性值将应用到AnimationSet下的所有Animation对象中去。

二、Frame-By-Frame Animations

直接上代码（AnimationDemo03）

main.xml

<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/nv1" android:duration="500"/> <item android:drawable="@drawable/nv2" android:duration="500"/> <item android:drawable="@drawable/nv3" android:duration="500"/> <item android:drawable="@drawable/nv4" android:duration="500"/> </animation-list>
AnimationDemoActivity.java

package com.tianjf; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; public class AnimationDemoActivity extends Activity implements OnClickListener { private ImageView mImageView; private Button mFrameByFrameButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mImageView = (ImageView) findViewById(R.id.imageView); mFrameByFrameButton = (Button) findViewById(R.id.frameByFrameButton); mFrameByFrameButton.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.frameByFrameButton: // 为ImageView设置背景资源 mImageView.setBackgroundResource(R.drawable.anim_nv); // 通过ImageView得到AnimationDrawable AnimationDrawable animationDrawable = (AnimationDrawable) mImageView.getBackground(); // 开始执行动画 animationDrawable.start(); break; default: break; } } }

三、LayoutAnimationController

什么是LayoutAnimationController呢？LayoutAnimationController用于为一个Layout里面的一组控件设置相同的动画效果，并可以控制这一组动画在不同的时间出现

LayoutAnimationController可以在XML中设置，也可在Java代码中设置

先看一个在XML中设置的Demo（AnimationDemo04）

list_anim.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="true" > <alpha android:duration="2000" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>
list_anim_layout.xml

<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="1" android:animationOrder="normal" android:animation="@anim/list_anim" />
main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:paddingBottom="1dip" android:paddingLeft="10dip" android:paddingRight="10dip" android:paddingTop="1dip" > <TextView android:id="@+id/user_name" android:layout_width="180dip" android:layout_height="30dip" android:singleLine="true" android:textSize="20dip" /> <TextView android:id="@+id/user_gender" android:layout_width="fill_parent" android:layout_height="fill_parent" android:singleLine="true" android:textSize="20dip" /> </LinearLayout>
AnimationDemoActivity.java

package com.tianjf; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import android.app.ListActivity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ListAdapter; import android.widget.ListView; import android.widget.SimpleAdapter; public class AnimationDemoActivity extends ListActivity implements OnClickListener { private ListView mListView; private Button mButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mListView = getListView(); mButton = (Button) findViewById(R.id.button); mListView.setAdapter(buildListAdapter()); mButton.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.button: mListView.setVisibility(View.VISIBLE); break; default: break; } } private ListAdapter buildListAdapter() { List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>(); HashMap<String, String> m1 = new HashMap<String, String>(); m1.put("user_name", "张三"); m1.put("user_gender", "女"); HashMap<String, String> m2 = new HashMap<String, String>(); m2.put("user_name", "李四"); m2.put("user_gender", "女"); HashMap<String, String> m3 = new HashMap<String, String>(); m3.put("user_name", "王五"); m3.put("user_gender", "男"); list.add(m1); list.add(m2); list.add(m3); SimpleAdapter simpleAdapter = new SimpleAdapter(this, list, R.layout.item, new String[] { "user_name", "user_gender" }, new int[] { R.id.user_name, R.id.user_gender }); return simpleAdapter; } }
layoutAnimation标签中的android:animationOrder属性就是设置动画的显示顺序的，normal就是依次显示出来

如果要在Java代码中设置LayoutAnimation，可以按照如下设置

删掉list_anim_layout.xml文件，删掉main.xml下的ListView的android:layoutAnimation属性，最后，在OnClick方法里面加上如下代码：

Animation animation = (Animation) AnimationUtils.loadAnimation(this, R.anim.list_anim); LayoutAnimationController lac = new LayoutAnimationController(animation); lac.setOrder(LayoutAnimationController.ORDER_NORMAL); lac.setDelay(0.5f); mListView.setLayoutAnimation(lac);

四、AnimationListener

还可以为Animation对象添加AnimationListener监听器。监听动画执行的各阶段。

AnimationListener主要包含三个方法：

onAnimationEnd：动画结束
onAnimationStart：动画开始
onAnimationRepet：动画重复

显示全文

全部栏目

Android中Animation详解

一、Tweened Animations

二、Frame-By-Frame Animations

三、LayoutAnimationController

四、AnimationListener