Android   发布时间:2022-04-28  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Android贝塞尔曲线初步学习第三课 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,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,1]
  *
  * @param t 曲线长度比例
  * @param p0 起始点
  * @param p1 控制点1
  * @param p2 控制点2
  * @param p3 终止点
  * @return t对应的点
  */
 public static PointF calculateBezierPointForCubic(float t,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的区别: @H_489_42@ 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,mCirclePaint);

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

大佬总结

以上是大佬教程为你收集整理的Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹全部内容,希望文章能够帮你解决Android贝塞尔曲线初步学习第三课 Android实现添加至购物车的运动轨迹所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。