Android动画使用（四）——插值器与估值器

2017-06-18 本文已影响118人 _猜火车_

特别提醒：本文摘自【Carson_Ho：http://www.jianshu.com/p/2f19fe1e3ca1 】强烈建议读者进入原博客查看学习。

1、前言

Android三类动画中，补间动画 & 属性动画实现动画的原理是：

944365-62e601917ece2525.png
其中步骤2中的 插值器（Interpolator）和 估值器（TypeEvaluator）是实现复杂动画效果的关键
本文将详细讲解 插值器（Interpolator）和 估值器（TypeEvaluator）
特别注意：估值器是属性动画特有的属性

2、插值器（Interpolator）

2.1 插值器简介

定义：一个接口
作用：设置属性值从初始值过渡到结束值的变化规律

如匀速、加速 & 减速等等
即确定了动画效果变化的模式，如匀速变化、加速变化等等

2.2 应用场景

实现非线性运动的动画效果

非线性运动：动画改变的速率不是一成不变的，如加速 & 减速运动都属于非线性运动

2.3 具体使用

插值器在动画的使用有两种方式：在XML 和 Java代码中设置：

2.3.1 设置方式一：在 Java 代码中设置

        //动画作用对象
        Button button = (Button) findViewById(R.id.button);

        //步骤1：创建动画对象 & 设置动画效果
        Animation alphaAnimation = new AlphaAnimation(1, 0);
        alphaAnimation.setDuration(3000);

        //步骤2：创建对应的插值器类对象
        Interpolator overshootInterpolator = new OvershootInterpolator();

        //步骤3：给动画设置插值器
        alphaAnimation.setInterpolator(overshootInterpolator);

        //步骤4：设置动画作用对象 & 开始动画
        button.startAnimation(alphaAnimation);

2.3.2 设置方式二：在xml代码中设置插值器属性android:interpolator

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    // 通过资源ID设置插值器
    android:interpolator="@android:anim/overshoot_interpolator"
    
    android:duration="3000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="2"
    android:toYScale="2" />

2.4 系统内置插值器类型

上文中插值器时的资源ID是什么呢？即有哪些类型的插值器可供我们使用呢？
Android内置了 9 种内置的插值器实现：

对应的Java类	资源ID	作用
AccelerateInterpolator	@android:anim/accelerate_interpolator	动画加速进行
OvershootInterpolator	@android:anim/overshoot_interpolator	快速完成动画，超出再回到结束样式
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	先加速再减速
AnticipateInterpolator	@android:anim/anticipate_interpolator	先退后再加速前进
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	先退后再加速前进，超出终点后再回终点
BounceInterpolator	@android:anim/bounce_interpolator	最后阶段弹球效果
CycleInterpolator	@android:anim/cycle_interpolator	周期运动
DecelerateInterpolator	@android:anim/decelerate_interpolator	减速
LinearInterpolator	@android:anim/linear_interpolator LinearInterpolator	匀速

使用时：

当在XML文件设置插值器时，只需传入对应的插值器资源ID即可
当在Java代码设置插值器时，只需创建对应的插值器对象即可

特别提醒：

系统默认的插值器是AccelerateDecelerateInterpolator，即先加速后减速

系统内置插值器的效果图大致如下：

944365-0a9435149480729e.gif

2.5 自定义插值器

使用Android内置的插值器能满足大多数的动画需求

如果上述9个插值器无法满足需求，还可以自定义插值器

本质：根据动画的进度（0%-100%）计算出当前属性值改变的百分比

2.5.1 具体使用：自定义插值器需要实现 Interpolator / TimeInterpolator接口 & 复写getInterpolation（）**

1、补间动画实现 Interpolator接口；属性动画实现TimeInterpolator接口
2、TimeInterpolator接口是属性动画中新增的，用于兼容Interpolator接口，这使得所有过去的Interpolator实现类都可以直接在属性动画使用

// Interpolator接口
public interface Interpolator {  

    // 内部只有一个方法
     float getInterpolation(float input) {  
         // 参数说明
         // input值值变化范围是0-1，且随着动画进度（0% - 100% ）均匀变化
        // 即动画开始时，input值 = 0；动画结束时input = 1
        // 而中间的值则是随着动画的进度（0% - 100%）在0到1之间均匀增加

      ...// 插值器的计算逻辑

      return xxx；
      // 返回的值就是用于估值器继续计算的fraction值，下面会详细说明
    }  

// TimeInterpolator接口
// 同上
public interface TimeInterpolator {  

    float getInterpolation(float input);  

}

在学习自定义插值器前，我们先来看两个已经实现好的系统内置差值器：

匀速插值器：LinearInterpolator
先加速再减速插值器：AccelerateDecelerateInterpolator

// 匀速差值器：LinearInterpolator
@HasNativeInterpolator  
public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {  
   // 仅贴出关键代码
  ...
    public float getInterpolation(float input) {  
        return input;  
        // 没有对input值进行任何逻辑处理，直接返回
        // 即input值 = fraction值
        // 因为input值是匀速增加的，因此fraction值也是匀速增加的，所以动画的运动情况也是匀速的，所以是匀速插值器
    }  
}

// 先加速再减速 差值器：AccelerateDecelerateInterpolator
@HasNativeInterpolator  
public class AccelerateDecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
      // 仅贴出关键代码
  ...
    public float getInterpolation(float input) {  
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
        // input的运算逻辑如下：
        // 使用了余弦函数，因input的取值范围是0到1，那么cos函数中的取值范围就是π到2π。
        // 而cos(π)的结果是-1，cos(2π)的结果是1
        // 所以该值除以2加上0.5后，getInterpolation()方法最终返回的结果值还是在0到1之间。只不过经过了余弦运算之后，最终的结果不再是匀速增加的了，而是经历了一个先加速后减速的过程
        // 所以最终，fraction值 = 运算后的值 = 先加速后减速
        // 所以该差值器是先加速再减速的
    }  
 }

从上面看出，自定义插值器的关键在于：对input值根据动画的进度（0%-100%）通过逻辑计算计算出当前属性值改变的百分比

2.5.2 具体实现实例

目的：写一个自定义Interpolator：先减速后加速
效果图大致如下：

944365-60cf56d176981da0.gif

步骤1：根据需求实现Interpolator接口

DecelerateAccelerateInterpolator.java

public class DecelerateAccelerateInterpolator implements TimeInterpolator {
    @Override
    public float getInterpolation(float input) {
        float result;
        if (input <= 0.5) {
            result = (float) (Math.sin(Math.PI * input)) / 2;
            // 使用正弦函数来实现先减速后加速的功能，逻辑如下：
            // 因为正弦函数初始弧度变化值非常大，刚好和余弦函数是相反的
            // 随着弧度的增加，正弦函数的变化值也会逐渐变小，这样也就实现了减速的效果。
            // 当弧度大于π/2之后，整个过程相反了过来，现在正弦函数的弧度变化值非常小，
            // 渐渐随着弧度继续增加，变化值越来越大，弧度到π时结束，这样从0过度到π，也就实现了先减速后加速的效果
        } else {
            //这里就是原生的AccelerateDecelerateInterpolator的逻辑
            result = (float) (2 - Math.sin(Math.PI * input)) / 2;
        }

        return result;
    }
}

步骤2：在代码中使用该插值器

public class MainActivity extends AppCompatActivity {

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

        //动画作用对象
        final Button button = (Button) findViewById(R.id.button);

        //获取当前按钮的位置
        float currentX = button.getTranslationX();

        //创建属性动画（因为刚才我们实现的是TimeInterpolator接口） &　设置动画对象
        ObjectAnimator animator = ObjectAnimator.ofFloat(button, "translationX", currentX, 300, currentX);
        //这里演示的是水平方向的动画
        //从当前位置-->距离当前位置300px-->在回到原始位置

        animator.setDuration(3000);

        //设置插值器
        animator.setInterpolator(new DecelerateAccelerateInterpolator());

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

    }
}

3、估值器（TypeEvaluator）

3.1 估值器简介

定义：一个接口
作用：设置属性值从初始值过渡到结束值的变化具体数值

插值器（Interpolator）决定值的变化规律（匀速、加速blabla），即决定的是变化趋势；而接下来的具体变化数值则交给估值器

特别注意：估值器属性动画特有的属性

3.2 应用场景

协助插值器实现非线性运动的动画效果

非线性运动：动画改变的速率不是一成不变的，如加速 & 减速运动都属于非线性运动

3.3 具体使用

在Java代码中设置

ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator()，1，3);
// 在第3个参数中传入对应估值器类的对象
// 系统内置的估值器有3个：
// IntEvaluator：以整型的形式从初始值 - 结束值 进行过渡
// FloatEvaluator：以浮点型的形式从初始值 - 结束值 进行过渡
// ArgbEvaluator：以Argb类型的形式从初始值 - 结束值 进行过渡

3.4 系统内置的估值器类型

系统内置的估值器有三种

类型	说明
IntEvaluator	整数属性值。
FloatEvaluator	浮点数属性值。
ArgbEvaluato	十六进制color属性值。
TypeEvaluator	用户自定义属性值接口，譬如对象属性值类型不是int、float、color类型，你必须实现这个接口去定义自己的数据类型。

3.5 自定义估值器

如果上述内置的估值器无法满足需求，还可以自定义估值器
本质：根据插值器计算出当前属性值改变的百分比 & 初始值 & 结束值来计算当前属性具体的数值

如：动画进行了50%（初始值=100，结束值=200 ），那么匀速插值器计算出了当前属性值改变的百分比是50%，那么估值器则负责计算当前属性值 = 100 + （200-100）x50% = 150.

3.5.1 具体使用：自定义估值器需要实现 TypeEvaluator接口 & 复写evaluate()

public interface TypeEvaluator {  

    public Object evaluate(float fraction, Object startValue, Object endValue) {  
// 参数说明
// fraction：插值器getInterpolation（）的返回值
// startValue：动画的初始值
// endValue：动画的结束值

        ....// 估值器的计算逻辑

        return xxx；
        // 赋给动画属性的具体数值
        // 使用反射机制改变属性变化

// 特别注意
// 那么插值器的input值 和 估值器fraction有什么关系呢？
// 答：input的值决定了fraction的值：input值经过计算后传入到插值器的getInterpolation（），然后通过实现getInterpolation（）中的逻辑算法，根据input值来计算出一个返回值，而这个返回值就是fraction了
    }  
}

在学习自定义插值器前，我们先来看一个已经实现好的系统内置差值器：浮点型插值器FloatEvaluator

public class FloatEvaluator implements TypeEvaluator {  
// 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;  
        // 返回对象动画过渡的逻辑计算后的值
    }

3.5.2 具体实现实例：

目的：一个圆从一个点移动到另外一个点
效果图大致如下：

944365-45b817bd4ca8c119.gif

步骤1：定义对象类

因为ValueAnimator.ofObject（）是面向对象操作的，所以需要自定义对象类。
本例需要操作的对象是圆的点坐标
Point.java

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

    //通过构造方法用于设置坐标
    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    //通过get方法获取坐标点
    public float getX() {
        return x;
    }

    public float getY() {
        return y;
    }
}

步骤2：根据需求实现TypeEvaluator接口

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

PointEvaluator.java

public class PointEvaluator implements TypeEvaluator {
    //复写evaluate方法，在这里面写入对象动画过渡的逻辑
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        //将动画初始值startValue & 动画结束值endValue强制类型转换成Point类对象
        Point startPoint = (Point) startValue;
        Point endPoint = (Point) endValue;

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

        Point point = new Point(x, y);
        return point;
    }
}

上面步骤是根据需求自定义TypeEvaluator的实现
下面说明如何通过对 Point 对象进行动画操作，从而实现整个自定义View的动画效果。

步骤3：将属性动画作用到自定义View当中

MyView.java

public class MyView extends View {

    //设置需要的变量
    public static final float RADIUS = 70f;//圆的半径
    private Point currentPoint;//当前坐标点
    private Paint mPaint;//画笔


    //在构造方法里初始化画笔（改自定义View要在xml中使用，所以这里用两个参数的构造方法）
    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置画笔颜色
        mPaint.setColor(Color.BLUE);
    }

    // 复写onDraw实现绘制逻辑
    // 绘制逻辑:先在初始点画圆,通过监听当前坐标值(currentPoint)的变化,每次变化都调用onDraw()重新绘制圆,从而实现圆的平移动画效果
    @Override
    protected void onDraw(Canvas canvas) {
        //如果当前点坐标为空（即第一次）
        if (currentPoint == null) {
            //创建点对象，把半径作为圆心
            currentPoint = new Point(RADIUS, RADIUS);

            //在该点画一个圆 圆心=（70,70），半径=70
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);

            //核心逻辑
            //步骤1：创建初始动画时的对象点 & 结束动画时的对象点
            Point startPoint = new Point(RADIUS, RADIUS);//初始点圆心（70,70）
            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(3000);

            //步骤4：通过 值 的更新监听器，将改变的对象手动赋值给当前对象
            //此处是将 改变后的坐标值对象 赋给 当前的坐标值对象
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //获取当前的值
                    currentPoint = (Point) animation.getAnimatedValue();
                    // 将每次变化后的坐标值（估值器PointEvaluator中evaluate（）返回的Piont对象值）到当前坐标值对象（currentPoint）
                    // 从而更新当前坐标值（currentPoint）

                    //步骤5：每次赋值后就重写绘制，从而实现动画效果
                    invalidate();
                    // 调用invalidate()后,就会刷新View,即才能看到重新绘制的界面,即onDraw()会被重新调用一次
                    // 所以坐标值每改变一次,就会调用onDraw()一次
                }
            });

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

            // 在该点画一个圆:圆心 = 当前坐标,半径 = 70
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);
        }
    }
}

步骤4：在布局文件加入自定义View空间

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.pxj.animation03.MainActivity">

    <com.pxj.animation03.MyView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

步骤5：在主代码文件设置显示视图

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

    }
}

4、总结

强烈建议参考原文：http://www.jianshu.com/p/2f19fe1e3ca1