这期内容当中小编将会给大家带来有关怎么在Android应用中利用贝塞尔曲线实现一个购物车添加轨迹,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
效果如下:
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);
即可实现一种类似于添加至购物车的运动轨迹效果。
上述就是小编为大家分享的怎么在Android应用中利用贝塞尔曲线实现一个购物车添加轨迹了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。