控件抛物线轨迹的实现

写这篇文章的初衷也是加强对插值器和估值器的记忆。

其实对于插值器和估值器来说，除了系统提供的以外，我们可以自定义。实现方式也很简单。因为插值器和估值器都只是一个接口。并且内部只有一个方法。我们只要实现接口就可以了，就可以做出很多绚丽的动画了。其中，自定义插值器需要实现 Interpolator或者TimeInterpolator，自定义估值器 需要实现TypeEvaluator。

但是一般来说，插值器使用系统的就足够了，估值器自定义的可能会多一些，另外就是如果要对其他类型（非Int丶float丶color）做动画，必须使用自定义估值器算法。
在这里我们实现抛物线轨迹是 固定时间的抛物线（球按照抛物线轨迹运行1.5秒）。其目的主要是为了熟练使用自定义估值器。

步骤一：因为是一个控件的运动轨迹，肯定要涉及到点的坐标（x,y）,所以首先要建一个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;
    }
}

步骤二：创建自定义估值器：因为Point不是系统估值器所支持的类型，所以需要自定义

public class MyEvaluator implements TypeEvaluator {
    @Override
    public Point evaluate(float fraction, Point startValue, Point endValue) {
        //fraction 动画的完成度:受插值器影响
        Log.e("TAG","fraction"+"==="+fraction);
        float x = 400 * (fraction*1.5f);    //坐标x = k * t
        float y = 400 * (fraction*1.5f) * (fraction*1.5f);  //坐标x = k * t *t

         //根据新生成的坐标创建Point类并返回
        Point point = new Point(x,y);
        return point;
    }
}

步骤三：为所需要的控件添加动画

 @Override
    public void onClick(View v) {
        //该写法会报错： java.lang.ClassCastException: java.lang.Float cannot be cast to com.bing.myparabola.Point
        //因为ObjectAnimator会自动赋值，而settranslationX()是Float类型的，所以只能使用ValueAnimator
      /*ObjectAnimator animator = ObjectAnimator.ofObject(button,"translationX",new MyEvaluator(),new Point(0,0));
        animator.setDuration(1500);
        animator.start();*/

      ValueAnimator animator = ValueAnimator.ofObject(new MyEvaluator(),new Point(0,0),new Point(1,1));

        //设置动画运行时间为1.5s
        animator.setDuration(1500);

        //动画属性更新监听器
        //即：值每更新一次，变化一次，该方法被调用一次，我们可以通过该方法，手动对控件的属性赋值
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Point point = (Point) animation.getAnimatedValue();

                button.setX(point.getX());

                button.setY(point.getY());


            }
        });

        //开始动画
        animator.start();

    }

效果图为：

GIF.gif

---

项目地址为：https://github.com/fengxiaobing/MyParabola