读前思考
学习一门技术或者看一篇文章最好的方式就是带着问题去学习，这样才能在过程中有茅塞顿开、灯火阑珊的感觉，记忆也会更深刻。
- 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.../> 元素中添加属性，来设定逐帧动画的属性。
先上效果图
image
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 的实际属性及位置并未发生变化。
先看效果图
image
在 /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（上手篇）
我这里就不讲理论了，直接撸效果
1、 数字滚动效果
image
很简单的一个数字滚动效果，用属性动画也很容易做出来，几行代码搞定
@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、 签到卡片翻转效果
image
具体翻转代码，分为上半段和下半段动画
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);
}
}
}
文章已经读到末尾了，不知道最初的几个问题你都会了吗？如果不会的话？可以再针对不会的问题进行精读哦！答案都在文中，相信你肯定可以解决的！
