小球弹弹弹

本文介绍了一个自定义View组件BezierView的实现方式,该组件利用Bezier曲线实现了一个动态变化的圆形路径动画效果。文章详细展示了如何通过Java代码设置画笔、路径及动画逻辑,并通过定时任务不断更新视图来达到动画效果。

public class BezierView extends View {

 

 Paint paint;//画笔

 Path path;//路径

 

 int radius = 50;//圆的半径

 int time = 100;//计数时长

 

 int index;

 int offsetIndex;

 float viewX, viewY;//图形中心点坐标

 

 float width;//屏幕宽度

 float partWidth;//屏幕宽度的1/4

 int paddingLeft, paddingRight;//图形内边距

 float x1, y1, x2, y2, x3, y3, x4, y4;//圆形左上右下四个点

 

 float x12, y12, x23, y23, x34, y34, x41, y41;//圆形左上右下四个点之间的渐变点

 

 public BezierView(Context context) {

  this(context, null);

 }

 

 public BezierView(Context context, AttributeSet attrs) {

  this(context, attrs, 0);

 }

 

 public BezierView(Context context, AttributeSet attrs, int defStyleAttr) {

  super(context, attrs, defStyleAttr);

 

  paint = new Paint();

  paint.setColor(ResourcesCompat.getColor(getResources(), R.color.colorPrimary, null));

  paint.setAntiAlias(true);

 }

 

 

 @Override

 protected void onDraw(Canvas canvas) {

  paddingLeft = getPaddingLeft();

  paddingRight = getPaddingRight();

  width = getWidth() - paddingLeft - paddingRight;

  partWidth = width / 4;

 

  path = new Path();

  path.moveTo(x1, y1);

  path.cubicTo(x1, y1, x12, y12, x2, y2);

  path.cubicTo(x2, y2, x23, y23, x3, y3);

  path.cubicTo(x3, y3, x34, y34, x4, y4);

  path.cubicTo(x4, y4, x41, y41, x1, y1);

  canvas.drawPath(path, paint);

 

  move();

 }

 

 

 public void move() {

  new Timer().schedule(new TimerTask() {

   @Override

   public void run() {

    if (index < time - 1) {

     index++;

     viewX = width / time * index + paddingLeft;

     viewY = 400;

 

     x1 = viewX - radius;

     x2 = viewX;

     x3 = viewX + radius;

     x4 = viewX;

 

     y1 = viewY;

     y2 = viewY - radius;

     y3 = viewY;

     y4 = viewY + radius;

 

     offsetIndex = index % (time / 4) + 1;

 

     //根据图形移动到的区域进行曲线变化

     float position = (viewX - paddingLeft) / partWidth;

 

     //右边半圆

     if (position >= 0 && position < 1) {

      x3 = viewX + radius + radius / (time / 4) * offsetIndex;

     } else if (position >= 1 && position < 2) {

      x3 = viewX + radius + radius;

     } else if (position >= 2 && position < 3) {

      x3 = viewX + radius + radius - radius / (time / 4) * offsetIndex;

     } else {

      x3 = viewX + radius;

     }

     x23 = x34 = x3;

     y12 = y23 = y2;

 

     //左边半圆

     if (position >= 1 && position < 2) {

      x1 = viewX - radius - radius / (time / 4) * offsetIndex;

     } else if (position >= 2 && position < 3) {

      x1 = viewX - radius - radius;

     } else if (position >= 3) {

      x1 = viewX - radius - radius + radius / (time / 4) * offsetIndex;

     } else {

      x1 = viewX - radius;

     }

     x12 = x41 = x1;

     y34 = y41 = y4;

 

     postInvalidate();

    } else {

     cancel();

    }

   }

  }, 0, 5000);

 }

 

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦想不上班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值