Android 动画介绍与使用

读前思考

学习一门技术或者看一篇文章最好的方式就是带着问题去学习，这样才能在过程中有茅塞顿开、灯火阑珊的感觉，记忆也会更深刻。

Android中有哪几种类型的动画？
帧动画在使用时需要注意什么？
View动画和属性动画的区别？
View动画为何不能真正改变View的位置？而属性动画为何可以？
属性动画插值器和估值器的作用？

概述

在 Android 开发中，动画是必不可少的，它可以让 View 在变化的时候有一个过渡，避免用户感觉很突兀。因此，学好动画，用好动画是非常重要的，会给开发带来很多快乐。

Android 中动画分为帧动画、View 动画、属性动画三种，可以在日常开发中根据需求的不同进行选择，但基本上现在 90% 以上的都可以用属性动画解决，现在让我们来了解一下三种动画。

帧动画

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。

在 Android 中提供了两种方式为 AnimationDrawable 添加帧：XML 定义的资源文件和 Java 代码创建。下面我们会逐一进行介绍。

1. 使用 XML 定义的资源文件设置动画帧

Android 中的资源文件放在 /res 目录下，对于动画帧的资源需要当成一个 Drawable，所以需要把它放在 /res/Drawable 目录下。而定义逐帧动画非常简单，在 drawable 文件夹下新建 xml 文件，在 <animation-list.../> 元素中使用 <item.../> 子元素定义动画的全部帧，并制定各帧的持续时间即可。还可以在 <animation-list.../> 元素中添加属性，来设定逐帧动画的属性。

先上效果图

XML帧动画的资源文件：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<!-- 定义一个动画帧，Drawable为img0，持续时间50毫秒 -->
<item android:drawable="@drawable/uncheck_in1" android:duration="200"/>
<item android:drawable="@drawable/uncheck_in2" android:duration="200"/>
<item android:drawable="@drawable/uncheck_in3" android:duration="200"/>
<item android:drawable="@drawable/uncheck_in4" android:duration="200"/>
<item android:drawable="@drawable/uncheck_in5" android:duration="200"/>
<item android:drawable="@drawable/uncheck_in6" android:duration="200"/>
</animation-list>

Java 代码使用动画

// 通过逐帧动画的资源文件获得AnimationDrawable示例
AnimationDrawable frameAnim = (AnimationDrawable) getResources().getDrawable(R.drawable.part5_frame1);
// 把AnimationDrawable设置为ImageView的背景
mImageView.setBackgroundDrawable(frameAnim);

/**
*根据点击事件控制动画开启，停止
*/
@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.bt_start:
            frameAnim.start();
            break;
        case R.id.bt_stop:
            frameAnim.stop();
            break;
    }
}

2. 使用 Java 代码创建逐帧动画

在 Android 中，除了可以通过 XML 文件定义一个逐帧动画之外，还可以通过 AnimationDrawable.addFrame() 方法为 AnimationDrawable 添加动画帧。
效果图和上面的一样，这里就不放了，直接上代码。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_part5_frame_java);

    mImageView = findViewById(R.id.iv_frame1);
    Button bt_stop = findViewById(R.id.bt_stop);
    Button bt_start = findViewById(R.id.bt_start);
    bt_start.setOnClickListener(this);
    bt_stop.setOnClickListener(this);

    frameAnim = new AnimationDrawable();
    // 为AnimationDrawable添加动画帧
    frameAnim.addFrame(getResources().getDrawable(R.drawable.uncheck_in1), 200);
    frameAnim.addFrame(getResources().getDrawable(R.drawable.uncheck_in2), 200);
    frameAnim.addFrame(getResources().getDrawable(R.drawable.uncheck_in3), 200);
    frameAnim.addFrame(getResources().getDrawable(R.drawable.uncheck_in4), 200);
    frameAnim.addFrame(getResources().getDrawable(R.drawable.uncheck_in5), 200);
    frameAnim.addFrame(getResources().getDrawable(R.drawable.uncheck_in6), 200);
    frameAnim.setOneShot(false);

    mImageView.setBackground(frameAnim);

}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.bt_start:
            if (frameAnim != null && !frameAnim.isRunning()) {
                frameAnim.start();
            }
            break;
        case R.id.bt_stop:
            if (frameAnim != null && frameAnim.isRunning()) {
                frameAnim.stop();
            }
            break;
    }

}

使用帧动画的时候要注意不要使用过大的图片，会引起 OOM。

View 动画

View 动画框架只能用于 Views。比较容易设置和能满足许多应用程序的需要。View 动画框架中一共提供了 AlphaAnimation（透明度动画）、RotateAnimation（旋转动画）、ScaleAnimation（缩放动画）、TranslateAnimation（平移动画）四种类型的补间动画；并且 View 动画框架还提供了动画集合类（AnimationSet），通过动画集合类（AnimationSet）可以将多个补间动画以组合的形式显示出来。View 动画只是显示效果，View 的实际属性及位置并未发生变化。

先看效果图

在 /res 目录下新建 anim 文件夹，在 anim 文件夹下新建 xml 文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 透明度变化，从 1 到 0-->
    <alpha
        android:duration="5000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
    />
    <!-- 缩放，宽高都是从 1 到 0
         pivotX、pivotY 代表缩放中心点的横竖坐标
         interpolator 代表动画模式，我设置为先加速、后减速-->
    <scale
        android:duration="5000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0"
    />
    <!-- 平移动画，从左上角到右下角-->
    <translate
        android:duration="5000"
        android:fromXDelta="150"
        android:fromYDelta="150"
        android:toXDelta="200"
        android:toYDelta="200"/>
    <!-- 旋转动画，fromDegrees 初始角度
          结束角度 toDegrees-->
    <rotate
        android:duration="5000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360"/>
</set>

在代码中给 view 添加动画

ImageView iv_bee=findViewById(R.id.iv_bee);
// 设置动画资源
Animation loadAnimation =AnimationUtils.loadAnimation(this,R.anim.part5view_anim1);
//动画结束后保持最后的状态
loadAnimation.setFillAfter(true);
//给 view 添加动画
iv_bee.startAnimation(loadAnimation);

属性动画

与属性动画相比 View 动画存在一个缺陷，View 动画改变的只是 View 的显示，而没有改变View的响应区域，并且 View 动画只能对 View 做四种类型的补间动画，因此在 Android3.0 及其后续版本中添加了属性动画框架。

属性动画理论知识有很多讲解，可以具体看下面的文章

HenCoder Android 自定义 View 1-6：属性动画 Property Animation（上手篇）

Android属性动画深入分析：让你成为动画牛人

我这里就不讲理论了，直接撸效果

1、数字滚动效果

很简单的一个数字滚动效果，用属性动画也很容易做出来，几行代码搞定

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_part5_object_anim);

    mTv_object = findViewById(R.id.tv_object);
    Button bt_start=findViewById(R.id.bt_start);
    bt_start.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            showMoneyAnim(1,500);
        }
    });
}

private void showMoneyAnim(int mStartValue, int mEndValue) {
    ValueAnimator animator = ValueAnimator.ofInt(mStartValue, mEndValue);
    animator.setDuration(3000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mTv_object.setText(animation.getAnimatedValue().toString());
            }
        });
    animator.start();

    }

2、签到卡片翻转效果

具体翻转代码，分为上半段和下半段动画

public class Part4AnimationActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_part4_animation);


        final ImageView iv_animation=findViewById(R.id.iv_animation);
        iv_animation.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                applyRotation(false,iv_animation,0,-90);
            }
        });
    }

    /**
     * 设置一个新的三维旋转的容器视图。只翻一般，然后设置新的现实内容
     *
     * @param zheng
     *            一个判断机制 如果为true 则向右翻转，如果false则向左翻转
     * @param view
     *            传入的片段
     * @param start
     *            起始位置
     * @param end
     *            结束位置
     */
public void applyRotation(final boolean zheng, final View view,
        final float start, final float end) {
        // Find the center of the container
        final float centerX = view.getWidth() / 2.0f;
        final float centerY = view.getHeight() / 2.0f;

        // Create a new 3D rotation with the supplied parameter
        // The animation listener is used to trigger the next animation
        final Util_Rotate3DAnimation rotation = new Util_Rotate3DAnimation(
                start, end, centerX, centerY, 310.0f, true);
        rotation.setDuration(500);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        rotation.setAnimationListener(new DisplayNextView(zheng, view));// 添加监听执行现实内容的切换
        view.startAnimation(rotation);// 执行上半场翻转动画
    }

    /**
     * 执行完上半部分旋转之后，设置要显示的新的View然后继续执行下半部分旋转
     */
private final class DisplayNextView implements Animation.AnimationListener {
        private final boolean mPosition;
        private final View mView;

        private DisplayNextView(boolean zheng, View view) {
            mPosition = zheng;
            mView = view;
        }

        public void onAnimationStart(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {
            mView.post(new SwapViews(mPosition, mView));// 添加新的View
        }

        public void onAnimationRepeat(Animation animation) {
        }
    }
    /**
     * 添加要显示的新的View，并执行下半部分的旋转操作
     */
private final class SwapViews implements Runnable {
        private final boolean mPosition;
        private final ImageView mView;

        public SwapViews(boolean position, View view) {
            mPosition = position;
            mView = (ImageView) view;
        }

        public void run() {
            final float centerX = mView.getWidth() / 2.0f;
            final float centerY = mView.getHeight() / 2.0f;
            Util_Rotate3DAnimation rotation;

            if (mPosition) {
                rotation = new Util_Rotate3DAnimation(-90, 0, centerX, centerY,
                        310.0f, false);
            } else {
                rotation = new Util_Rotate3DAnimation(90, 0, centerX, centerY,
                        310.0f, false);
            }
            mView.setImageResource(R.drawable.head2);

            rotation.setDuration(500);
            rotation.setFillAfter(true);
            rotation.setInterpolator(new DecelerateInterpolator());
            mView.startAnimation(rotation);
        }
    }

}

文章已经读到末尾了，不知道最初的几个问题你都会了吗？如果不会的话？可以再针对不会的问题进行精读哦！答案都在文中，相信你肯定可以解决的！

Android 动画 介绍与使用