58.贝赛尔曲线初步（三） - 实现添加至购物车的运动轨迹

转载请注明出处　http://blog.csdn.net/qq_31715429/article/details/54428464

本文出自：猴菇先生的博客

不知上一节高仿QQ未读消息气泡大家还喜欢么，今天继续练习贝赛尔曲线，这一节我们通过贝赛尔曲线和属性动画估值器实现添加至购物车的运动轨迹，效果如下：



1、新建自定义View，重写构造方法，初始化Paint、Path；

2、确定起始点、终止点、控制点坐标，这里我们直接固定：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mStartX = 100;
mStartY = 100;
mEndX = w - 100;
mEndY = h - 100;
mControlX = w - 100;
mControlY = 100;
}

3、画起止点小球和贝赛尔曲线路径：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mStartX, mStartY, 24, mCirclePaint);
canvas.drawCircle(mEndX, mEndY, 24, mCirclePaint);
mPath.reset();
mPath.moveTo(mStartX, mStartY);
mPath.quadTo(mControlX, mControlY, mEndX, mEndY);
canvas.drawPath(mPath, mPathPaint);
}

这样基本的东西就完成了。

4、那么该怎样使一个小球随着贝赛尔曲线的路径轨迹运动呢，那就需要得到运动到当前的点在贝赛尔曲线上的坐标，使用如下工具类：

/**
* 计算贝赛尔曲线坐标的工具类
*/

public class BezierUtil {
/**
* B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
*
* @param t  曲线长度比例
* @param p0 起始点
* @param p1 控制点
* @param p2 终止点
* @return t对应的点
*/
public static PointF calculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
PointF point = new PointF();
float temp = 1 - t;
point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
return point;
}

/**
* B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
*
* @param t  曲线长度比例
* @param p0 起始点
* @param p1 控制点1
* @param p2 控制点2
* @param p3 终止点
* @return t对应的点
*/
public static PointF calculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
PointF point = new PointF();
float temp = 1 - t;
point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
return point;
}
}

只需要传入对应的参数即可获得到当前点在贝赛尔曲线上的坐标。其中曲线长度比例t 以及起始点、终止点都可以在属性动画估值器Evaluator中获得：

/**
* 贝赛尔曲线估值器
*/
public class BezierEvaluator implements TypeEvaluator<PointF> {

/* 控制点坐标 */
private PointF mControlPoint;

public BezierEvaluator(PointF controlPoint) {
mControlPoint = controlPoint;
}

@Override
public PointF evaluate(float v, PointF pointF, PointF t1) {
return BezierUtil.calculateBezierPointForQuadratic(v, pointF, mControlPoint, t1);
}
}

注：Point与PointF的区别：

Point使用的是int类型来存储x、y坐标，而PointF使用的是float类型。

5、设置点击监听setOnclickListner(this)，重写onClick方法：

@Override
public void onClick(View view) {
BezierEvaluator evaluator = new BezierEvaluator(new PointF(mControlX, mControlY));
PointF startPoint = new PointF(mStartX, mStartY);
PointF endPoint = new PointF(mEndX, mEndY);
ValueAnimator anim = ValueAnimator.ofObject(evaluator, startPoint, endPoint);
anim.setDuration(1000);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
PointF curPoint = (PointF) valueAnimator.getAnimatedValue();
mCurX = (int) curPoint.x;
mCurY = (int) curPoint.y;
invalidate();
}
});
anim.start();
}

使用估值器BezierEvaluator的对象，在属性动画更新监听中获取到该当前所在位置，并重绘：

canvas.drawCircle(mCurX, mCurY, 24, mCirclePaint);

即可实现一种类似于添加至购物车的运动轨迹效果~