属性动画的使用和原理解析

痛定思痛。 2023-10-01 22:49 26阅读 0赞

#### 文章目录 ####

*  前言
 *  一、属性动画入门
 *  二、属性动画具体使用
 *   *  1.步骤
     *  2.组合动画
     *  3.监听事件
     *  4.xml属性动画
 *  三.属性动画的核心原理
 *   *  1.核心类讲解
     *  2.插值器Interpolator介绍
     *  3.估值器Evaluator介绍
 *  四、传统动画 VS 属性动画

--------------------

## 前言 ##

属性动画，顾名思义它是对于对象属性的动画。因此，所有补间动画的内容，都可以通过属性动画实现。

--------------------

## 一、属性动画入门 ##

首先我们来看看如何用属性动画实现上面补间动画的效果

private void RotateAnimation() {
        
            ObjectAnimator anim = ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f);
            anim.setDuration(1000);
            anim.start();
        }
    
        private void AlpahAnimation() {
        
            ObjectAnimator anim = ObjectAnimator.ofFloat(myView, "alpha", 1.0f, 0.8f, 0.6f, 0.4f, 0.2f, 0.0f);
            anim.setRepeatCount(-1);
            anim.setRepeatMode(ObjectAnimator.REVERSE);
            anim.setDuration(2000);
            anim.start();
        }

这两个方法用属性动画的方式分别实现了旋转动画和淡入淡出动画，其中setDuration、setRepeatMode及setRepeatCount和补间动画中的概念是一样的。

可以看到，属性动画貌似强大了许多，实现很方便，同时动画可变化的值也有了更多的选择，动画所能呈现的细节也更多。

当然属性动画也是可以组合实现的

ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(myView, "alpha", 1.0f, 0.5f, 0.8f, 1.0f);
                    ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(myView, "scaleX", 0.0f, 1.0f);
                    ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(myView, "scaleY", 0.0f, 2.0f);
                    ObjectAnimator rotateAnim = ObjectAnimator.ofFloat(myView, "rotation", 0, 360);
                    ObjectAnimator transXAnim = ObjectAnimator.ofFloat(myView, "translationX", 100, 400);
                    ObjectAnimator transYAnim = ObjectAnimator.ofFloat(myView, "tranlsationY", 100, 750);
                    AnimatorSet set = new AnimatorSet();
                    set.playTogether(alphaAnim, scaleXAnim, scaleYAnim, rotateAnim, transXAnim, transYAnim);
    //                set.playSequentially(alphaAnim, scaleXAnim, scaleYAnim, rotateAnim, transXAnim, transYAnim);
                    set.setDuration(3000);
                    set.start();

可以看到这些动画可以同时播放，或者是按序播放。

--------------------

## 二、属性动画具体使用 ##

### 1.步骤 ###

*  创建objectAnimator
 *  设置Interpolator（插值器）
 *  设置Evaluator（估值器）
 *  设置动画时长
 *  开启动画

//透明度起始为1，结束时为0
    ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f);
    animator.setDuration(1000);//时间1s
    animator.start();  
    /*
    ofFloat中的参数：
    imageView：执行动画的View;
    "alpha"：表示透明动画；
    1f：起始透明度；
    0f：动画结束后的透明度
    */

### 2.组合动画 ###

`AnimatorSet`：这个类提供了一个play()方法，调用后将会返回一个`AnimatorSet.Builder`的实例，`AnimatorSet.Builder`中包括以下四个方法：

*  `after(Animator anim)` ：将现有动画插入到传入的动画之后执行
 *  `after(long delay)` ：将现有动画延迟指定毫秒后执行
 *  `before(Animator anim)`： 将现有动画插入到传入的动画之前执行
 *  `with(Animator anim)` ：将现有动画和传入的动画同时执行

//沿x轴放大
    ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 2f, 1f);
    //沿y轴放大
    ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 2f, 1f);
    //移动
    ObjectAnimator translationXAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 200f, 0f);
    //透明动画
    ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f, 1f);
    AnimatorSet set = new AnimatorSet();
    //同时沿X,Y轴放大，且改变透明度，然后移动
    set.play(scaleXAnimator).with(scaleYAnimator).with(animator).before(translationXAnimator);
    //都设置3s，也可以为每个单独设置
    set.setDuration(3000);
    set.start();

### 3.监听事件 ###

//添加监听事件
            set.addListener(new Animator.AnimatorListener() {
        
                @Override
                public void onAnimationStart(Animator animation) {
        
                    //动画开始的时候调用
                }
    
                @Override
                public void onAnimationEnd(Animator animation) {
        
                    //画结束的时候调用
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
        
                    //动画被取消的时候调用
                }
    
                @Override
                public void onAnimationRepeat(Animator animation) {
        
                    //动画重复执行的时候调用
    
                }
            });  
    
            //另一种设置监听的方式，里面的监听方法可以选择性重写
    set.addListener(new AnimatorListenerAdapter() {
        
        @Override
        public void onAnimationStart(Animator animation) {
        
    
        }
    });

### 4.xml属性动画 ###

这里提一下，属性动画当然也可以使用xml文件的方式实现，但是属性动画的属性值一般会牵扯到对象具体的属性，更多是通过代码动态获取，所以xml文件的实现会有些不方便。

使用方法：

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
        R.anim.property_animator);
    set.setTarget(myObject);
    set.start();

xml 文件中的标签也和属性动画的类相对应：

ValueAnimator --- <animator> 
    ObjectAnimator --- <objectAnimator> 
    AnimatorSet --- <set>

--------------------

## 三.属性动画的核心原理 ##

在上面实现属性动画的时候，我们反复的使用到了ObjectAnimator 这个类，这个类继承自ValueAnimator，使用这个类可以对任意对象的任意属性进行动画操作。而ValueAnimator是整个属性动画机制当中最核心的一个类；这点从下面的图片也可以看出。

### 1.核心类讲解 ###

*  ValueAnimator：**Animator的子类，实现了动画的整个处理逻辑，也是熟悉动画最为核心的类**
 *  ObjectAnimator：**对象属性动画的操作类，继承自ValueAnimator，通过该类使用动画的形式操作对象的属性**
 *  TimeInterpolator:**时间插值器**，它的作用是根据时间流逝的百分比来计算当前属性值改变的百分比，系统预置的有线性插值器、加速减速插值器、减速插值器等。
 *  TypeEvaluator:TypeEvaluator翻译为**类型估值算法**，它的作用是根据当前属性改变的百分比来计算改变后的属性值
 *  Property：**属性对象**、主要定义了属性的set和get方法
 *  PropertyValuesHolder:**持有目标属性Property、setter和getter方法、以及关键帧集合的类。**
 *  KeyframeSet:\*\*存储一个动画的关键帧集  
    ![原理图][50168da1f0484367a1021f0922f8f1bf.png]  
    属性动画核心原理，此图来自于Android SDK API 文档。

> 属性动画的运行机制是通过不断地对值进行操作来实现的，而初始值和结束值之间的动画过渡就是由ValueAnimator这个类来负责计算的。它的内部使用一种时间循环的机制来计算值与值之间的动画过渡，我们只需要将初始值和结束值提供给ValueAnimator，并且告诉它动画所需运行的时长，那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果。除此之外，ValueAnimator还负责管理动画的播放次数、播放模式、以及对动画设置监听器等。

从上图我们可以了解到，通过duration、startPropertyValue和endPropertyValue 等值，我们就可以定义动画运行时长，初始值和结束值。然后通过start方法开始动画。 那么ValueAnimator 到底是怎样实现从初始值平滑过渡到结束值的呢？这个就是由TypeEvaluator 和TimeInterpolator 共同决定的。

具体来说，TypeEvaluator 决定了动画如何从初始值过渡到结束值。个人觉得可以看作一个**方向**。

TimeInterpolator 决定了动画从初始值过渡到结束值的节奏。个人觉得可以看作一个**速度**。

说的通俗一点，你每天早晨出门去公司上班，TypeEvaluator决定了你是坐公交、坐地铁还是骑车；而当你决定骑车后，TimeInterpolator决定了你一路上骑行的方式，你可以匀速的一路骑到公司，你也可以前半程骑得飞快，后半程骑得慢悠悠。

### 2.插值器Interpolator介绍 ###

Interpolator的概念其实我们并不陌生，在补间动画中我们就使用到了。他就是用来控制动画快慢节奏的；而在属性动画中，TimeInterpolator 也是类似的作用；TimeInterpolator 继承自Interpolator。我们可以继承TimerInterpolator 以自己的方式控制动画变化的节奏，也可以使用Android 系统提供的Interpolator。

下面都是系统帮我们定义好的一些Interpolator，我们可以通过setInterpolator 设置不同的Interpolator。

![插值器][e658e69542784e52ba5d19667a6ca9ba.png]  
这里我们使用的Interpolator就决定了 前面我们提到的fraction。变化的节奏决定了动画所执行的百分比。不得不说，这么ValueAnimator的设计的确是很巧妙。

这些就是属性动画的核心内容。现在使用属性动画的特性自定义动画应该不是难事了。其余便签的含义，结合之前的内容应该不难理解了

### 3.估值器Evaluator介绍 ###

设置属性从初始值到结束值变化的具体数值

插值器（Interpolator）决定 值 的变化规律（匀速、加速blabla），即决定的是变化趋势；

而估值器属性动画特有的属性

--------------------

## 四、传统动画 VS 属性动画 ##

相较于传统动画，属性动画有很多优势。那是否意味着属性动画可以完全替代传统动画呢。其实不然，两种动画都有各自的优势，属性动画如此强大，也不是没有缺点。

*  补间动画中，虽然使用translate将图片移动了，但是点击原来的位置，依旧可以发生点击事件，而属性动画却不是。因此我们可以确定，属性动画才是真正的实现了view的移动，补间动画对view的移动更像是在不同地方绘制了一个影子，实际的对象还是处于原来的地方。
 *  当我们把动画的repeatCount设置为无限循环时，如果在Activity退出时没有及时将动画停止，属性动画会导致Activity无法释放而导致内存泄漏，而补间动画却没有问题。因此，使用属性动画时切记在Activity执行 onStop 方法时顺便将动画停止。（对这个怀疑的同学可以自己通过在动画的Update 回调方法打印日志的方式进行验证）。
 *  xml 文件实现的补间动画，复用率极高。在Activity切换，窗口弹出时等情景中有着很好的效果。
 *  使用帧动画时需要注意，不要使用过多特别大的图，容易导致内存不足。

[50168da1f0484367a1021f0922f8f1bf.png]: https://img-blog.csdnimg.cn/50168da1f0484367a1021f0922f8f1bf.png
[e658e69542784e52ba5d19667a6ca9ba.png]: https://img-blog.csdnimg.cn/e658e69542784e52ba5d19667a6ca9ba.png