Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)

本文实例讲述了Android动画之渐变动画(Tween Animation)。分享给大家供大家参考，具体如下：

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

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

下面就讲一下Tweene Animations。

主要类：

Animation                  动画
AlphaAnimation             渐变透明度
RotateAnimation            画面旋转
ScaleAnimation             渐变尺寸缩放
TranslateAnimation         位置移动
AnimationSet               动画集

有了这些类，那么我们如何来实现动画效果呢？

以自定义View为例，该View很简单，画面上只有一个图片。 现在我们要对整个View分别实现各种Tween动画效果。

AlphaAnimation

通过代码实现 AlphaAnimation，如下：

//初始化
Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//设置动画时间 alphaAnimation.setDuration(3000);
this.startAnimation(alphaAnimation);

其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度， 第二个参数toAlpha表示动画结束时的透明度。

setDuration用来设置动画持续时间。

RotateAnimation

代码：

Animation rotateAnimation = new RotateAnimation(0f, 360f);
rotateAnimation.setDuration(1000);
this.startAnimation(rotateAnimation);

其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度， 第二个参数toDegrees表示动画结束时的角度。

另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

ScaleAnimation

代码：

//初始化
Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
//设置动画时间
scaleAnimation.setDuration(500);
this.startAnimation(scaleAnimation);

ScaleAnimation类中

第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。
第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。

另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。

TranslateAnimation

代码：

//初始化
Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//设置动画时间 translateAnimation.setDuration(1000);
this.startAnimation(translateAnimation);

TranslateAnimation类

第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。
第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。

参数详细说明：

表二
XML节点		功能说明
alpha		渐变透明度动画效果
<alpha android:fromAlpha=”0.1″ android:toAlpha=”1.0″ android:duration=”3000″ />
fromAlpha	属性为动画起始时透明度	0.0表示完全透明 1.0表示完全不透明 以上值取0.0-1.0之间的float数据类型的数字
toAlpha	属性为动画结束时透明度

表三
scale		渐变尺寸伸缩动画效果
<scale android:interpolator= “@android:anim/accelerate_decelerate_interpolator” android:fromXScale=”0.0″ android:toXScale=”1.4″ android:fromYScale=”0.0″ android:toYScale=”1.4″ android:pivotX=”50%” android:pivotY=”50%” android:fillAfter=”false” android:startOffset=“700” android:duration=”700″ android:repeatCount=”10″ />
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		画面转换位置移动动画效果
<translate android:fromXDelta=”30″ android:toXDelta=”-80″ android:fromYDelta=”30″ android:toYDelta=”300″ android:duration=”2000″ />
fromXDelta toXDelta	为动画、结束起始时 X坐标上的位置
fromYDelta toYDelta	为动画、结束起始时 Y坐标上的位置

表五
rotate			画面转移旋转动画效果
<rotate android:interpolator=”@android:anim/accelerate_decelerate_interpolator” android:fromDegrees=”0″ android:toDegrees=”+350″ android:pivotX=”50%” android:pivotY=”50%” android:duration=”3000″ />
fromDegrees	为动画起始时物件的角度	说明 当角度为负数——表示逆时针旋转 当角度为正数——表示顺时针旋转 (负数from——to正数:顺时针旋转) (负数from——to负数:逆时针旋转) (正数from——to正数:顺时针旋转) (正数from——to负数:逆时针旋转)
toDegrees	属性为动画结束时物件旋转的角度 可以大于360度
pivotX pivotY	为动画相对于物件的X、Y坐标的开始位	说明：以上两个属性值 从0%-100%中取值 50%为物件的X或Y方向坐标上的中点位置

以上都是单独的使用某个动画，那么如何让多个动画同时生效呢？

答案是 AnimationSet。

初看整个类名，还以为只是用来存放 Animation的一个Set， 细看才发现，该类也是继承自 Animation的。

下面我们实现一个动画，该动画会让图片移动的同时，图片透明度渐变，直接看代码吧。

//初始化 Translate动画
translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//初始化 Alpha动画
alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//动画集
AnimationSet set = new AnimationSet(true);
set.addAnimation(translateAnimation);
set.addAnimation(alphaAnimation);
//设置动画时间 (作用到每个动画)
set.setDuration(1000);
this.startAnimation(set);

是不是觉得很简单呢？

附上整个View类的代码吧。

package com.yfz.view;
import com.yfz.R;
import android.content.Context;
import android.graphics.canvas;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
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;
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);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.e("Tween", "onDraw");
    //加载一个图片
    canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).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");
        alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
        //设置动画时间
        alphaAnimation.setDuration(3000);
        this.startAnimation(alphaAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_DOWN:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
        rotateAnimation = new RotateAnimation(0f, 360f);
        rotateAnimation.setDuration(1000);
        this.startAnimation(rotateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_LEFT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
        //初始化
        scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
        //设置动画时间
        scaleAnimation.setDuration(500);
        this.startAnimation(scaleAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_RIGHT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
        //初始化
        translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
        //设置动画时间
        translateAnimation.setDuration(1000);
        this.startAnimation(translateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_CENTER:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
        //初始化 Translate动画
        translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
        //初始化 Alpha动画
        alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
        //动画集
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(translateAnimation);
        set.addAnimation(alphaAnimation);
        //设置动画时间 (作用到每个动画)
        set.setDuration(1000);
        this.startAnimation(set);
        break;
      default:
        break;
    }
    return true;
  }
}

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

调用该View的代码：

TweenAnim anim = new TweenAnim(Lesson_11.this);
anim.setFocusable(true);
setContentView(anim);

上面通过Java代码，实现了4中不同的Tween动画，其实在Android中完全可以通过 XML文件来实现动画。这种方式可能更加简洁、清晰，也更利于重用。
下面我们分别对这几种动画改用xml来实现。

首先是AlphaAnimation。

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>

不用解释了吧。

RotateAnimation

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="500"
  />
</set>

ScaleAnimation

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="500"
  />
</set>

TranslateAnimation

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="100"
    android:fromYDelta="10"
    android:toYDelta="100"
  />
</set>

布局文件都已经写完，那么如何来使用这些文件呢？
其实也很简单，此时需要用到AnimationUtils类。 通过该类中 loadAnimation 方法来加载这些布局文件。
如：

代码如下:rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);

这次View类的代码如下：

package com.yfz.view;
import com.yfz.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
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);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.e("Tween", "onDraw");
    //加载一个图片
    canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).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");
        alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
        this.startAnimation(alphaAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_DOWN:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
        rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);
        this.startAnimation(rotateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_LEFT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
        scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);
        this.startAnimation(scaleAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_RIGHT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
        translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
        this.startAnimation(translateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_CENTER:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
        //初始化 Translate动画
        translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
        //初始化 Alpha动画
        alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
        //动画集
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(translateAnimation);
        set.addAnimation(alphaAnimation);
        //设置动画时间 (作用到每个动画)
        set.setDuration(1000);
        this.startAnimation(set);
        break;
      default:
        break;
    }
    return true;
  }
}

希望本文所述对大家Android程序设计有所帮助。

您可能感兴趣的文章:Android动画之补间动画(Tween Animation)实例详解Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转Android中利用matrix 控制图片的旋转、缩放、移动android 多点触摸图片缩放的具体实现方法Android 图片缩放与旋转的实现详解Android编程实现popupwindow弹出后屏幕背景变成半透明效果Android编程实现设置按钮背景透明与半透明及图片背景透明的方法android 对话框弹出位置和透明度的设置具体实现方法Android应用中设置alpha值来制作透明与渐变效果的实例Android设置Activity背景为透明style的简单方法(必看)Android实现屏幕旋转方法总结Android开发 旋转屏幕导致Activity重建解决方法Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍Android编程中调用Camera时预览画面有旋转问题的解决方法Android补间动画基本使用（位移、缩放、旋转、透明）