动画 -- 属性动画 -- 自定义曲线路径动画

一、贝塞尔曲线

1. 定义
贝塞尔曲线，是应用于二维图形应用程序的数学曲线，由线段和节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。

2. 公式与效果
(1)线性贝塞尔曲线

公式

效果

(2)二阶贝塞尔曲线

公式

效果

(3)三阶贝塞尔曲线

公式

效果

(4)n阶贝塞尔曲线

公式

二、绘制曲线

自定义View，绘制曲线，代码如下：

//自定义View
public class CurveView extends View {
    private Path mPath;
    private Paint mPaint;

    public CurveView(Context context) {
        super(context);
        init();
    }

    public CurveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CurveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPath = new Path();
        mPath.moveTo(300, 300);
        mPath.lineTo(500, 300);
        mPath.quadTo(700, 500, 500, 700); //二阶贝塞尔曲线
        mPath.lineTo(300, 700);
        mPath.quadTo(100, 500, 300, 300); 

        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.STROKE); //设置为空心
        mPaint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
    }
}

//布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.tomorrow.androidtest6.CurveView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

//代码，MAinActivity
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

三、自定义曲线路径动画

//贝塞尔曲线类
public class BesselCurve {

    public static float oneBesselCurve(float t, float start, float end) {
        float result = (1 - t) * start + t * end;
        return result;
    }

    public static float twoBesselCurve(float t, float start, float control1, float end) {
        float result = (1 - t) * (1 - t) * start + 2 * t * (1 - t) * control1 + t * t * end;
        return result;
    }

    public static float threeBesselCurve(float t, float start, float control1, float control2, float end) {
        float result = start * (1 - t) * (1 - t) * (1 - t) + 3 * control1 * t * (1 - t) * (1 - t) + 3 * control2 * t * t *(1 - t) + end * t * t * t;
        return result;
    }
}

//路径点坐标
public class PathPoint {
    public static final int PATH_MOVE = 0;
    public static final int PATH_ONE_BESSEL = 1;
    public static final int PATH_TWO_BESSEL = 2;
    public static final int PATH_THREE_BESSEL = 3;

    private int operation;
    private float endX, endY;
    private float control1X, control1Y, control2X, control2Y;

    //move操作跟一阶贝塞尔操作都通过该构造方法创建终点坐标
    public PathPoint(int operation, float endX, float endY) {
        this.operation = operation;
        this.endX = endX;
        this.endY = endY;
    }

    //二阶贝塞尔操作通过该构造方法创建控制点跟终点坐标
    public PathPoint(int operation, float control1X, float control1Y, float endX, float endY) {
        this.operation = operation;
        this.control1X = control1X;
        this.control1Y = control1Y;
        this.endX = endX;
        this.endY = endY;
    }

    //三阶贝塞尔操作通过该构造方法创建控制点跟终点坐标
    public PathPoint(int operation, float control1X, float control1Y, float control2X, float control2Y, float endX, float endY) {
        this.operation = operation;
        this.control1X = control1X;
        this.control1Y = control1Y;
        this.control2X = control2X;
        this.control2Y = control2Y;
        this.endX = endX;
        this.endY = endY;
    }

    public void setOperation(int operation) {
        this.operation = operation;
    }

    public int getOperation() {
        return operation;
    }

    public void setEndX(float endX) {
        this.endX = endX;
    }

    public float getEndX() {
        return endX;
    }

    public void setEndY(float endY) {
        this.endX = endX;
    }

    public float getEndY() {
        return endY;
    }

    public void setControl1X(float control1X) {
        this.control1X = control1X;
    }

    public float getControl1X() {
        return control1X;
    }

    public void setControl1Y(float control1Y) {
        this.control1Y = control1Y;
    }

    public float getControl1Y() {
        return control1Y;
    }

    public void setControl2X(float control2X) {
        this.control2X = control2X;
    }

    public float getControl2X() {
        return control2X;
    }

    public void setControl2Y(float control2Y) {
        this.control2Y = control2Y;
    }

    public float getControl2Y() {
        return control2Y;
    }
}

//路径集合
public class PathSet {
    private List<PathPoint> mPathSet = new ArrayList<>();

    public void moveTo(float endX, float endY) {
        PathPoint pathPoint = new PathPoint(PathPoint.PATH_MOVE, endX, endY);
        mPathSet.add(pathPoint);
    }

    public void oneBesselCurveTo(float endX, float endY) {
        PathPoint pathPoint = new PathPoint(PathPoint.PATH_ONE_BESSEL, endX, endY);
        mPathSet.add(pathPoint);
    }

    public void twoBesselCurveTo(float control1X, float control1Y, float endX, float endY) {
        PathPoint pathPoint = new PathPoint(PathPoint.PATH_TWO_BESSEL, control1X, control1Y, endX, endY);
        mPathSet.add(pathPoint);
    }

    public void threeBesselCurveTo(float control1X, float control1Y, float control2X, float control2Y, float endX, float endY) {
        PathPoint pathPoint = new PathPoint(PathPoint.PATH_THREE_BESSEL, control1X, control1Y, control2X, control2Y, endX, endY);
        mPathSet.add(pathPoint);
    }

    public List<PathPoint> getPathSet() {
        return mPathSet;
    }

    public void clear() {
        mPathSet.clear();
    }
}

//利用贝塞尔曲线类自定义估值器
public class PathEvaluator implements TypeEvaluator<PathPoint> {
    /**
     * @param fraction 动画执行的百分比
     * @param startValue 起点
     * @param endValue 终点
     * @return PathPoint 根据动画执行的百分比计算出当前点的坐标
     */
    @Override
    public PathPoint evaluate(float fraction, PathPoint startValue, PathPoint endValue) {
        float currentX = 0, currentY = 0;
        switch(endValue.getOperation()) {
            case PathPoint.PATH_MOVE:
                currentX = endValue.getEndX();
                currentY = endValue.getEndY();
                break;
            case PathPoint.PATH_ONE_BESSEL:
                currentX = BesselCurve.oneBesselCurve(fraction, startValue.getEndX(), endValue.getEndX());
                currentY = BesselCurve.oneBesselCurve(fraction, startValue.getEndY(), endValue.getEndY());
                break;
            case PathPoint.PATH_TWO_BESSEL:
                currentX = BesselCurve.twoBesselCurve(fraction, startValue.getEndX(), endValue.getControl1X(), endValue.getEndX());
                currentY = BesselCurve.twoBesselCurve(fraction, startValue.getEndY(), endValue.getControl1Y(), endValue.getEndY());
                break;
            case PathPoint.PATH_THREE_BESSEL:
                currentX = BesselCurve.threeBesselCurve(fraction, startValue.getEndX(), endValue.getControl1X(), endValue.getControl2X(), endValue.getEndX());
                currentY = BesselCurve.threeBesselCurve(fraction, startValue.getEndY(), endValue.getControl1Y(), endValue.getControl2Y(), endValue.getEndY());
                break;
            default:
                break;
        }
        return new PathPoint(PathPoint.PATH_MOVE, currentX, currentY);
    }
}

//布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/main_tv"
        android:layout_width="50px"
        android:layout_height="50px"
        android:background="@color/colorAccent"/>
</RelativeLayout>

//代码，MAinActivity
private void startBesselCurveAnimator() {
    PathSet pathSet = getPathSet();
    //"this"表示属性动画的作用对象为当前Activity对象
    //"pathPoint"为自定义属性名，在当前Activity对象中必须要有public访问权限的"setPathPoint()"方法设置"pathPoint"属性值
    ObjectAnimator objectAnimator = ObjectAnimator.ofObject(this, "pathPoint", new PathEvaluator(), pathSet.getPathSet().toArray());
    objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    objectAnimator.setRepeatCount(2);
    objectAnimator.setRepeatMode(ObjectAnimator.REVERSE);
    objectAnimator.setDuration(5000);
    objectAnimator.start();
}

private PathSet getPathSet() {
    PathSet pathSet = new PathSet();
    pathSet.moveTo(300,300);
    pathSet.oneBesselCurveTo(500, 300);
    pathSet.twoBesselCurveTo(700, 500, 500, 700);
    pathSet.oneBesselCurveTo(300, 700);
    pathSet.twoBesselCurveTo(100, 500, 300, 300);
    return pathSet;
}

public void setPathPoint(PathPoint pathPoint) { //自定义属性"pathPoint"的设置方法，具有public访问权限
    mMain_tv.setTranslationX(pathPoint.getEndX()); //设置TextView的x轴方向的偏移量
    mMain_tv.setTranslationY(pathPoint.getEndY()); //设置TextView的y轴方向的偏移量
}

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

    startBesselCurveAnimator();
}