`
java-mans
  • 浏览: 11427925 次
文章分类
社区版块
存档分类
最新评论

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;

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

  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;

	@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:
			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;

	@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="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;

	@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主要包含三个方法：

  1. onAnimationEnd：动画结束
  2. onAnimationStart：动画开始
  3. onAnimationRepet：动画重复
分享到：
| 分治+贪心
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics