Android_Animation

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

1. Tweened Animations：该类提供了旋转，移动，伸展，淡入淡出等效果
2. Frame-By-Frame Animations：该类可以创建一个Drawable序列，这些Drawable可以按照指定的事件间隔一个一个显示，和动画片差不多

Tweened Animations

Tweened Animations也有四种类型：

1. Alpha：淡入淡出效果
2. Scale：缩放效果
3. Rotate：旋转效果
4. Translate：移动效果

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

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

1. 创建一个AnimationSet对象（AnimationSet是存放多个Animations的集合）
2. 根据需要创建相应的Animation对象
3. 根据需要对Animation对象的各个属性进行设值
4. 将Animation对象添加到AnimationSet对象中
5. 使用控件的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)：设置动画的变化速度

setInterpolator(new AccelerateDecelerateInterpolator())：先加速，后减速

setInterpolator(new AccelerateInterpolator())：加速

setInterpolator(new DecelerateInterpolator())：减速

setInterpolator(new CycleInterpolator())：动画循环播放特定次数，速率改变沿着正弦曲线

setInterpolator(new LinearInterpolator())：匀速

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

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;@Overridepublic 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);}@Overridepublic 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中设置动画效果的步骤：

1. 在res文件夹下新建一个名为anim的文件夹
2. 创建xml文件，并首先加入set标签（set标签就相当于Java代码中的AnimationSet）
3. 在Set标签中加入alpha，scale，rotate，translate标签（相当于Java代码中的AlphaAnimation，ScaleAnimation，RotateAnimation，TranslateAnimation）
4. 在Java代码中使用AnimationUtils的loadAnimation方法来加载XML文件，并得到一个Animation对象
5. 使用控件的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

package com.tianjf;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.AnimationUtils;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;@Overridepublic 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);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.alphaButton:Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);mImageView.startAnimation(alphaAnimation);break;case R.id.scaleButton:Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);mImageView.startAnimation(scaleAnimation);break;case R.id.rotateButton:Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);mImageView.startAnimation(rotateAnimation);break;case R.id.translateButton:Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);mImageView.startAnimation(translateAnimation);break;default:break;}}}

关于属性的讲解，已经在AnimationDemo01中讲解过了，在此就不再重复了。

值得一提的是，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"?><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" />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:gravity="bottom"        android:orientation="vertical" >        <Button            android:id="@+id/frameByFrameButton"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:text="测试Frame-By-Frame动画效果" />    </LinearLayout></LinearLayout>

anim_nv.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;@Overridepublic 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);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.frameByFrameButton:// 为ImageView设置背景资源mImageView.setBackgroundResource(R.drawable.anim_nv);// 通过ImageView得到AnimationDrawableAnimationDrawable 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="vertical" >    <ListView        android:id="@id/android:list"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layoutAnimation="@anim/list_anim_layout"        android:scrollbars="vertical"        android:visibility="gone" />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:gravity="bottom"        android:orientation="vertical" >        <Button            android:id="@+id/button"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:text="测试LayoutAnimation动画效果" />    </LinearLayout></LinearLayout>

item.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;@Overridepublic 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);}@Overridepublic 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主要包含三个方法：

1. onAnimationEnd：动画结束
2. onAnimationStart：动画开始
3. onAnimationRepet：动画重复