android那些事--属性动画04TypeEvaluator的使用

通过对ValueAnimator和ObjectAnimator的使用,了解到在获取动画对象时只需要传入起始和结束值系统就会自动完成值的平滑过渡,这个平滑过渡的完成就是靠TypeEvaluator这个类.还是一样先看一下这个接口的介绍.

理论介绍

这里写图片描述

再看下android源码中FloatEvaluator和IntEvaluator这两个子类是如何实现的.

这个是FloatEvaluator

public class FloatEvaluator implements TypeEvaluator {

    /**
     * This function returns the result of linearly interpolating the start and end values, with
     * fraction representing the proportion between the start and end values. The
     * calculation is a simple parametric calculation: result = x0 + t * (v1 - v0),
     * where x0 is startValue, x1 is endValue,
     * and t is fraction.
     *
     * @param fraction   The fraction from the starting to the ending values
     * @param startValue The start value; should be of type float or
     *                   Float
     * @param endValue   The end value; should be of type float or Float
     * @return A linear interpolation between the start and end values, given the
     *         fraction parameter.
     */
     
    public Float evaluate(float fraction, Number startValue, Number endValue) {
        float startFloat = startValue.floatValue();
        return startFloat + fraction * (endValue.floatValue() - startFloat);
    }
}

这个是IntEvaluator

public class IntEvaluator implements TypeEvaluator {

    /**
     * This function returns the result of linearly interpolating the start and end values, with
     * fraction representing the proportion between the start and end values. The
     * calculation is a simple parametric calculation: result = x0 + t * (v1 - v0),
     * where x0 is startValue, x1 is endValue,
     * and t is fraction.
     *
     * @param fraction   The fraction from the starting to the ending values
     * @param startValue The start value; should be of type int or
     *                   Integer
     * @param endValue   The end value; should be of type int or Integer
     * @return A linear interpolation between the start and end values, given the
     *         fraction parameter.
     */
     
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
}

可以看出这是两个非常实在的类,哈哈.

用结束值减去初始值，算出它们之间的差值，然后乘以fraction这个系数，再加上初始值，那么就得到当前动画的值了

实际使用

简单需求:自定义一个View,在View中有一个Point对象用于管理坐标,然后在onDraw()方法中根据Point坐标进行绘制.

分析:我们已经知道数据的平滑过渡是怎么产生的了,那么如果可以对Point对象进行平滑过渡则自定义View就可以实现需要的动画效果.

1. 自定义一个Evaluator,完成Point平滑的过渡
2. 在自定义View中启动Point的动画,得到不断更新的Point对象
3. 更新新的Point对象重新对View进行绘制

自定义的Evaluator类

public class PointEvaluator implements TypeEvaluator {
    @Override
    public Point evaluate(float fraction, Point startValue, Point endValue) {
        float resultX = startValue.getX() + fraction * (endValue.getX() - startValue.getX());
        float resultY = startValue.getY() + fraction * (endValue.getY() - startValue.getX());
        return new Point(resultX, resultY);
    }
}

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(int x) {
        this.x = x;
    }

    public float getY() {
        return y;
    }

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

最终的自定义的View

public class MyView extends View {

    private Paint mPaint;
    private Point mPoint;

    public MyView(Context context) {
        super(context);
        init();
    }
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mPoint == null) {
            mPoint = new Point(50, 50);
            drawCircle(canvas);
            startAnimation();
        } else {
            drawCircle(canvas);
        }
    }
    private void drawCircle(Canvas canvas) {
        canvas.drawCircle(mPoint.getX(), mPoint.getY(), 50, mPaint);
    }

    private void startAnimation() {
        Point startPoint = new Point(50, 50);
        Point endPoint = new Point(getWidth() - 50, getHeight() - 50);

        ValueAnimator animator = ValueAnimator
                .ofObject(new PointEvaluator(), startPoint, endPoint);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {

                mPoint = ((Point) animation.getAnimatedValue());
                LogUtil.i(mPoint.getX()+"------"+mPoint.getY());
                invalidate();
            }
        });
        animator.setDuration(5000);
        animator.start();
    }
}

这里写图片描述