引言

学习完上一篇Android 开发】帧动画（Frame animation）详解，我们接着来学习三大动画之补间动画。

内容简概

一、概念及常用方法
二、案例——透明度、缩放、平移、旋转、组合动画
三、运行效果

具体内容

一、概念及常用方法

Tween Animation 补间动画（又叫view动画），是通过对场景里的对象不断做图像变换（透明度、缩放、平移、旋转）从而产生动画效果，是一种渐进式动画，并且支持自定义。还可以将四种变换任意组合构成组合动画。

补间动画只是改变了View的显示效果而已，并不会真正的改变View的属性。而属性动画可以改变View的显示效果和属性。什么意思呢？例如屏幕左上角有一个Button按钮，使用补间动画将其移动到右下角，此刻你去点击右下角的Button，不会响应点击事件，点击左上角，也就是Button初始位置才会响应点击事件。补间动画感觉就只是虚晃一招，让人看起来它真的移动或者改变了某控件，但其实它并没有真的改变控件。感觉它好像一个骗子ヾ(⌐ ■_■)。

下面介绍一些常用方法：

二、案例——透明度、缩放、平移、旋转、组合动画

（一）anim

1. 准备一张图片，放到res/drawable下

2. 在res下创建一个anim文件夹，分别创建五个类型的xml文件

   
   
3. 在每个xml文件中设置属性

• alpha
  设置透明度为不透明到全透明，时间为1秒。

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1" android:toAlpha="0" android:duration="1000">
</alpha>

• rotate
  设置从0°旋转至90°，旋转起点 X 轴坐标为原点坐标加上自己宽度的 50%（即控件水平中心）。还设置了回弹的效果(bounce_interpolator)

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:toDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:interpolator="@android:anim/bounce_interpolator">
</rotate>

• scale
  从0放大到图片1.5倍大。缩放起始点X坐标为自身的50%（横向中心点），缩放起始点Y坐标为0（图片的顶部）。

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="0"
    android:fromYScale="0"
    android:toXScale="1.5"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="0%">
</scale>

• translate
  从图片底部位置开始，沿y轴方向移动到图片顶部位置（相对于图片的初始位置），并设置动画重复次数为5次，执行完一次倒放(reverse)

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:repeatMode="reverse"
    android:repeatCount="5"
    android:duration="1000"
    android:fromXDelta="0%"
    android:fromYDelta="100%"
    android:toXDelta="0%"
    android:toYDelta="0%">
</translate>

• set
  构建了一个组合动画，图片向右平移，透明度从0.1到1，从0放大到1.5倍，旋转360°，四种动画同时执行(shareInterpolator)，动画结束后保持结束位置(fillAfter)

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true"
    android:fillAfter="true">
    <scale
        android:duration="1000"
        android:fromXScale="0.2"
        android:fromYScale="0.2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toDegrees="360" />
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="320"
        android:toYDelta="0" />
    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

（二）activity_main

配置布局属性如下：创建五个按钮，设置操作的图片。
在上一篇文章中，我用了onClick方法实现按钮点击，但这次的按钮太多了，如果还用onClick方法，代码量感觉有点多，所以我换了个方法，直接在xml中调用onClick属性，然后在主函数里实现。

<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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnAlpha"
        android:text="透明度渐变AlphaAnimation" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnScale"
        android:text="缩放动画ScaleAnimation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnTranslate"
        android:text="位移动画TranslateAnimation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnRotate"
        android:text="旋转动画RotateAnimation" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="OnSet"
        android:text="组合动画SetAnimation" />

    <ImageView
    android:id="@+id/tween_img"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_gravity="center"
    android:background="@drawable/see" />
</LinearLayout>

（三）MainActivity

最后编写主函数。

public class MainActivity extends AppCompatActivity{
    private ImageView img;
    private Animation animation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = findViewById(R.id.tween_img);
    }

    // 加载动画
    public void OnAlpha(View view) {
        animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
        img.startAnimation(animation);
    }

    public void OnScale(View view) {
        animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
        img.startAnimation(animation);
    }

    public void OnTranslate(View view) {
        animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
        img.startAnimation(animation);
    }

    public void OnRotate(View view) {
        animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
        animation.getFillAfter();
        img.startAnimation(animation);
    }

    public void OnSet(View view) {
        animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.set);
        img.startAnimation(animation);
    }
}

三、运行效果

• alpha（透明度）

  
  

• scale（缩放）

  
  

• translate（平移）

  
  

• rotate（旋转）

  
  

• set（组合）

  
  

后记

逐帧动画和补间动画的区别于各自的优缺点

参考文章——Android补间动画