Android动画-Tweened animation（补间动画）

Android动画主要分为以下三类：

Tweened animation（补间动画）- 在android3.0（API11）之前支持，该动画仅仅支持对View操作，而且View在做动画的时候，View相应的实际属性值并没有发生改变，例如：一个Button起始位置left, top, right, bottom为（0，0, 50, 50）,经过水平平移50操作移到（50，0，100，50），然后将该Button固定在平移后的位置，这时候Button的点击事件的触发区域仍然是(0,0, 50, 50)。
Frame animation（帧动画）- 在android3.0（API11）之前支持，该动画顺序播放事先准备好的图像，类似于放电影。
Property animation（属性动画）- 在android3.0（API11）开始支持，属性动画不像补间动画，属性动画通过改变对象的实际属性来实现动画，而且属性动画操作的对象不局限于View。

在本文中，主要介绍Tweened animation（补间动画）的相关使用。

补间动画的动画操作主要分为以下四类：

alpha（透明动画）
scale （缩放动画）
translate （平移动画）
rotate （旋转动画）

注：每种动画都有xml和代码两种设置方式。

一、补间动画的一些共同属性

共同属性	特性
android:duration	动画的持续时间（单位 : 毫秒）
android:fillAfter	当设置为true，动画最终停留在最后一帧
android:fillBefore	当设置为true，动画最终停留在第一帧
android:fillEnabled	当设置为true，考虑android:fillBefore的值
android:interpolator	插值器类型
android:repeatCount	动画重复次数
android:repeatMode	动画重复的方式
android:startOffset	动画延迟多久开始
android:zAdjustment	开始的动画在z轴上显示的位置
android:detachWallpaper	当窗口在一个墙纸上，墙纸不会随动画而动（仅适用于窗口动画）

注：android:fillAfter 和 android:fillBefore同时设置为true时，以android:fillAfter为主，即动画最终停留在最后一帧。

常量：
Animation.RELATIVE_TO_SELF：用户传入的值是相对于做动画的对象本身；
Animation.RELATIVE_TO_PARENT：用户传入的值是相对于做动画的对象的父对象；
Animation.ABSOLUTE：用户传入的值是绝对大小。

二、 alpha （透明动画）

alpha动画控制View的透明度变化。

2.1 代码上的实现

private void transformAlpha(){
    AlphaAnimation alphaAnimation = new AlphaAnimationCustom(1,0); // 不透明到透明
    alphaAnimation.setDuration(200);// 动画持续0.2秒
    alphaAnimation.setFillAfter(true); // 动画最终停留在最后一帧
    //   alphaAnimation.setRepeatCount(-1); // 动画无限循环
    //   alphaAnimation.setRepeatMode(Animation.REVERSE);// 动画的循环方式为反过来循环
    mImageView.startAnimation(alphaAnimation);// mImageView是一个ImageView
}

2.2 在anim文件下的xml实现

在新建tweened_alpha.xml文件里加入下面代码：

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator ="@android:anim/accelerate_decelerate_interpolator"
   android:fromAlpha="1.0"
   android:toAlpha="0"
   android:fillAfter ="true"
   android:repeatCount ="-1"
   android:duration ="1000"
   android:repeatMode="reverse"
   android:zAdjustment ="top" />

在代码中使用tweened_alpha.xml文件:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.tweened_alpha);
mImageView.startAnimation(animation);

三、Translate动画（平移动画）

3.1 代码上的实现

private void transformTranslate(){
        //假设mImageView宽高为400，值类型为Animation.RELATIVE_TO_SELF，则下面表示mImageView的左上角从(0,0)平移到（200，200），其中mImageView的左上角坐标为（0，0）. 等价于TranslateAnimation translateAnimation = new TranslateAnimation(0, 200, 0, 200);
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
                0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 0.5f);
        translateAnimation.setDuration(300); // 动画持续0.3秒
        translateAnimation.setFillAfter(true); // 动画最终停留在最后一帧
        mImageView.startAnimation(translateAnimation);
}

3.2 在anim文件下的xml实现

在新建tweened_translate.xml文件里加入下面代码：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator = "@android:anim/anticipate_interpolator"
        android:fromXDelta="0%"
        android:toXDelta="50%"
        android:fromYDelta="0%"
        android:toYDelta="50%"
        android:duration="1000"
        android:fillBefore = "false"
        android:fillAfter = "true"
        android:repeatMode = "reverse"
        android:repeatCount = "-1"
        android:zAdjustment = "top"/>

在代码中使用tweened_translate.xml文件:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.tweened_translate);
mImageView.startAnimation(animation);

四、Rotate动画（旋转动画）

4.1 在代码中的实现

private void transformRotate(){
        RotateAnimation rotateAnimation = new RotateAnimation(0, 90); // 默认是绕着进行动画的对象的左上角（动画坐标原点）旋转,顺时针旋转90度
        rotateAnimation.setDuration(200); // 动画持续0.2秒
        rotateAnimation.setFillAfter(true); // 动画最终停留在最后一帧
        mImageView.startAnimation(rotateAnimation);
  }

4.2 在anim文件下的xml实现

在新建tweened_rotate.xml文件里加入下面代码：

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator = "@android:anim/anticipate_interpolator"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        android:repeatMode = "reverse"
        android:repeatCount = "-1"
        android:zAdjustment = "top"/>

代码中使用tweened_rotate.xml文件:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.tweened_rotate);
mImageView.startAnimation(animation); // mImageView绕着自身中心旋转360度

五、Scale动画（缩放动画）

5.1 在代码中的实现

private void transformScale(){
        // 相当于进行动画的对象中心将对象缩小50%
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(300);
        scaleAnimation.setFillAfter(true);
        mImageView.startAnimation(scaleAnimation);
}

5.2 在anim文件下的xml实现

在新建tweened_scale.xml文件里加入下面代码：

<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator = "@android:anim/anticipate_interpolator"
        android:fromXScale="1"
        android:toXScale="0.5"
        android:fromYScale="1"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        android:repeatMode="reverse"
        android:repeatCount = "-1"
        android:zAdjustment = "top"/>

代码中使用tweened_scale.xml文件:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.tweened_scale);
mImageView.startAnimation(animation); // mImageView相对自身中心缩小50%

六、动画集合
6.1 在代码中的实现

private void transformAnimationSet(){
        AnimationSet animationSet = new AnimationSet(true); //动画集，使用共享插值器
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // 缩放动画
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
                0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0,
                Animation.RELATIVE_TO_SELF, 0.5f); // 平移动画
        animationSet.addAnimation(scaleAnimation); // 将缩放动画添加到动画集
        animationSet.addAnimation(translateAnimation); // 将平移动画添加到动画集
        animationSet.setDuration(200);
        mImageView.startAnimation(animationSet); // 开始动画集
}

6.2 在anim文件下的xml实现

在新建tweened_set.xml文件里加入下面代码：

<?xml version="1.0" encoding="utf-8"?>
<!--android:fillBefore和android:fillAfter只能在set中设置才有效-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false"
    android:fillBefore = "false"
    android:fillAfter = "true">

    <alpha
        android:interpolator = "@android:anim/accelerate_decelerate_interpolator"
        android:fromAlpha="1.0"
        android:toAlpha="0.3"
        android:fillAfter = "true"
        android:repeatCount = "-1"
        android:duration = "1000"
        android:repeatMode="reverse"
        android:zAdjustment = "top"/>

    <scale
        android:interpolator = "@android:anim/anticipate_interpolator"
        android:fromXScale="1"
        android:toXScale="0.5"
        android:fromYScale="1"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        android:repeatMode="reverse"
        android:repeatCount = "-1"
        android:zAdjustment = "top"/>

    <translate
        android:interpolator = "@android:anim/anticipate_interpolator"
        android:fromXDelta="0%"
        android:toXDelta="50%"
        android:fromYDelta="0%"
        android:toYDelta="50%"
        android:duration="1000"
        android:fillBefore = "false"
        android:fillAfter = "true"
        android:repeatMode = "reverse"
        android:repeatCount = "-1"
        android:zAdjustment = "top"/>

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"
        android:repeatMode = "reverse"
        android:repeatCount = "-1"
        android:zAdjustment = "top"/>
</set>

代码中使用tweened_set.xml文件:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.tweened_set);
mImageView.startAnimation(animation); // mImageView执行动画集

Android动画-Tweened animation（补间动画）

猜你喜欢