读前思考

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

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

概述

在 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--><alphaandroid:duration="5000"android:fromAlpha="1.0"android:toAlpha="0.0"/><!-- 缩放，宽高都是从 1 到 0pivotX、pivotY 代表缩放中心点的横竖坐标interpolator 代表动画模式，我设置为先加速、后减速--><scaleandroid: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"/><!-- 平移动画，从左上角到右下角--><translateandroid:duration="5000"android:fromXDelta="150"android:fromYDelta="150"android:toXDelta="200"android:toYDelta="200"/><!-- 旋转动画，fromDegrees 初始角度结束角度 toDegrees--><rotateandroid: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() {@Overridepublic 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() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mTv_object.setText(animation.getAnimatedValue().toString());}});animator.start();}
复制代码

2、 签到卡片翻转效果

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

public class Part4AnimationActivity extends AppCompatActivity {@Overrideprotected 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() {@Overridepublic 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 containerfinal 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 animationfinal 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);}}}
复制代码

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