您好,登录后才能下订单哦!
怎么在Android中实现一个未读消息拖动气泡功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线。
步骤:
绘制圆背景以及文本;连接情况绘制贝塞尔曲线;另外端点绘制一个圆
1.定义,初始化等
状态:静止、连接、分离、消失
在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心
代码如下(示例):
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); init(w, h); } private void init(int w, int h) { mBubbleState = BUBBLE_STATE_DEFAULT; //设置固定气泡圆心初始坐标 if (mBubFixedCenter == null) { mBubFixedCenter = new PointF(w / 2, h / 2); } else { mBubFixedCenter.set(w / 2, h / 2); } //设置可动气泡圆心初始坐标 if (mBubMovableCenter == null) { mBubMovableCenter = new PointF(w / 2, h / 2); } else { mBubMovableCenter.set(w / 2, h / 2); } }
2.onDraw中绘制包括三样绘制
第一样:静止,连接,分离状态都需要绘制圆背景以及文本:
//静止,连接,分离状态都需要绘制圆背景以及文本 if (mBubbleState != BUBBLE_STATE_DISMISS) { canvas.drawCircle(mBubMovableCenter.x, mBubMovableCenter.y, mBubMovableRadius, mBubblePaint); mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect); canvas.drawText(mTextStr, mBubMovableCenter.x - mTextRect.width() / 2, mBubMovableCenter.y + mTextRect.height() / 2, mTextPaint); }
第二样:连接状态绘制贝塞尔曲线①。
if (mBubbleState == BUBBLE_STATE_CONNECT) { //绘制静止的气泡 canvas.drawCircle(mBubFixedCenter.x, mBubFixedCenter.y, mBubFixedRadius, mBubblePaint); //计算控制点的坐标 int iAnchorX = (int) ((mBubMovableCenter.x + mBubFixedCenter.x) / 2); int iAnchorY = (int) ((mBubMovableCenter.y + mBubFixedCenter.y) / 2); float sinTheta = (mBubMovableCenter.y - mBubFixedCenter.y) / mDist; float cosTheta = (mBubMovableCenter.x - mBubFixedCenter.x) / mDist; //D float iBubFixedStartX = mBubFixedCenter.x - mBubFixedRadius * sinTheta; float iBubFixedStartY = mBubFixedCenter.y + mBubFixedRadius * cosTheta; //C float iBubMovableEndX = mBubMovableCenter.x - mBubMovableRadius * sinTheta; float iBubMovableEndY = mBubMovableCenter.y + mBubMovableRadius * cosTheta; //A float iBubFixedEndX = mBubFixedCenter.x + mBubFixedRadius * sinTheta; float iBubFixedEndY = mBubFixedCenter.y - mBubFixedRadius * cosTheta; //B float iBubMovableStartX = mBubMovableCenter.x + mBubMovableRadius * sinTheta; float iBubMovableStartY = mBubMovableCenter.y - mBubMovableRadius * cosTheta; mBezierPath.reset(); mBezierPath.moveTo(iBubFixedStartX, iBubFixedStartY); mBezierPath.quadTo(iAnchorX, iAnchorY, iBubMovableEndX, iBubMovableEndY); mBezierPath.lineTo(iBubMovableStartX, iBubMovableStartY); mBezierPath.quadTo(iAnchorX, iAnchorY, iBubFixedEndX, iBubFixedEndY); mBezierPath.close(); canvas.drawPath(mBezierPath, mBubblePaint); }
第三样:消失状态执行爆炸动画
// 认为是消失状态,执行爆炸动画 if (mBubbleState == BUBBLE_STATE_DISMISS && mCurDrawableIndex < mBurstBitmapsArray.length) { mBurstRect.set( (int) (mBubMovableCenter.x - mBubMovableRadius), (int) (mBubMovableCenter.y - mBubMovableRadius), (int) (mBubMovableCenter.x + mBubMovableRadius), (int) (mBubMovableCenter.y + mBubMovableRadius)); canvas.drawBitmap(mBurstBitmapsArray[mCurDrawableIndex], null, mBurstRect, mBubblePaint); }
3.onTouchEvent中
按下:区分静止状态和连接状态
case MotionEvent.ACTION_DOWN: if (mBubbleState != BUBBLE_STATE_DISMISS) { mDist = (float) Math.hypot(event.getX() - mBubFixedCenter.x, event.getY() - mBubFixedCenter.y); if (mDist < mBubbleRadius + MOVE_OFFSET) { //加上MOVE_OFFSET是为了方便拖拽 mBubbleState = BUBBLE_STATE_CONNECT; } else { mBubbleState = BUBBLE_STATE_DEFAULT; } } break;
移动:判断是否到了分离状态
case MotionEvent.ACTION_MOVE: if (mBubbleState != BUBBLE_STATE_DEFAULT) { mDist = (float) Math.hypot(event.getX() - mBubFixedCenter.x, event.getY() - mBubFixedCenter.y); mBubMovableCenter.x = event.getX(); mBubMovableCenter.y = event.getY(); if (mBubbleState == BUBBLE_STATE_CONNECT) { if (mDist < mMaxDist - MOVE_OFFSET) { mBubFixedRadius = mBubbleRadius - mDist / 8; } else { mBubbleState = BUBBLE_STATE_APART; } } invalidate(); } break;
弹起:判断是否已经到了分离状态,分离状态爆炸,未分离反弹
case MotionEvent.ACTION_UP: if (mBubbleState == BUBBLE_STATE_CONNECT) { // 橡皮筋动画 startBubbleRestAnim(); } else if (mBubbleState == BUBBLE_STATE_APART) { if (mDist < 2 * mBubbleRadius){ //反弹动画 startBubbleRestAnim(); }else{ // 爆炸动画 startBubbleBurstAnim(); } } break;
4.反弹和爆炸动画
/** * 连接状态下松开手指,执行类似橡皮筋动画 */ private void startBubbleRestAnim() { ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(), new PointF(mBubMovableCenter.x, mBubMovableCenter.y), new PointF(mBubFixedCenter.x, mBubFixedCenter.y)); anim.setDuration(200); anim.setInterpolator(new OvershootInterpolator(5f)); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mBubMovableCenter = (PointF) animation.getAnimatedValue(); invalidate(); } }); anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); mBubbleState = BUBBLE_STATE_DEFAULT; } }); anim.start(); }
/** * 爆炸动画 */ private void startBubbleBurstAnim() { //将气泡改成消失状态 mBubbleState = BUBBLE_STATE_DISMISS; ValueAnimator animator = ValueAnimator.ofInt(0, mBurstBitmapsArray.length); animator.setInterpolator(new LinearInterpolator()); animator.setDuration(500); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mCurDrawableIndex = (int) animation.getAnimatedValue(); invalidate(); } }); animator.start(); }
关于怎么在Android中实现一个未读消息拖动气泡功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。