Android动画效果之Tween Animation（补间动画）

一. Tween Animation（补间动画）：

    Tween动画，通过对View的内容进行一系列的图形变换 (包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML来做也可以采用编码来做。

动画类型	XML配置方式	Java代码实现方式
渐变透明度动画效果	<alpha/>	AlphaAnimation
渐变尺寸缩放动画效果	<scale/>	ScaleAnimation
画面旋转动画效果	<rotate/>	RotateAnimation
画面位置移动动画效果	<translate/>	TranslateAnimation
组合动画效果	<set/>	AnimationSet

（1）alpha渐变透明度动画效果

• java代码实现

• AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.1f);    //设置透明度，1.0为全显，0.0为全隐
  alpha.setRepeatCount(1);        //设置动画次数为（n+1）
  alpha.setRepeatMode(Animation.REVERSE);    //设置动画模式，REVERSE，RELATIVE_TO_PARENT为反向，其他属性为正向
  alpha.setDuration(2000);         //设置动画持续时间
  alpha.setFillAfter(true);     //动画结束后保持当前位置（不回到起始位置）
  alpha.setFillBefore(false);     //动画结束后回到执行前的位置（回到起始位置）
  imageView.startAnimation(alpha);    //开始动画
• xml实现

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

  版本问题只能设置这些，xml加载动画：

• AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.alpha);
  imageView.setAnimation(alphaAnimation);

  由于xml中只能添加上面两项属性，所有其他属性需要在java中添加设置。

（2）scale渐变尺寸缩放动画效果

• java代码实现

• ScaleAnimation scale = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f
  , Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  scale.setDuration(2000);
  scale.setFillAfter(true);
  scale.setFillBefore(false);
  scale.setRepeatCount(1);
  scale.setRepeatMode(Animation.REVERSE);
  scale.setStartOffset(500);     //多次执行的间隔时间，如果为一次则会等待这么长时间才执行
  scale.setInterpolator(this, android.R.anim.decelerate_interpolator);  //设置动画插入器
  imageView.startAnimation(scale);
• xml实现

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

        toXScale，toYScale            //缩放前x,y的大小或坐标值，1.0为一倍大小，0.0为0倍
        fromXScale，fromYScale    //缩放前x,y的大小或坐标值，1.0为一倍大小，0.0为0倍
        pivotX， pivotY                     //动画起始位置，相对于屏幕的百分比，都为50%为屏幕中间

      xml加载动画：   

ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.scale);
scaleAnimation.setDuration(3000);
imageView.startAnimation(scaleAnimation);

（3）rotate画面旋转动画效果

java代码实现：

RotateAnimation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF
        , 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(2000);
rotate.setRepeatCount(1);
rotate.setRepeatMode(Animation.REVERSE);
rotate.setStartOffset(500);
imageView.startAnimation(rotate);

xml实现：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:repeatMode="reverse"
    android:fillAfter="true"
    android:duration="2000"
    android:fillBefore="false"
    android:startOffset="500"
    android:pivotX="50%"
    android:pivotY="50%">

</rotate>

RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate);
rotateAnimation.setDuration(5000);
imageView.startAnimation(rotateAnimation);

（4）translate画面位置移动动画效果

java代码实现：

TranslateAnimation translate = new TranslateAnimation(160, 240, 320, 480);

translate.setDuration(5000);

translate.setRepeatCount(1);

translate.setRepeatMode(Animation.REVERSE);

translate.setFillAfter(true);

translate.setFillBefore(false);

translate.setStartOffset(500);

imageView.startAnimation(translate);

xml实现：

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="200"

android:toYDelta="200">

</translate>

TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translate);

imageView.startAnimation(translateAnimation);

（5）set组合动画效果

java代码实现：

                AnimationSet set = new AnimationSet(true);

RotateAnimation rotate1 = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF

, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

// rotate1.setDuration(5000);

// rotate1.setRepeatMode(Animation.REVERSE);

rotate1.setRepeatCount(1);

// rotate1.setFillAfter(true);

// rotate1.setFillBefore(false);

AlphaAnimation alpha1 = new AlphaAnimation(1.0f, 0.1f);

// alpha1.setDuration(5000);

alpha1.setRepeatCount(1);

// alpha1.setRepeatMode(Animation.REVERSE);

// alpha1.setFillAfter(true);

// alpha1.setFillBefore(false);

ScaleAnimation scale1 = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f, Animation.RELATIVE_TO_SELF

, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

// scale1.setDuration(5000);

scale1.setRepeatCount(1);

// scale1.setRepeatMode(Animation.REVERSE);

// scale1.setFillAfter(true);

// scale1.setFillBefore(false);

TranslateAnimation translate1 = new TranslateAnimation(50, 100, 320, 640);

// translate1.setDuration(5000);

translate1.setRepeatCount(1);

// translate1.setRepeatMode(Animation.REVERSE);

// translate1.setFillAfter(true);

// translate1.setFillBefore(false);

set.setDuration(5000);

// set.setRepeatCount(1);

set.setRepeatMode(Animation.REVERSE);

set.setFillAfter(true);

set.setFillBefore(false);

set.addAnimation(rotate1);

set.addAnimation(alpha1);

set.addAnimation(scale1);

set.addAnimation(translate1);

imageView.startAnimation(set);

注：1>想要连贯的实现动画，都需要设置setRepeatCount，只设置set的无效；

      2>当其他动画的设置（除setRepeatCount）和set设置一致时，可不需要设置；

      3>其他动画和set都设置了setDuration时，只会保留set的设置效果

xml实现：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="5000"

android:fillAfter="true"

android:fillBefore="false"

android:repeatMode="reverse"

android:startOffset="500">

<alpha

android:fromAlpha="1.0"

android:toAlpha="0.1"/>

<scale

android:fromXScale="1.0"

android:fromYScale="1.0"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="0.1"

android:toYScale="0.1"/>

<rotate

android:pivotX="50%"

android:pivotY="50%"

android:fromDegrees="0"

android:toDegrees="360"/>

<translate

android:fromXDelta="50"

android:fromYDelta="100"

android:toXDelta="200"

android:toYDelta="400"/>

</set>

AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.set);

imageView.setAnimation(animationSet);

二. 动画监听器Animation.AnimationListener

 有时可能我们要在动画的每个周期里面做不同的操作，这时候就要借助动画监听器了

alpha.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        //动画开始前
        Log.i("aaaaa", "//动画开始前");
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        //动画结束后
        Log.i("aaaaa", "//动画结束后");
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        //动画重复时,次数 == setRepeatCount的值
        Log.i("aaaaa", "//动画重复时");
    }
});

三. 几种自带的动画插入器

AccelerateInterpolator 加速，开始时慢中间加速

DecelerateInterpolator 减速，开始时快然后减速

AccelerateDecelerateInterolator 先加速后减速，开始结束时慢，中间加速

AnticipateInterpolator 反向，先向相反方向改变一段再加速播放

AnticipateOvershootInterpolator 反向加超越，先向相反方向改变，再加速播放，会超出目的值然后缓慢移动至目的值

BounceInterpolator 跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100

CycleIinterpolator 循环，动画循环一定次数，值的改变为一正弦函数：Math.sin(2* mCycles* Math.PI* input)

LinearInterpolator 线性，线性均匀改变

OvershootInterpolator超越，最后超出目的值然后缓慢改变到目的值

每天积累一点点！