Android动画之Tween动画实现

最新推荐文章于 2021-05-29 16:07:56 发布

原创最新推荐文章于 2021-05-29 16:07:56 发布 · 892 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Android动画 #Tween动画 #实现

Android开发专栏收录该内容

45 篇文章

订阅专栏

本文介绍了Android平台的Tween动画，包括AlphaAnimation、RotateAnimation、ScaleAnimation和TranslateAnimation等类的使用，通过实例展示了等待动画、开门动画、透明旋转缩放移动动画的实现，并讲解了如何重写View和利用XML资源创建动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 平台提供了两类动画。一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。

第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。

下面就讲一下Tweene Animations。

主要类：

Animation 动画

AlphaAnimation 渐变透明度

RotateAnimation 画面旋转

ScaleAnimation 渐变尺寸缩放

TranslateAnimation 位置移动

AnimationSet 动画集

一、等待动画实现

在我们应用程序当中，经常会使用到等待动画，那么首先我们就来实现这个

1.1首先，当然是布局啦

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff"
    >
    <RelativeLayout
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_centerInParent="true"
        android:background="@drawable/loading_bg" >
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:orientation="vertical" >
            <ProgressBar
        		android:id="@+id/progressBar1"
        		style="?android:attr/progressBarStyleLarge"
        		android:layout_width="wrap_content"
        		android:layout_height="wrap_content"        
        		android:layout_gravity="center_horizontal"
         	/>
        	<TextView
        		android:layout_width="wrap_content"
        		android:layout_height="wrap_content"
        		android:text="正在登录"
       			android:layout_marginTop="10dp"
        		android:textColor="#fff"
        		android:textSize="20sp"
        />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

1.2其次，就是实现啦

MainActivity.java

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//延迟一段时间后跳转到另一个界面
		new Handler().postDelayed(new Runnable(){
			@Override
			public void run(){
				Intent intent = new Intent(MainActivity.this,SecondActivity.class);
				startActivity(intent);
				MainActivity.this.finish();
				Toast.makeText(getApplicationContext(), "跳转成功", Toast.LENGTH_SHORT).show();
			}
		}, 2000);
	}
}

1.3实现效果如图

二、开门动画实现

2.1首先，当然是布局啦

second.xml

<?xml version="1.0" encoding="UTF-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#000"
         >
        
        <ImageView
            android:id="@+id/imageLeft"
            android:scaleType="fitXY"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:src="@drawable/w_left" />
        <ImageView
            android:id="@+id/imageRight"
            android:visibility="visible"
            android:scaleType="fitXY"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentRight="true"            
            android:src="@drawable/w_right" />
        <TextView 
            android:id="@+id/anim_text"
        	android:layout_width="fill_parent" 
        	android:layout_height="wrap_content" 
        	android:gravity="center" 
        	android:layout_alignParentTop="true"
            android:layout_marginTop="35dp"
        	android:text=" \n \nthis is a test!\n \n "         	
        	android:textSize="22sp"
        	android:textColor="#fff" 
        />

    </RelativeLayout>

2.2其次，就是实现啦

SecondActivity.java

public class SecondActivity extends Activity 
{
	private ImageView mLeft;
	private ImageView mRight;
	private TextView mText;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.second);
		
		mLeft = (ImageView)findViewById(R.id.imageLeft);
        mRight = (ImageView)findViewById(R.id.imageRight);
        mText = (TextView)findViewById(R.id.anim_text);
        
        //往左移动
        AnimationSet anim = new AnimationSet(true);
		TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
		mytranslateanim.setDuration(2000);
		anim.setStartOffset(800);
		anim.addAnimation(mytranslateanim);
		anim.setFillAfter(true);
		mLeft.startAnimation(anim);
		
		//往右移动
		AnimationSet anim1 = new AnimationSet(true);
		TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
		mytranslateanim1.setDuration(1500);
		anim1.addAnimation(mytranslateanim1);
		anim1.setStartOffset(800);
		anim1.setFillAfter(true);
		mRight.startAnimation(anim1);
		
		//文字变换
		AnimationSet anim2 = new AnimationSet(true);
		ScaleAnimation myscaleanim = new ScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
		myscaleanim.setDuration(1000);
		AlphaAnimation myalphaanim = new AlphaAnimation(1,0.0001f);
		myalphaanim.setDuration(1500);
		anim2.addAnimation(myscaleanim);
		anim2.addAnimation(myalphaanim);
		anim2.setFillAfter(true);
		mText.startAnimation(anim2);
		
		
		//持续一段时间后跳转
		new Handler().postDelayed(new Runnable(){
			@Override
			public void run(){
				Intent intent = new Intent(SecondActivity.this,ThirdActivity.class);
				startActivity(intent);
				SecondActivity.this.finish();
			}
		}, 2000);
	}
	
}

2.3实现效果如图

三、透明旋转缩放移动动画实现及其混合实现

3.1首先，当然是布局啦

third.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000" >
    
    <TextView 
        android:id="@+id/tv1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="透明动画测试AlphaAnimation"
        android:textColor="#f00"
        android:textSize="20sp"/>
    
    <View 
        android:layout_width="fill_parent"
        android:layout_height="10dip"
        android:background="?android:attr/listDivider"/>
    
    <TextView 
        android:id="@+id/tv2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="旋转动画测试RotateAnimation"
        android:textColor="#0f0"
        android:textSize="20sp"/>
    
    <View 
        android:layout_width="fill_parent"
        android:layout_height="10dip"
        android:background="?android:attr/listDivider"/>
    
    <TextView 
        android:id="@+id/tv3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="缩放动画测试ScaleAnimation"
        android:textColor="#00f"
        android:textSize="20sp"/>
    
    <View 
        android:layout_width="fill_parent"
        android:layout_height="10dip"
        android:background="?android:attr/listDivider"/>
    
    <TextView 
        android:id="@+id/tv4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="移动动画测试TranslateAnimation"
        android:textColor="#ff0"
        android:textSize="20sp"/>
    
    <View 
        android:layout_width="fill_parent"
        android:layout_height="10dip"
        android:background="?android:attr/listDivider"/>
    
    <TextView 
        android:id="@+id/tv5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="多个动画同时生效测试AnimationSet"
        android:textColor="#f0f"
        android:textSize="20sp"/>
    

</LinearLayout>

3.2其次，就是实现啦

ThirdActivity.java

public class ThirdActivity extends Activity
{
	private TextView mTextView1 = null;
	private TextView mTextView2 = null;
	private TextView mTextView3 = null;
	private TextView mTextView4 = null;
	private TextView mTextView5 = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.third);
		
		//透明动画测试 AlphaAnimation
		mTextView1 = (TextView)findViewById(R.id.tv1);
		//初始化 其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度,第二个参数toAlpha表示动画结束时的透明度
		Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
		//设置动画时间 setDuration用来设置动画持续时间
		alphaAnimation.setDuration(5000);
		mTextView1.startAnimation(alphaAnimation);
		/*其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度， 第二个参数toAlpha表示动画结束时的透明度。 
			setDuration用来设置动画持续时间。*/
		
		//旋转动画测试 RotateAnimation
		mTextView2 = (TextView)findViewById(R.id.tv2);
		Animation rotateAnimation = new RotateAnimation(0f, 360f);
		rotateAnimation.setDuration(5000);
		mTextView2.startAnimation(rotateAnimation);
		/*其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度， 第二个参数toDegrees表示动画结束时的角度。 
			另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。*/
		
		//缩放动画测试 ScaleAnimation
		mTextView3 = (TextView)findViewById(R.id.tv3);
		//初始化
		Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
		//设置动画时间
		scaleAnimation.setDuration(5000);
		mTextView3.startAnimation(scaleAnimation);
		/*第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。
			第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。
			另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。*/
		
		//移动动画测试 TranslateAnimation
		mTextView4 = (TextView)findViewById(R.id.tv4);
		//初始化
		Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
		//设置动画时间
		translateAnimation.setDuration(5000);
		mTextView4.startAnimation(translateAnimation);
		/*第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。
			第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。*/
		
		
		//多个动画同时生效 AnimationSet
		mTextView5 = (TextView)findViewById(R.id.tv5);
		//初始化 Alpha动画
		Animation alphaAnimation5 = new AlphaAnimation(0.1f, 1.0f);
		//初始化 Rotate动画
		Animation rotateAnimation5 = new RotateAnimation(0f, 360f);
		//初始化 Scale动画
		Animation scaleAnimation5 = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
		//初始化 Translate动画
		Animation translateAnimation5 = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
		//动画集
		AnimationSet set = new AnimationSet(true);
		set.addAnimation(alphaAnimation5);
		set.addAnimation(rotateAnimation5);
		set.addAnimation(scaleAnimation5);
		set.addAnimation(translateAnimation5);
		//设置动画时间 (作用到每个动画)
		set.setDuration(5000);
		mTextView5.startAnimation(set);
		
		new Handler().postDelayed(new Runnable(){
			@Override
			public void run(){
				Intent intent = new Intent(ThirdActivity.this,FourActivity.class);
				startActivity(intent);
				ThirdActivity.this.finish();
			}
		}, 6000);
	}
}

3.3实现效果如图

四、重写View实现动画效果

4.1首先，重写View

TweenAnim.java

public class TweenAnim extends View 
{
	//Alpha动画 - 渐变透明度
	private Animation alphaAnimation = null;
	//Sacle动画 - 渐变尺寸缩放
	private Animation scaleAnimation = null;
	//Translate动画 - 位置移动
	private Animation translateAnimation = null;
	//Rotate动画 - 画面旋转
	private Animation rotateAnimation = null;
	
	public TweenAnim(Context context) {
		super(context);
		
		//初始化 Alpha动画
		alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
		//初始化 Rotate动画
		rotateAnimation = new RotateAnimation(0f, 360f);
		//初始化 Scale动画
		scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
		//初始化 Translate动画
		translateAnimation = new TranslateAnimation(0.1f, 300.0f,0.1f,300.0f);
		
		//动画集
		AnimationSet set = new AnimationSet(true);
		set.addAnimation(alphaAnimation);
		set.addAnimation(rotateAnimation);
		set.addAnimation(scaleAnimation);
		set.addAnimation(translateAnimation);
		
		//设置动画时间 (作用到每个动画)
		set.setDuration(5000);
		this.startAnimation(set);
		
	}
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Log.e("Tween", "onDraw");
		//加载一个图片
		canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.background1)).getBitmap(), 0, 0, null);
	}
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		Log.e("Tween", "onKeyDown");
		return true;
	}
	@Override
	public boolean onKeyUp(int keyCode, KeyEvent event) {
		Log.e("Tween", "onKeyDown");
		switch (keyCode) {
			case KeyEvent.KEYCODE_DPAD_UP:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
				break;
			case KeyEvent.KEYCODE_DPAD_DOWN:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
				break;
			case KeyEvent.KEYCODE_DPAD_LEFT:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
				break;
			case KeyEvent.KEYCODE_DPAD_RIGHT:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
				break;
			case KeyEvent.KEYCODE_DPAD_CENTER:
				break;
			default:
				break;
		}
		return true;
	}
}

在Activity中调用该类时，需要注意一定setFocusable(true)，否则焦点在Activity上的话，onKeyUp方法是不会生效的。

4.2其次，就是实现啦

FourActivity.java

public class FourActivity extends Activity
{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		
		TweenAnim anim = new TweenAnim(FourActivity.this);
		anim.setFocusable(true);
		setContentView(anim);
		
		new Handler().postDelayed(new Runnable(){
			@Override
			public void run(){
				Intent intent = new Intent(FourActivity.this,FiveActivity.class);
				startActivity(intent);
				FourActivity.this.finish();
			}
		}, 6000);
	}
}

4.3实现效果如图

五、利用XML实现动画效果

5.1布局文件

透明度alpha_anim.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>

alpha动画参数
XML节点	功能说明
alpha	透明度动画
fromAlpha	动画起始时透明度 0.0表示完全透明 1.0表示完全不透明以上值取0.0-1.0之间的float数据类型的数字
toAlpha	动画结束时透明度

旋转rotate_anim.xml

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

rotate动画参数
XML节点	功能说明
rotate	旋转动画
fromDegrees	动画起始时物件的角度当角度为负数——表示逆时针旋转当角度为正数——表示顺时针旋转 (负数from——to正数:顺时针旋转) (负数from——to负数:逆时针旋转) (正数from——to正数:顺时针旋转) (正数from——to负数:逆时针旋转)
toDegrees	属性为动画结束时物件旋转的角度可以大于360度
pivotX pivotY	为动画相对于物件的X、Y坐标的开始位以上两个属性值从0%-100%中取值 50%为物件的X或Y方向坐标上的中点位置

缩放scale_anim.xml

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

scale动画参数
XML节点	功能说明
scale	缩放动画
fromXScale[float] fromYScale[float]	动画起始时，X、Y坐标上的伸缩尺寸 0.0表示收缩到没有 1.0表示正常无伸缩值小于1.0表示收缩值大于1.0表示放大
toXScale [float] toYScale[float]	动画结束时，X、Y坐标上的伸缩尺寸
pivotX[float] pivotY[float]	动画相对于物件的X、Y坐标的开始位置从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置

移动translate_anim.xml

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

translate动画参数
XML节点	功能说明
translate	移动动画
fromXDelta toXDelta	动画、结束起始时 X坐标上的位置
fromYDelta toYDelta	动画、结束起始时 Y坐标上的位置

Tween Animation共同的节点属性

属性[类型]	功能	备注
Duration[long]	属性为动画持续时间	时间以毫秒为单位
fillAfter [boolean]	当设置为true ，该动画转化在动画结束后被应用
fillBefore[boolean]	当设置为true ，该动画转化在动画开始前被应用
interpolator	指定一个动画的插入器	有一些常见的插入器 accelerate_decelerate_interpolator 加速-减速动画插入器 accelerate_interpolator 加速-动画插入器 decelerate_interpolator 减速- 动画插入器其他的属于特定的动画效果
repeatCount[int]	动画的重复次数
RepeatMode[int]	定义重复的行为	1：重新开始 2：plays backward
startOffset[long]	动画之间的时间间隔，从上次动画停多少时间开始执行下个动画
zAdjustment[int]	定义动画的Z Order的改变	0：保持Z Order不变 1：保持在最上层 -1：保持在最下层

5.2其次，就是重写View啦

TweenAnim2.java

public class TweenAnim2 extends View {
	//Alpha动画 - 渐变透明度
	private Animation alphaAnimation = null;
	//Sacle动画 - 渐变尺寸缩放
	private Animation scaleAnimation = null;
	//Translate动画 - 位置移动
	private Animation translateAnimation = null;
	//Rotate动画 - 画面旋转
	private Animation rotateAnimation = null;
	public TweenAnim2(Context context) {
		super(context);
		
		//初始化 Alpha动画
		alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
		//初始化 Rotate动画
		rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);
		//初始化 Scale动画
		scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);
		//初始化 Translate动画
		translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
		
		//动画集
		AnimationSet set = new AnimationSet(true);
		set.addAnimation(alphaAnimation);
		set.addAnimation(rotateAnimation);
		set.addAnimation(scaleAnimation);
		set.addAnimation(translateAnimation);
		
		//设置动画时间 (作用到每个动画)
		set.setDuration(5000);
		this.startAnimation(set);
	}
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Log.e("Tween", "onDraw");
		//加载一个图片
		canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.background2)).getBitmap(), 0, 0, null);
	}
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		Log.e("Tween", "onKeyDown");
		return true;
	}
	@Override
	public boolean onKeyUp(int keyCode, KeyEvent event) {
		Log.e("Tween", "onKeyDown");
		switch (keyCode) {
			case KeyEvent.KEYCODE_DPAD_UP:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
				break;
			case KeyEvent.KEYCODE_DPAD_DOWN:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
				this.startAnimation(rotateAnimation);
				break;
			case KeyEvent.KEYCODE_DPAD_LEFT:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
				break;
			case KeyEvent.KEYCODE_DPAD_RIGHT:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
				break;
			case KeyEvent.KEYCODE_DPAD_CENTER:
				Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
				break;
			default:
				break;
		}
		return true;
	}
}

5.3然后，就是实现啦

FiveActivity.java

public class FiveActivity extends Activity 
{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		
		TweenAnim2 anim = new TweenAnim2(FiveActivity.this);
		anim.setFocusable(true);
		setContentView(anim);
	}
}

5.4实现效果如图