玩转Android---2D图形及动画---动画分析（Tween详细分析）

hualang

浏览: 752500 次
性别:
来自: 成都

最近访客更多访客>>

he00l

heweiping

冷月宫主

essencer

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 高性能Web开发技术
浏览量：19093

: Android杂谈
浏览量：20840

: 玩转Android
浏览量：46538

文章分类

社区版块

存档分类

博客分类：

玩转Android

在Android系统中提供了两种动画实现方式：一种是Tween动画，这种实现方式可以使视图组件移动、放大、缩小以及产生透明度的变化；另一种方式是Frame动画，这是逐帧动画，通过顺序播放排列好的图片来实现的，类似电影。

Tween动画：

Tween动画能完成一系列简单的变化（如位置、尺寸、透明度和旋转等）。例如，在你的程序中有一个ImageView组件，我们通过Tween动画可以使该视图实现放大、缩小、旋转、渐变等。Tween动画类位于android.view.animation包中，该包中包含了一些常用的动画实现类。

Animation:动画抽象类，其他几个实现类继承它
ScaleAnimation：控制尺寸变化的动画类
AlphaAnimation：控制透明度变化的动画类
RotateAnimation：控制旋转变化的动画类
TranslateAnimation：控制位置变化的动画类
AnimationSet：定义动画属性集合类
AnimationUtils：动画工具类

总的来说，Android系统Tween动画提供了四种实现方式。Tween动画的实现凡是有两种：一种是通过硬编码的凡是在程序代码中实现；另一种是在配置文件中定义。Android系统推荐使用配置文件的方法，这种方式可口占星较好。

常用构造方法	参数说明
AlphaAnimation(float fromAlpha, float toAlpha)	fromAlpha：动画开始透明度 toAlpha：动画结束透明度(取值范围0.0~1.0) 1.0表示完全不透明 0.0表示完全透明
ScaleAnimation(float fromX, float toX,float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)	fromX：起始X坐标上的伸缩尺寸 toX：结束X坐标上的伸缩尺寸 fromY：其实Y坐标上的伸缩尺寸 toY：结束Y坐标上的伸缩尺寸 pivotXType：X坐标伸缩模式(取值Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT) pivotXValue：相当于X坐标伸缩值 pivotYType：Y坐标伸缩模式(取值 Animation.ABSOLUTE、 Animation.RELATIVE_TO_SELF、 Animation.RELATIVE_TO_PARENT) pivotYValue：相当于Y坐标伸缩值
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)	fromXDelta:其实X坐标 toXDelta:结束X坐标 fromYDelta:起始Y坐标 toYDelta:结束Y坐标
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, pivotYType, float pivotYValue)	fromDegrees:旋转开始角度 toDegrees:旋转结束角度 pivotXType:X坐标伸缩模式（取值Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF,Animation.RELATIVE_TO_PARENT） pivotXValue:相当于X坐标伸缩值 pivotYType:Y坐标伸缩模式（取值Animation.ABSULUTE, Animation.RELATIVE_TO_SELF,Animation.RELATIVE_TO_PARENT） pivotYValue:相当于Y坐标伸缩值

如果全部选择Animation.ABSOLUTE，其实就是第二个构造函数。

以x轴为例介绍参照与对应值的关系

如果选择参照为Animation.ABSOLUTE，那么对应的值应该是具体的坐标值，比如100到300，指绝对的屏幕像素单位

如果选择参照为Animation.RELATIVE_TO_SELF或者 Animation.RELATIVE_TO_PARENT指的是相对于自身或父控件，

对应值应该理解为相对于自身或者父控件的几倍或百分之多少。

下面是个例子，看看硬编码是如何实现的

布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<Button
			android:id="@+id/ScaleBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Scale"
		/>
		<Button
			android:id="@+id/AlphaBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Alpha"
		/>
		<Button
			android:id="@+id/TranslateBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Translate"
		/>
		<Button
			android:id="@+id/RotateBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Rotate"
		/>
	</LinearLayout>
	<ImageView
		android:id="@+id/Imageview01"
		android:layout_gravity="center"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:src="@drawable/ni_png_0707"
	/>
</LinearLayout>

MainActivity.java

package com.loulijun.AnimaitonTest;

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.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private Button scaleBtn,rotateBtn,alphaBtn,translateBtn;
    private ImageView img;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        img = (ImageView)findViewById(R.id.Imageview01);
        scaleBtn = (Button)findViewById(R.id.ScaleBtn);
        rotateBtn = (Button)findViewById(R.id.RotateBtn);
        alphaBtn = (Button)findViewById(R.id.AlphaBtn);
        translateBtn = (Button)findViewById(R.id.TranslateBtn);
        
        scaleBtn.setOnClickListener(new Button.OnClickListener()
        {

			@Override
			public void onClick(View arg0) {
				//创建伸缩动画
				Animation scaleAnimation = new ScaleAnimation(0f,1f,0f,1f,
						Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_SELF, 0.5f);
				//设置动画持续时间
				scaleAnimation.setDuration(2000);
				//开始动画
				img.startAnimation(scaleAnimation);
			}
        	
        });
        
        rotateBtn.setOnClickListener(new OnClickListener()
        {

			@Override
			public void onClick(View v) {
				//创建rotate旋转动画
				Animation rotateAnimation = new RotateAnimation(0f, +36f, 
						Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_SELF, 0.5f);
				//设置动画持续时间
				rotateAnimation.setDuration(2000);
				//开始动画
				img.startAnimation(rotateAnimation);
			}
        	
        });
        
        translateBtn.setOnClickListener(new OnClickListener()
        {

			@Override
			public void onClick(View v) {
				// 创建位置变化动画
				Animation translateAnimation = new TranslateAnimation(10, 100, 10, 100);
				//设置动画持续时间
				translateAnimation.setDuration(2000);
				//开始动画
				img.startAnimation(translateAnimation);
			}
        	
        });
        
        alphaBtn.setOnClickListener(new OnClickListener()
        {

			@Override
			public void onClick(View v) {
				//创建渐变动画
				Animation alphaAnimation = new AlphaAnimation(0.1f,1.0f);
				//设置动画持续时间
				alphaAnimation.setDuration(2000);
				//开始动画
				img.startAnimation(alphaAnimation);
			}
        	
        });
    }
}

运行效果（四个效果自己尝试下就可以了）

当然，最好是在配置文件中来实现动画

在res/anim目录下定义不同的动画的配置文件，一般要有个set根元素，根元素里面定义不同的动画了，然后通过调用

AnimationUtils.loadAnimation()方法获取动画实例，调用视图组件的startAnimation()方法开启动画即可

主布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<Button
			android:id="@+id/ScaleBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Scale"
		/>
		<Button
			android:id="@+id/AlphaBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Alpha"
		/>
		<Button
			android:id="@+id/TranslateBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Translate"
		/>
		<Button
			android:id="@+id/RotateBtn"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Rotate"
		/>
	</LinearLayout>
	<ImageView
		android:id="@+id/Imageview01"
		android:layout_gravity="center"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:src="@drawable/ni_png_0707"
	/>
</LinearLayout>

然后在res/anim/目录下创建四个布局文件，分别对应四个动画效果的配置

myalpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha
		android:fromAlpha="0.1"
		android:toAlpha="1.0"
		android:duration="2000"
	/>
</set>

myrotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<rotate
		android:fromDegrees="0"
		android:toDegrees="-180"
		android:pivotX="50%"
		android:pivotY="50%"
		android:duration="2000"
	/>
</set>

mytranslate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate
		android:fromXDelta="10"
		android:toXDelta="100"
		android:fromYDelta="10"
		android:toYDelta="100"
		android:duration="2000"
	/>
</set>

myscale.xml

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

下面这个是主程序了，在里面主要是通过AnimationUtils.loadAnimaiton()将上面的动画配置文件加载后，开始动画即可

MainActivity.java

package com.loulijun.animationtest2;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private Button alphaBtn,rotateBtn,translateBtn,scaleBtn;
    private ImageView img;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        img = (ImageView)findViewById(R.id.Imageview01);
        alphaBtn = (Button)findViewById(R.id.AlphaBtn);
        rotateBtn = (Button)findViewById(R.id.RotateBtn);
        translateBtn = (Button)findViewById(R.id.TranslateBtn);
        scaleBtn = (Button)findViewById(R.id.ScaleBtn);
        alphaBtn.setOnClickListener(new Button.OnClickListener()
        {

			@Override
			public void onClick(View v) {
				//设置渐变动画
				Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.myalpha);
				//开始动画
				img.startAnimation(alphaAnimation);
			}
        	
        });
        
        rotateBtn.setOnClickListener(new Button.OnClickListener()
        {

			@Override
			public void onClick(View v) {
				//设置旋转动画
				Animation rotateAnimation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.myrotate);
				//开始动画
				img.startAnimation(rotateAnimation);
			}
        	
        });
        
        translateBtn.setOnClickListener(new Button.OnClickListener()
        {

			@Override
			public void onClick(View v) {
				//设置位置变化动画
				Animation translateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.mytranslate);
				//开始动画
				img.startAnimation(translateAnimation);
			}
        	
        });
        
        scaleBtn.setOnClickListener(new Button.OnClickListener()
        {

			@Override
			public void onClick(View v) {
				//创建伸缩动画
				Animation scaleAnimation = AnimationUtils.loadAnimation(MainActivity.this, 
						R.anim.myscale);
				//开始动画
				img.startAnimation(scaleAnimation);
			}
        	
        });
    }
}

效果如下：

查看图片附件

分享到：

JAVA抽象类和接口的区别 | 玩转Android---2D图形及动画---图片处理

2011-09-26 21:59
浏览 2576
评论(0)
分类:移动开发
查看更多

发表评论

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