57.贝赛尔曲线初步（二） - 高仿QQ未读消息气泡拖拽黏连效果

2023-10-10 04:30
文章标签 初步 效果 拖拽 消息 qq 曲线 气泡 高仿 未读 57 黏连 赛尔

本文主要是介绍57.贝赛尔曲线初步（二） - 高仿QQ未读消息气泡拖拽黏连效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

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

上一节初步了解了Android端的贝塞尔曲线，这一节就举个栗子练习一下，仿QQ未读消息气泡，是最经典的练习贝塞尔曲线的东东，效果如下

这里写图片描述

附上github源码地址：https://github.com/MonkeyMushroom/DragBubbleView
欢迎star~

大体思路就是画两个圆，一个黏连小球固定在一个点上，一个气泡小球跟随手指的滑动改变坐标。随着两个圆间距越来越大，黏连小球半径越来越小。当间距小于一定值，松开手指气泡小球会恢复原来位置；当间距超过一定值之后，黏连小球消失，气泡小球继续跟随手指移动，此时手指松开，气泡小球消失~

1、首先老一套~新建attrs.xml文件，编写自定义属性，新建DragBubbleView继承View，重写构造方法，获取自定义属性值，初始化Paint、Path等东东，重写onMeasure计算宽高，这里不再啰嗦~

2、在onSizeChanged方法中确定黏连小球和气泡小球的圆心坐标，这里我们取宽高的一半：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mBubbleCenterX = w / 2;mBubbleCenterY = h / 2;mCircleCenterX = mBubbleCenterX;mCircleCenterY = mBubbleCenterY;
}

3、经分析气泡小球有以下几个状态：默认、拖拽、移动、消失，我们这里定义一下，方便根据不同的状态分析不同情况：

/* 气泡的状态 */
private int mState;
/* 默认，无法拖拽 */
private static final int STATE_DEFAULT = 0x00;
/* 拖拽 */
private static final int STATE_DRAG = 0x01;
/* 移动 */
private static final int STATE_MOVE = 0x02;
/* 消失 */
private static final int STATE_DISMISS = 0x03;

4、重写onTouchEvent方法，其中d代表两圆圆心间距，maxD代表可拖拽的最大间距：

@Override
public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:if (mState != STATE_DISMISS) {d = (float) Math.hypot(event.getX() - mBubbleCenterX, event.getY() - mBubbleCenterY);if (d < mBubbleRadius + maxD / 4) {//当指尖坐标在圆内的时候，才认为是可拖拽的//一般气泡比较小，增加(maxD/4)像素是为了更轻松的拖拽mState = STATE_DRAG;} else {mState = STATE_DEFAULT;}}break;case MotionEvent.ACTION_MOVE:if (mState != STATE_DEFAULT) {mBubbleCenterX = event.getX();mBubbleCenterY = event.getY();//计算气泡圆心与黏连小球圆心的间距d = (float) Math.hypot(mBubbleCenterX - mCircleCenterX, mBubbleCenterY - mCircleCenterY);//float d = (float) Math.sqrt(Math.pow(mBubbleCenterX - mCircleCenterX, 2) //+ Math.pow(mBubbleCenterY - mCircleCenterY, 2));if (mState == STATE_DRAG) {//如果可拖拽//间距小于可黏连的最大距离if (d < maxD - maxD / 4) {//减去(maxD/4)的像素大小，是为了让黏连小球半径到一个较小值快消失时直接消失mCircleRadius = mBubbleRadius - d / 8;//使黏连小球半径渐渐变小if (mOnBubbleStateListener != null) {mOnBubbleStateListener.onDrag();}} else {//间距大于于可黏连的最大距离mState = STATE_MOVE;//改为移动状态if (mOnBubbleStateListener != null) {mOnBubbleStateListener.onMove();}}}invalidate();}break;case MotionEvent.ACTION_UP:if (mState == STATE_DRAG) {//正在拖拽时松开手指，气泡恢复原来位置并颤动一下setBubbleRestoreAnim();} else if (mState == STATE_MOVE) {//正在移动时松开手指//如果在移动状态下间距回到两倍半径之内，我们认为用户不想取消该气泡if (d < 2 * mBubbleRadius) {//那么气泡恢复原来位置并颤动一下setBubbleRestoreAnim();} else {//气泡消失setBubbleDismissAnim();}}break;}return true;
}

如果控件外面有嵌套ListView、RecyclerView等拦截焦点的控件，那就在ACTION_DOWN中请求父控件不拦截事件：

getParent().requestDisallowInterceptTouchEvent(true);

然后ACTION_UP再把事件还回去：

getParent().requestDisallowInterceptTouchEvent(false);

5、在onDraw方法中画圆、画贝赛尔曲线、画消息个数文本：

@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);//画拖拽气泡canvas.drawCircle(mBubbleCenterX, mBubbleCenterY, mBubbleRadius, mBubblePaint);if (mState == STATE_DRAG && d < maxD - 48) {//画黏连小圆canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mBubblePaint);//计算二阶贝塞尔曲线做需要的起点、终点和控制点坐标calculateBezierCoordinate();//画二阶贝赛尔曲线mBezierPath.reset();mBezierPath.moveTo(mCircleStartX, mCircleStartY);mBezierPath.quadTo(mControlX, mControlY, mBubbleEndX, mBubbleEndY);mBezierPath.lineTo(mBubbleStartX, mBubbleStartY);mBezierPath.quadTo(mControlX, mControlY, mCircleEndX, mCircleEndY);mBezierPath.close();canvas.drawPath(mBezierPath, mBubblePaint);}//画消息个数的文本if (mState != STATE_DISMISS && !TextUtils.isEmpty(mText)) {mTextPaint.getTextBounds(mText, 0, mText.length(), mTextRect);canvas.drawText(mText, mBubbleCenterX - mTextRect.width() / 2, mBubbleCenterY + mTextRect.height() / 2, mTextPaint);}
}

其中计算二阶贝塞尔曲线做需要的起点、终点和控制点坐标，顺序是moveTo A, quadTo B, lineTo C, quadTo D, close
先来张示意图：

这里写图片描述

再上代码

/*** 计算二阶贝塞尔曲线做需要的起点、终点和控制点坐标*/
private void calculateBezierCoordinate(){//计算控制点坐标，为两圆圆心连线的中点mControlX = (mBubbleCenterX + mCircleCenterX) / 2;mControlY = (mBubbleCenterY + mCircleCenterY) / 2;//计算两条二阶贝塞尔曲线的起点和终点float sin = (mBubbleCenterY - mCircleCenterY) / d;float cos = (mBubbleCenterX - mCircleCenterX) / d;mCircleStartX = mCircleCenterX - mCircleRadius * sin;mCircleStartY = mCircleCenterY + mCircleRadius * cos;mBubbleEndX = mBubbleCenterX - mBubbleRadius * sin;mBubbleEndY = mBubbleCenterY + mBubbleRadius * cos;mBubbleStartX = mBubbleCenterX + mBubbleRadius * sin;mBubbleStartY = mBubbleCenterY - mBubbleRadius * cos;mCircleEndX = mCircleCenterX + mCircleRadius * sin;mCircleEndY = mCircleCenterY - mCircleRadius * cos;
}

6、气泡复原的动画，使用估值器计算坐标

/*** 设置气泡复原的动画*/
private void setBubbleRestoreAnim() {ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),new PointF(mBubbleCenterX, mBubbleCenterY),new PointF(mCircleCenterX, mCircleCenterY));anim.setDuration(200);//使用OvershootInterpolator差值器达到颤动效果anim.setInterpolator(new OvershootInterpolator(5));anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF curPoint = (PointF) animation.getAnimatedValue();mBubbleCenterX = curPoint.x;mBubbleCenterY = curPoint.y;invalidate();}});anim.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {//动画结束后状态改为默认mState = STATE_DEFAULT;if (mOnBubbleStateListener != null) {mOnBubbleStateListener.onRestore();}}});anim.start();
}
/*** PointF动画估值器*/
public class PointFEvaluator implements TypeEvaluator<PointF> {@Overridepublic PointF evaluate(float fraction, PointF startPointF, PointF endPointF) {float x = startPointF.x + fraction * (endPointF.x - startPointF.x);float y = startPointF.y + fraction * (endPointF.y - startPointF.y);return new PointF(x, y);}
}

7、顺便来个气泡状态的监听器，方便外部调用监听其状态：

/*** 气泡状态的监听器*/
public interface OnBubbleStateListener {/*** 拖拽气泡*/void onDrag();/*** 移动气泡*/void onMove();/*** 气泡恢复原来位置*/void onRestore();/*** 气泡消失*/void onDismiss();
}/*** 设置气泡状态的监听器*/
public void setOnBubbleStateListener(OnBubbleStateListener onBubbleStateListener) {mOnBubbleStateListener = onBubbleStateListener;
}

8、关于气泡爆炸的动画，思路就是放几张图片到drawable里，然后动态计数重绘，在onDraw中调用canvas.drawBitmap()方法，具体如下：

/* 气泡爆炸的图片id数组 */
private int[] mExplosionDrawables = {R.drawable.explosion_one, R.drawable.explosion_two, R.drawable.explosion_three, R.drawable.explosion_four, R.drawable.explosion_five};
/* 气泡爆炸的bitmap数组 */
private Bitmap[] mExplosionBitmaps;
/* 气泡爆炸当前进行到第几张 */
private int mCurExplosionIndex;
/* 气泡爆炸动画是否开始 */
private boolean mIsExplosionAnimStart = false;

在构造方法中：

mExplosionPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mExplosionPaint.setFilterBitmap(true);
mExplosionRect = new Rect();
mExplosionBitmaps = new Bitmap[mExplosionDrawables.length];
for (int i = 0; i < mExplosionDrawables.length; i++) {//将气泡爆炸的drawable转为bitmapBitmap bitmap = BitmapFactory.decodeResource(getResources(), mExplosionDrawables[i]);mExplosionBitmaps[i] = bitmap;
}

然后在手指抬起的时候使用如下动画：

/*** 设置气泡消失的动画*/
private void setBubbleDismissAnim() {mState = STATE_DISMISS;//气泡改为消失状态mIsExplosionAnimStart = true;if (mOnBubbleStateListener != null) {mOnBubbleStateListener.onDismiss();}//做一个int型属性动画，从0开始，到气泡爆炸图片数组个数结束ValueAnimator anim = ValueAnimator.ofInt(0, mExplosionDrawables.length);anim.setInterpolator(new LinearInterpolator());anim.setDuration(500);anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {//拿到当前的值并重绘mCurExplosionIndex = (int) animation.getAnimatedValue();invalidate();}});anim.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {//动画结束后改变状态mIsExplosionAnimStart = false;}});anim.start();
}

最后在onDraw中：

if (mIsExplosionAnimStart && mCurExplosionIndex < mExplosionDrawables.length) {//设置气泡爆炸图片的位置mExplosionRect.set((int) (mBubbleCenterX - mBubbleRadius), (int) (mBubbleCenterY - mBubbleRadius), (int) (mBubbleCenterX + mBubbleRadius), (int) (mBubbleCenterY + mBubbleRadius));//根据当前进行到爆炸气泡的位置index来绘制爆炸气泡bitmapcanvas.drawBitmap(mExplosionBitmaps[mCurExplosionIndex], null, mExplosionRect, mExplosionPaint);
}

9、在布局文件中使用该控件，并使用自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:monkey="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:clipChildren="false"tools:context=".MainActivity"><com.monkey.dragpopview.DragBubbleView
        android:id="@+id/dragBubbleView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"monkey:bubbleColor="#ff0000"monkey:bubbleRadius="12dp"monkey:text="99+"monkey:textColor="#ffffff"monkey:textSize="12sp" /></RelativeLayout>

其中 android:clipChildren=”false” 这个属性可以使根布局下的子控件超出本身控件范围的大小，加上这个属性就可以满屏幕随意拖拽而不必拘泥于它本身的大小了，炒鸡方便~

还有如果觉得在属性中设置消息个数不方便，需要在代码中动态获取数据并设置的话，只要在DragBubbleView中添加一个方法即可

public void setText(String text){mText = text;invalidate();
}

10、在MainActivity中：

    DragBubbleView dragBubbleView = (DragBubbleView) findViewById(R.id.dragBubbleView);dragBubbleView.setText("99+");dragBubbleView.setOnBubbleStateListener(new DragBubbleView.OnBubbleStateListener() {@Overridepublic void onDrag() {Log.e("---> ", "拖拽气泡");}@Overridepublic void onMove() {Log.e("---> ", "移动气泡");}@Overridepublic void onRestore() {Log.e("---> ", "气泡恢复原来位置");}@Overridepublic void onDismiss() {Log.e("---> ", "气泡消失");}});

总结
这次既练习了自定义View，还囊括了贝赛尔曲线，坐标的计算一定要画图，简单直观。

这篇关于57.贝赛尔曲线初步（二） - 高仿QQ未读消息气泡拖拽黏连效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/177977。

相关文章

基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》：本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt
阅读更多...
SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
使用Python实现生命之轮Wheel of life效果

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频，让我们珍惜时间，因为一生是有限的。使用python创建生命倒计时图表，珍惜时间
阅读更多...
防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

在家里，灯具是属于离不开的家具，每个大大小小的地方都需要的照亮，所以一盏好灯是必不可少的，每个发挥着作用。而护眼台灯就起了一个保护眼睛，预防近视的作用。可以保护我们在学习，阅读的时候提供一个合适的光线环境，保护我们的眼睛。防近视护眼台灯什么牌子好？那我们怎么选择一个优秀的护眼台灯也是很重要，才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐： 一：六个推荐防近视效果好的护眼台灯的
阅读更多...
ActiveMQ—消息特性（延迟和定时消息投递）

ActiveMQ—消息特性（延迟和定时消息投递）

ActiveMQ消息特性：延迟和定时消息投递（Delay and Schedule Message Delivery） 转自：http://blog.csdn.net/kimmking/article/details/8443872 有时候我们不希望消息马上被broker投递出去，而是想要消息60秒以后发给消费者，或者我们想让消息没隔一定时间投递一次，一共投递指定的次数。。。 类似
阅读更多...
PR曲线——一个更敏感的性能评估工具

PR曲线——一个更敏感的性能评估工具

在不均衡数据集的情况下，精确率-召回率（Precision-Recall, PR）曲线是一种非常有用的工具，因为它提供了比传统的ROC曲线更准确的性能评估。以下是PR曲线在不均衡数据情况下的一些作用： 关注少数类：在不均衡数据集中，少数类的样本数量远少于多数类。PR曲线通过关注少数类（通常是正类）的性能来弥补这一点，因为它直接评估模型在识别正类方面的能力。 精确率与召回率的平衡：精确率（Pr
阅读更多...
初步学习Android的感想

初步学习Android的感想

之前在学习java语言的时候就经常听说过Android这门语言，那时候感觉Android有些神秘感，再加上Android是用来开发移动设备的一门语言，所以一直对Android抱有一种兴奋的心情。 在我开始接触 Android之后，感觉超好玩，因为可以在自己的手机设备上开发一些我喜欢的小应用，再想想之前说学习Android应该会很难，但是如果你真的接触了，而且有JAVA的功底，我想学习Androi
阅读更多...
Java消息队列：RabbitMQ与Kafka的集成与应用

Java消息队列：RabbitMQ与Kafka的集成与应用

Java消息队列：RabbitMQ与Kafka的集成与应用 大家好，我是微赚淘客返利系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！ 在现代的分布式系统中，消息队列是实现系统间通信、解耦和提高可扩展性的重要组件。RabbitMQ和Kafka是两个广泛使用的消息队列系统，它们各有特点和优势。本文将介绍如何在Java应用中集成RabbitMQ和Kafka，并展示它们的应用场景。 消息队
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2