Android动画之补间动画(TweenAnimation)详解

最新推荐文章于 2022-04-21 20:05:02 发布

程序猿、啊啊啊

最新推荐文章于 2022-04-21 20:05:02 发布

阅读量751

点赞数 1

文章标签： Android 动画补间动画移位缩放旋转透明度

本文链接：https://blog.youkuaiyun.com/xiaohao0724/article/details/54614024

版权

Android动画专栏收录该内容

2 篇文章

订阅专栏

转载请注明出处：http://blog.youkuaiyun.com/xiaohao0724/article/details/54614024

通过上篇的学习相信大家对帧动画有了一定的了解，接下来我们来学习补间动画,效果图如下:

看完动感美女相信大家都不淡定了吧哇哈哈哈...

补间动画(TweenAnimation)分为五种：

一、移位动画(TranslateAnimation)

二、缩放动画(ScaleAnimation)

三、旋转动画(RotateAnimation)

四、透明度变化动画(AlphaAnimation)

五、组合动画(AnimationSet)

每种动画都有两种实现方式:

1、代码实现

2、在res/anim下面以XML文件实现

今天我就带大家来学习五种动画分别都已两种方式实现。

这五种动画都继承了Animation，首先我们写一个工具类来设置动画的属性

AnimationProperty.java

public class AnimationProperty {

	public static <T extends Animation> T setAnimProperty(T animation){
		// 设置动画播放的时间
		animation.setDuration(3000);
		// 设置动画重复播放的次数
		animation.setRepeatCount(2);
		// 设置动画重复播放的模式
		 
	   //往返：TranslateAnimation.REVERSE ; 从头重复：TranslateAnimation.RESTART
		 
		animation.setRepeatMode(TranslateAnimation.REVERSE);
		
		/**
		 * LinearInterpolator(匀速) 
		 * AccelerateInterpolator(先慢后快)
		 * AccelerateDecelerateInterpolator(先慢中快后慢)
		 * DecelerateInterpolator(先快后慢)
		 * CycleInterpolator(循环播放，速度为正弦曲线)
		 * AnticipateInterpolator(先回撤，再匀速向前)
		 * OvershootInterpolator(超过，拉回)
		 * BounceInterpolator(回弹)
		 */
		// 控制动画先慢后快
		animation.setInterpolator(new AccelerateInterpolator());
		// 设置动画结束后效果保留
//		translateAnimation.setFillAfter(true);
		
		return animation;
		
	}
	
}

然后是activity_main.xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="trans"
            android:text="平移" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="scale"
            android:text="缩放" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="rotate"
            android:text="旋转" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="alpha"
            android:text="透明" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="set"
            android:text="组合" />
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:src="@drawable/mv" />

</LinearLayout>

然后一一实现五种动画

一、移位动画(TranslateAnimation)

代码实现移位动画

	/**
	 * 平移动画
	 */
	public void trans(View view) {

		/**
		 * 
		 * float fromXDelta 动画开始的点离当前View X坐标上的差值 
		 * float toXDelta 动画结束的点离当前View X坐标上的差值
		 * float fromYDelta 动画开始的点离当前View Y坐标上的差值 
		 * float toYDelta  动画开始的点离当前View Y坐标上的差值
		 * 
		 */
		//X轴上移动100px,Y轴上移动300px
		// TranslateAnimation translateAnimation=new TranslateAnimation(0, 100, 0, 300);

		 
//		fromXType:相对于哪个控件横向移动;fromXValue 从哪个位置开始横向移动
//		toXType:移动到相对于哪个控件的位置 ;toXValue 移动到的横向最终位置
//		TranslateAnimation(int fromXType, float fromXValue, 
//						   int toXType, float toXValue, 
//						   int fromYType, float fromYValue, 
//						   int toYType, float toYValue);
		
//		 TranslateAnimation.RELATIVE_TO_SELF相对自身控件。数值为0-1.0 百分比
//		 TranslateAnimation.RELATIVE_TO_PARENT相对父布局。 数值为0-1.0 百分比
		TranslateAnimation translateAnimation = new TranslateAnimation(
				//X轴移动,从0移动到相对父控件高度的0.5倍
				TranslateAnimation.RELATIVE_TO_SELF, 0,
				TranslateAnimation.RELATIVE_TO_PARENT, 0.5f,
				//Y轴移动,从0移动到相对自身的高度
				TranslateAnimation.RELATIVE_TO_SELF, 0,
				TranslateAnimation.RELATIVE_TO_SELF, 1.0f);
		//通过代码设置平移动画效果
		imageView.startAnimation(AnimationProperty.setAnimProperty(translateAnimation));
		
		//通过XML设置平移动画效果
		Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
		imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
	

	}

XML 实现移位动画res/anim/translate_anim

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toXDelta="100"
    android:toYDelta="300"/>

<!--
     translate 位置转移动画效果
        整型值:
            fromXDelta 属性为动画起始时 X坐标上的位置    
            toXDelta   属性为动画结束时 X坐标上的位置
            fromYDelta 属性为动画起始时 Y坐标上的位置
            toYDelta   属性为动画结束时 Y坐标上的位置
            注意:
                     没有指定fromXType toXType fromYType toYType 时候，
                     默认是以自己为相对参照物             
        长整型值：
            duration  属性为动画持续时间
            说明:   时间以毫秒为单位
            
  android:interpolator 动画的渲染器  
  1、accelerate_interpolator(动画加速器) 使动画在开始的时候 最慢,然后逐渐加速  
  2、decelerate_interpolator(动画减速器)使动画在开始的时候 最快,然后逐渐减速  
  3、accelerate_decelerate_interpolator（动画加速减速器）  
           中间位置分层:  使动画在开始的时候 最慢,然后逐渐加速           
          使动画在开始的时候 最快,然后逐渐减速  结束的位置最慢
-->

二、缩放动画(ScaleAnimation)

代码实现缩放动画

        /**
	 * 缩放动画
	 */
	public void scale(View view) {
		
		// 把图片的宽从0.5倍放大到2.0倍,高从0.5倍放大到2.0倍
//		ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 2.0f, 0.5f, 2.0f);
		ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 2.0f, 0.5f, 2.0f,
				//以相对自身控件宽的0.5被处缩放
				ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
				//以相对自身控件高的0.5被处缩放
				ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
		//通过代码设置缩放动画效果
		imageView.startAnimation(AnimationProperty.setAnimProperty(scaleAnimation));
		
		//通过XML设置缩放动画效果
		Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
		imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
	}

XML实现缩放动画res/anim/scale_anim

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

<!--
	fromXScale:表示沿着x轴缩放的起始比例
	toXScale:表示沿着x轴缩放的结束比例
	
	fromYScale:表示沿着y轴缩放的起始比例
	toYScale:表示沿着y轴缩放的结束比例
	
	pivotX:缩放中心点的横向坐标(50%为控件的中心点)
	pivotY:缩放中心点的纵向坐标(50%为控件的中心点)

-->

三、旋转动画(RotateAnimation)

代码实现旋转动画

	/**
	 * 旋转动画
	 */
	public void rotate(View view) {
		
		// 将图片从0°旋转到360°
//		RotateAnimation rotateAnimation = new RotateAnimation(0, 360);
		RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
				//相对自身控件宽的0.5倍
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				//自身控件高的0.5倍旋转
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		//通过代码设置旋转动画效果
		imageView.startAnimation(AnimationProperty.setAnimProperty(rotateAnimation));
		
		//通过XML设置旋转动画效果
		Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
		imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
	}

XML实现旋转动画res/anim/rotate_anim

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

<!--
	rotate 旋转动画效果
	pivotX:旋转中心点的横向坐标(50%为控件的中心点)
	pivotY:旋转中心点的纵向坐标(50%为控件的中心点)
	fromDegrees:表示旋转的起始角度  
	toDegrees:表示旋转的结束角度  
	repeatCount:旋转的次数  默认值是0 代表旋转1次  如果值是repeatCount=4 旋转5次，值为-1或者infinite时，表示补间动画永不停止  
	repeatMode 设置重复的模式。默认是restart从头重复动画。当repeatCount的值大于0或者为infinite时才有效。  
	还可以设成reverse，显示动画往返执行。
-->

四、透明度变化动画(AlphaAnimation)

代码实现透明度变化动画

	/**
	 * 透明度变化动画
	 */
	public void alpha(View view) {
		
		// 创建透明度的动画对象
		// fromAlpha 初始透明度 0：完全透明 1.0f完全不透明
		AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1.0f);
		//通过代码设置透明动画效果
		imageView.startAnimation(AnimationProperty.setAnimProperty(alphaAnimation));
		
		//通过XML设置透明动画效果
		Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
		imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
	}

XML实现透明度变化动画res/anim/alpha_anim

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toAlpha="1.0" />
<!--
	 fromAlpha :起始透明度  
	 toAlpha:结束透明度  
	 1.0表示完全不透明  
	 0.0表示完全透明  

-->

五、组合动画(AnimationSet)

代码实现组合动画

/**
	 * 
	 * 组合动画合集
	 */
	public void set(View view) {
		// 创建动画集合
		AnimationSet animationSet = new AnimationSet(false);//true表示按照动画的顺序一个一个的播放动画
		animationSet.addAnimation(new TranslateAnimation(0, 10, 0, 30));
		animationSet.addAnimation( new ScaleAnimation(0.5f, 1.5f, 0.5f, 1.5f));
		animationSet.addAnimation(new RotateAnimation(0, 360,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f));
		animationSet.addAnimation(new AlphaAnimation(0, 1.0f));
		
		//代码设置播放动画集合
		imageView.startAnimation(AnimationProperty.setAnimProperty(animationSet));
		
		//通过XML设置动画集合效果
		Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.set_anim);
		imageView.startAnimation(AnimationProperty.setAnimProperty(loadAnimation));
		
	}

XML实现组合动画res/anim/set_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >

    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="10"
        android:toYDelta="30" />

    <scale
        android:duration="3000"
        android:fromXScale="0.5"
        android:fromYScale="0.5"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toDegrees="360" />

    <alpha
        android:duration="2000"
        android:fromAlpha="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1.0" />

</set>

点击下载源码