ValueAnimator学习

概述

简介

ValueAnimator 是动画机制中最核心的一个类。

原理

• 通过不断控制 值 的变化，再不断 手动 赋给对象的属性，从而实现动画效果。
• 具体如图下：

整型：ValueAnimator.ofInt()

作用

将初始值 以整数形式 过渡到结束值 （即估值器是整型估值器 - IntEvaluator）

原理

具体使用

因为ValueAnimator本质只是一种值的操作机制,因此先学习一下改变一个值的过程。

操作值的方式 分为 XML 设置 / Java 代码设置

1.Java代码设置

实际开发中，建议使用Java代码实现属性动画：因为很多时候属性的起始值是无法提前确定的（无法使用XML设置），这就需要在Java代码里动态获取。

下面的代码主要看看注释就行了，后面再实战。

// 步骤1：设置动画属性的初始值 & 结束值
				ValueAnimator anim = ValueAnimator.ofInt(0, 3);
        // ofInt（）作用有两个
        // 1. 创建动画实例
        // 2. 将传入的多个Int参数进行平滑过渡:此处传入0和3,表示将值从0平滑过渡到3
        // 如果传入了3个Int参数 a,b,c ,则是先从a平滑过渡到b,再从b平滑过渡到C，以此类推
        // ValueAnimator.ofInt()内置了整型估值器,直接采用默认的.不需要设置，即默认设置了如何从初始值 过渡到 结束值
        // 关于自定义插值器后面学
        // 下面看看ofInt()的源码分析 ->>关注1
        
// 步骤2：设置动画的播放各种属性
        anim.setDuration(500);
        // 设置动画运行的时长
        
        anim.setStartDelay(500);
        // 设置动画延迟播放时间

        anim.setRepeatCount(0);
        // 设置动画重复播放次数 = 重放次数+1
        // 动画播放次数 = infinite时,动画无限重复
        
        anim.setRepeatMode(ValueAnimator.RESTART);
        // 设置重复播放动画模式
        // ValueAnimator.RESTART(默认):正序重放
        // ValueAnimator.REVERSE:倒序回放
     
// 步骤3：将改变的值手动赋值给对象的属性值：通过动画的更新监听器
        // 设置 值的更新监听器
        // 即：值每次改变、变化一次,该方法就会被调用一次
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                int currentValue = (Integer) animation.getAnimatedValue();
                // 获得改变后的值
                
                System.out.println(currentValue);
                // 输出改变后的值

// 步骤4：将改变后的值赋给对象的属性值，下面会详细说明
                View.setproperty（currentValue）；

// 步骤5：刷新视图，即重新绘制，从而实现动画效果
                View.requestLayout();
                
                
            }
        });

        anim.start();
        // 启动动画
    }

// 关注1：ofInt（）源码分析
    public static ValueAnimator ofInt(int... values) {
        // 允许传入一个或多个Int参数
        // 1. 输入一个的情况（如a）：从0过渡到a；
        // 2. 输入多个的情况（如a，b，c）：先从a平滑过渡到b，再从b平滑过渡到C
        
        ValueAnimator anim = new ValueAnimator();
        // 创建动画对象
        anim.setIntValues(values);
        // 将传入的值赋值给动画对象
        return anim;
    }

效果

值 从初始值 过度到 结束值 的过程如下：

2.在XML代码中设置

具备重用性，即将通用的动画写到XML里，可在各个界面中去重用它

• 步骤1：在路径 res/animator的文件夹里创建相应的动画 .xml文件

  此处设置为 res/animator/set_animation.xml

• 步骤2：设置动画参数

​ set_animation.xml

// ValueAnimator采用<animator>  标签
<animator xmlns:android="http://schemas.android.com/apk/res/android"  
    android:valueFrom="0"   // 初始值
    android:valueTo="100"  // 结束值
    android:valueType="intType" // 变化值类型 ：floatType & intType

    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = "true" // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = "false" // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= "true" // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= "restart" // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = "0" // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面学

/>

• 步骤3：在Java代码中启用动画

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.set_animation); 
// 载入XML动画

animator.setTarget(view);  
// 设置动画对象

animator.start();  
// 启动动画

实例

实现的动画效果：按钮的宽度从 250px 放大到 500px

public class Demo_ofInt extends AppCompatActivity {

    private Button mbutton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo_of_int);

        mbutton = findViewById(R.id.anim1);
        mbutton.getLayoutParams().width = 250;

        //1. 设置属性数值的初始值 和 结束值
        // 结束值 = 500
        ValueAnimator valueAnimator = ValueAnimator.ofInt(mbutton.getLayoutParams().width,500);

        //2.设置动画的各种属性
        valueAnimator.setDuration(3000); //动画时长
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE); //重复播放

        //3.将属性值手动赋值给对象的属性：此处是将 值 付给按钮的宽度
        //设置更新监听器，即数值每次变化更新都会调用该方法
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int currentValue = (Integer) animation.getAnimatedValue();
                System.out.println(currentValue);

                //每次值变化，将值手动赋值给对象的属性
                mbutton.getLayoutParams().width = currentValue;
                //4.刷新视图，即重新绘制，从而实现动画效果
                mbutton.requestLayout();
            }
        });

        //启动动画
        valueAnimator.start();
    }
}

效果：

浮点型：ValueAnimator.ofFloat()

原理

具体使用

操作值的方式 分为 XML 设置 / Java 代码设置

1.java代码中设置

ValueAnimator anim = ValueAnimator.ofFloat(0, 3);  
// 其他使用类似ValueAnimator.ofInt（int values），不废话

2.在xml代码中设置

// ValueAnimator采用<animator>  标签
<animator xmlns:android="http://schemas.android.com/apk/res/android"  
    // 设置属性同 ofInt
    android:valueFrom="0"  
    android:valueTo="100"  
    android:valueType="intType"/>

在Java代码中启动动画,也是和上面一样。直接看效果：

说明

从上面可以看出，ValueAnimator.ofInt()与ValueAnimator.oFloat()仅仅只是在估值器上的区别：（即如何从初始值 过渡 到结束值）

• ValueAnimator.oFloat()采用默认的浮点型估值器 (FloatEvaluator)
• ValueAnimator.ofInt()采用默认的整型估值器（IntEvaluator）

在使用上完全没有区别，此处对ValueAnimator.oFloat()的使用就不废话了。

对象：ValueAnimator.ofObject()

作用

将初始值 以对象的形式 过渡到结束值。

工作原理

具体使用

// 创建初始动画时的对象  & 结束动画时的对象
myObject object1 = new myObject();  
myObject object2 = new myObject();  

ValueAnimator anim = ValueAnimator.ofObject(new myObjectEvaluator(), object1, object2);  
// 创建动画对象 & 设置参数
// 参数说明
// 参数1：自定义的估值器对象（TypeEvaluator 类型参数） - 下面会学
// 参数2：初始动画的对象
// 参数3：结束动画的对象
anim.setDuration(5000);  
anim.start();

大概了解一下估值器

• 作用：设置动画 如何从初始值 过渡到 结束值 的逻辑

1. 插值器（Interpolator）决定 值 的变化模式（匀速、加速blabla）
2. 估值器（TypeEvaluator）决定 值 的具体变化数值

从上面可知：

• ValueAnimator.ofFloat()实现了 将初始值 以浮点型的形式 过渡到结束值 的逻辑，那么这个过渡逻辑具体是怎么样的呢？
• 其实是系统内置了一个 FloatEvaluator估值器，内部实现了初始值与结束值 以浮点型的过渡逻辑
• 来看一下 FloatEvaluator的代码实现：

public class FloatEvaluator implements TypeEvaluator<Number> {  
// FloatEvaluator实现了TypeEvaluator接口

// 重写evaluate()
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
// 参数说明
// fraction：表示动画完成度（根据它来计算当前动画的值）
// startValue、endValue：动画的初始值和结束值
        float startFloat = ((Number) startValue).floatValue();  
        
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);  
        // 初始值 过渡 到结束值 的算法是：
        // 1. 用结束值减去初始值，算出它们之间的差值
        // 2. 用上述差值乘以fraction系数
        // 3. 再加上初始值，就得到当前动画的值
    }  
}

• ValueAnimator.ofInt() & ValueAnimator.ofFloat()都具备系统内置的估值器，即FloatEvaluator & IntEvaluator ，即系统已经默认实现了 如何从初始值 过渡到 结束值 的逻辑

• 但对于ValueAnimator.ofObject()，从上面的工作原理可以看出并没有系统默认实现，因为对象的动画操作复杂 & 多样，系统无法知道如何从初始对象过度到结束对象

• 因此，对于ValueAnimator.ofObject()，我们需自定义估值器（TypeEvaluator）来告知系统如何进行从 初始对象 过渡到 结束对象的逻辑
• 自定义实现的逻辑如下

// 实现TypeEvaluator接口
public class ObjectEvaluator implements TypeEvaluator{  

// 复写evaluate（）
// 在evaluate（）里写入对象动画过渡的逻辑
    @Override  
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
        // 参数说明
        // fraction：表示动画完成度（根据它来计算当前动画的值）
        // startValue、endValue：动画的初始值和结束值

        ... // 写入对象动画过渡的逻辑
        
        return value;  
        // 返回对象动画过渡的逻辑计算后的值
    }

实例

实现的动画效果：一个圆从一个点 移动到 另外一个点。

1.定义一个Point类

public class Point {
    //设置两个变量 用于记录坐标的位置
    private float x;
    private float y;

    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    public float getX() {
        return x;
    }

    public void setX(float x) {
        this.x = x;
    }

    public float getY() {
        return y;
    }

    public void setY(float y) {
        this.y = y;
    }
}

2.根据需求实现TypeEvaluator接口

• 实现TypeEvaluator接口的目的是自定义如何 从初始点坐标 过渡 到结束点坐标；
• 本例实现的是一个从左上角到右下角的坐标过渡逻辑。

//实现 TypeEvaluator 接口
public class PointEvaluator implements TypeEvaluator {
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

        //将动画初始值 和 结束值 强制类型转换成 Point 类对象
        Point startPoint = (Point) startValue;
        Point endPoint = (Point) endValue;

        //根据 fraction 来计算当前动画的 x 和 y 的值  fraction表示动画完成度
        float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
        float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());

        //将计算后的坐标封装到一个新的 Point 对象中并返回
        Point point = new Point(x,y);
        return point;
    }
}

3.将属性动画作用到自定义View当中

public class MyView extends View {
    //设置需要用到的变量
    public static final float RADIUS = 100f; //半径
    private Point currentPoint; //当前坐标
    private Paint mPaint; //绘图画笔

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.RED);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //如果当前坐标为空（即第一次）
        if (currentPoint == null) {
            //创建一个点对象(100,100)
            currentPoint = new Point(RADIUS, RADIUS);
            //在该点画一个圆
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);


            //将属性动画作用到View中
            //1. 创建初始动画的对象点 和 动画结束时的对象点
            Point startPoint = new Point(RADIUS, RADIUS); //初始（100,100）
            Point endPoint = new Point(700, 1000); //结束点（700,1000)

            //2.创建动画对象 设置初始值 和结束值
            ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
            // 参数说明
            // 参数1：TypeEvaluator 类型参数 - 使用自定义的PointEvaluator(实现了TypeEvaluator接口)
            // 参数2：初始动画的对象点
            // 参数3：结束动画的对象点

            //3. 设置动画参数
            animator.setDuration(5000);
            animator.setRepeatCount(ValueAnimator.INFINITE);

            //4.通过 值 的更新监听器，将改变的对象手动赋值给当前对象
            // 此处是将 改变后的坐标值对象 赋给 当前的坐标值对象
            // 设置值的更新监听器，即每当坐标值更新一次，该方法就会被调用一次
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //获取当前坐标值
                    currentPoint = (Point) animation.getAnimatedValue();
                    // 重新绘制
                    // 调用invalidate()后,就会刷新View,即才能看到重新绘制的界面,即onDraw()会被重新调用一次
                    // 所以坐标值每改变一次,就会调用onDraw()一次
                    invalidate();
                }
            });

            animator.start();
        } else {
            //如果坐标值不为空 则画圆
            //所以坐标值每改变一次 就会调用onDraw() 一次，就会画一次圆，从而实现动画效果

            //在该点画一个圆
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x,y,RADIUS,mPaint);
        }
    }
}

4.布局中引入MyView

activity_demo_of_object.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".Demo_ofObject">

    <com.ccc.animationdmeo3.objectDemo.MyView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

5.在页面中加载

public class Demo_ofObject extends AppCompatActivity {

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

6.效果

说明

从上面可以看出，其实ValueAnimator.ofObject()的本质还是操作 值，只是是采用将 多个值 封装到一个对象里的方式 同时对多个值一起操作而已。

就像上面的例子，本质还是操作坐标中的x，y两个值，只是将其封装到Point对象里，方便同时操作x，y两个值而已

Demo 地址

https://github.com/Commandercc/DemoEX/blob/master/AnimationDmeo3.zip