自定义差值器，在线“查看差值器”效果

---

title: 自定义差值器，在线“查看差值器”效果
tags: []
notebook: 实用工具

---

在线“查看差值器”效果

简介

这个网站提供 可视化插值器以及演示动画，而且预置了许多插值器公式

http://inloop.github.io/interpolator/

image

效果示例一：

factor = 0.15
Math.PI = 3.14
pow(2, -10 * x) * sin((x - factor / 4) * (2 * Math.PI) / factor) + 1

效果示例二：

factor = 0.4
pow(2, -10 * x) * sin((x - factor / 4) * (2 * 3.14) / factor) + 1

Android 差值器的简单使用

官方内置了9钟插值器：

• LinearInterpolator（线性插值器：匀速）

• AccelerateInterpolator（加速度插值器： 起始速度慢，然后越来越快）

• DecelerateInterpolator（减速插值器：起始速度快，然后越来越慢）

• Accelerate Decelerate Interpolator / 先加速后减速插值器

image

什么是Interpolator？

通俗易懂的说，Interpolator（插值器）负责控制动画变化的速率，使得基本的动画效果能够以匀速、加速、减速、抛物线速率等各种速率变化。

示例代码：

 private void move(){
//        PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("translationX", 0, 300);
        float [] x = {0f,60f,120f,180f};
        ValueAnimator animator = ObjectAnimator.ofFloat(redView, "translationX", x);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();
    }

    private void scale(){
        PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("scaleX", 0.0f, 1f);
        PropertyValuesHolder welcomeTv_2 = PropertyValuesHolder.ofFloat("scaleY", 0.0f, 1f);
        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(redView, welcomeTv_1, welcomeTv_2);

        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(2000);
//        pcrAnimator.setStartDelay(1000);
        animator.start();
    }

    private void rotation(){
        ValueAnimator animator = ObjectAnimator.ofFloat(redView, "rotation", -200f, 0f);
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(2000);
        animator.start();
    }

    private void alpha(){
        ValueAnimator animator = ObjectAnimator.ofFloat(redView, "alpha", 0f, 1f);
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(2000);
        animator.start();
    }

自定义差值器

  public class CustomInterpolator implements Interpolator {
  
      private float factor;//因素
  
  
      public CustomInterpolator() {
          this.factor = 0.15f;
      }
  
      @Override
      public float getInterpolation(float input) {
          return (float) (Math.pow(2, -10 * input) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1);
      }
  }

插值器 和 估值器 的区别

• 插值器Interpolator

  根据时间流失的百分比 计算当前属性改变的百分比。

• 估值器Evaluator

  根据当前属性改变的百分比来计算改变后的属性值

  插值器决定属性值随时间变化的规律；而具体变化属性数值则交给估值器去计算。

自定义估值器

    // 实现TypeEvaluator接口
    public class PointEvaluator implements TypeEvaluator<Point> {
        // 复写evaluate（）
        // 在evaluate（）里写入对象动画过渡的逻辑
        @Override
        public Point evaluate(float fraction, Point startValue, Point endValue) {
            // 根据fraction来计算当前动画的x和y的值
            int x = (int) (startValue.x + fraction * (endValue.x - startValue.x));
            int y = (int) (startValue.y + fraction * (endValue.y - startValue.y));
            // 将计算后的坐标封装到一个新的Point对象中并返回
            return new Point(x, y);
        }
    }

总结

插值器和估值器关系

属性动画是对属性做动画，属性要实现动画。

• 首先由插值器根据时间流逝的百分比计算出当前属性值改变的百分比，然后由插值器将这个百分比返回。这个时候插值器的工作就完成了。

比如: 插值器 返回的值是0.5，很显然我们要的不是0.5

• 插值器算好属性变化百分比之后，由估值器根据当前属性改变的百分比来计算改变后的属性值，根据这个属性值，我们就可以对View设置当前的属性值了。

参考资料

Android-贝塞尔插值器的使用

插值器？估值器？傻傻分不清楚