仿QQ未读消息气泡拖拽黏连效果

2023-10-10 04:30
文章标签 效果 拖拽 消息 qq 气泡 未读 黏连

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

一、先看效果

qq-bezier.gif

二、分析

昨天写了贝塞尔的动画效果，非常好玩。今天突然想到qq的消息气泡，点击拖拽有粘性，也能用贝塞尔曲线实现。知道思路，但是不知道从哪下手，百度了一篇博客，大致了解了整个过程。
感谢 猴菇同学的博客的分享，借鉴了他的思路，代码就自己敲了一遍，计算方法有点不一样，他是利用角度计算，我利用相似三角形计算，路子不同但最终目的都是一样的，看代码。

三、代码分析

结合猴菇同学的博客的思路，我发现就是计算所有的点，然后绘制这些点，那么我们可以建立一个类来记录这些点的坐标，首先是 ControllerView 类：

    /*** 控制器类*/public class ControllerView {private int x;private int y;private int radius;private int saX;private int saY;private int eaX;private int eaY;private int sbX;private int sbY;private int ebX;private int ebY;private int px;private int py;}

接下来自定义view：

    /*** qq 气泡view*/public class QQNumberView extends View {private Context mContext;private int number;private int radius = 40; // 红点的半径private int minWidth = 10; // 红点最小半径private int maxDistance = 200; // 最长能扯多远private Paint controlPaint;private Paint numberPaint;private float flexRatio = 0.6f; // 弹性系数private ControllerView controllerView;private Path bezierPath;private boolean mIsDrag = false; // 是否正在拖拽private boolean mIsMoreDrag = false; // 是否过度拖拽public QQNumberView(Context context) {this(context, null);}public QQNumberView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init(context, attrs);}private void init(Context context, AttributeSet attrs) {mContext = context;controlPaint = new Paint();controlPaint.setAntiAlias(true);controlPaint.setColor(Color.parseColor("#eb1c42"));numberPaint = new Paint();numberPaint.setAntiAlias(true);numberPaint.setColor(Color.WHITE);numberPaint.setTextSize(32);controllerView = new ControllerView();}}

定义一些必要的属性和初始化工作。然后我们需要修改 onTouchEvent() 方法：

    @Overridepublic boolean onTouchEvent(MotionEvent event) {int action = event.getAction();switch (action) {case MotionEvent.ACTION_DOWN:if(!mIsMoreDrag) {getParent().requestDisallowInterceptTouchEvent(true);mIsDrag = true;}else{return super.onTouchEvent(event);}break;case MotionEvent.ACTION_MOVE:compute(event.getX() * flexRatio, event.getY() * flexRatio);break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:getParent().requestDisallowInterceptTouchEvent(false);mIsDrag = false;resetView(event.getX() * flexRatio, event.getY() * flexRatio);break;}return true;}

ACTION_DOWN 的时候，如果已经拖拽过了（用 mIsMoreDrag 标记），直接

return super.onTouchEvent(event);

表示不再处理 touch 事件，否则首次 touch 的时候，我们需要禁止父类拦截并且将拖拽标记 mIsDrag 置为 true ：

getParent().requestDisallowInterceptTouchEvent(true);
mIsDrag = true;

这样我们在 ACTION_MOVE 里面可以直接处理手指的移动事件，而外面包裹的 listview 拿不到滑动事件。我们再看看 compute() 方法怎么处理的：

    /*** 计算所有需要的位置坐标* @param x* @param y*/private void compute(float x, float y) {// 记录控制点圆心坐标controllerView.setX((int) x);controllerView.setY((int) y);float d = (float) Math.sqrt((x - radius) * (x - radius) + (y - radius) * (y - radius));if (!mIsMoreDrag && d >= maxDistance) {controllerView.reset();mIsMoreDrag = true;invalidate();return;}// 锚点的半径 线性变化int anchorRadius = (int) (radius - d / radius);if (anchorRadius <= minWidth) {anchorRadius = minWidth;}// 记录锚点的半径controllerView.setRadius(anchorRadius);// 计算a线起点终点float saX = x - (y - radius) * radius / d;float saY = y - (radius - x) * radius / d;float eaX = radius - (y - radius) * anchorRadius / d;float eaY = radius - (radius - x) * anchorRadius / d;// 计算b线起点终点float sbX = x + (y - radius) * radius / d;float sbY = y + (radius - x) * radius / d;float ebX = radius + (y - radius) * anchorRadius / d;float ebY = radius + (radius - x) * anchorRadius / d;// 记录a线起点终点坐标controllerView.setSaX((int) saX);controllerView.setSaY((int) saY);controllerView.setEaX((int) eaX);controllerView.setEaY((int) eaY);// 记录b线起点终点坐标controllerView.setSbX((int) sbX);controllerView.setSbY((int) sbY);controllerView.setEbX((int) ebX);controllerView.setEbY((int) ebY);// 计算控制点的半径float pX = (x + radius) / 2;float pY = (y + radius) / 2;// 记录控制点的坐标controllerView.setPx((int) pX);controllerView.setPy((int) pY);// 刷新invalidate();}

注释已经写的很清楚了，但是需要注意里面的一段代码：

        if (!mIsMoreDrag && d >= maxDistance) {controllerView.reset();mIsMoreDrag = true;invalidate();return;}

这个表示如果之前没有拖拽过并且拖拽距离超过了设定的值，我们需要将记录的数据清掉，mIsMoreDrag 置为 true，然后刷新。reset() 的方法写在了控制器类里面：

    public void reset() {radius = 0;saX = 0;saY = 0;eaX = 0;eaY = 0;sbX = 0;sbY = 0;ebX = 0;ebY = 0;px = 0;py = 0;}

回到 onTouchEvent() 方法中，我们在 ACTION_UP 的时候需要允许父类拦截事件，外面的 listview 可以继续滑动：

    getParent().requestDisallowInterceptTouchEvent(false);mIsDrag = false;resetView(event.getX() * flexRatio, event.getY() * flexRatio);

同时重置页面的状态，比如拉到一半我们抬起手指，可以让球回到原始位置，或者拉到最远位置，这个时候我们认为用户想清掉球，那么就让他消失。消失我们可以不让 canvas 继续绘制，但是拉到一半怎么让它平滑的滚回起始位置呢？看 reset() 方法：

    /*** 手指抬起，view恢复 */private void resetView(float x, float y) {Point startPoint = new Point((int) x, (int) y);Point endPoint = new Point(radius, radius);ValueAnimator numberAnim = ValueAnimator.ofObject(new NumberEvaluator(), startPoint, endPoint);numberAnim.setDuration(3000);numberAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {Point p = (Point) animation.getAnimatedValue();compute(p.x, p.y);}});}

对，就是使用的估值器，因为你手指抬起的时候，已经不能产生连续的点坐标去给 canvas 绘制了，这个时候怎么办呢？估值器去帮我们做这件事，告诉估值器起点和终点，它就会一直返回我们中间值。

所有的事情都准备的差不多了，来看看重点 onDraw() 是怎么绘制的吧：

    @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (mIsMoreDrag) {if (mIsDrag) {canvas.drawCircle(controllerView.getX(), controllerView.getY(), radius, controlPaint);canvas.drawText(String.valueOf(number), controllerView.getX(), controllerView.getY(), numberPaint);}} else {if (mIsDrag) {bezierPath = new Path();bezierPath.moveTo(controllerView.getSaX(), controllerView.getSaY());bezierPath.quadTo(controllerView.getPx(), controllerView.getPy(), controllerView.getEaX(), controllerView.getEaY());bezierPath.lineTo(controllerView.getEbX(), controllerView.getEbY());bezierPath.quadTo(controllerView.getPx(), controllerView.getPy(), controllerView.getSbX(), controllerView.getSbY());bezierPath.lineTo(controllerView.getSaX(), controllerView.getSaY());canvas.drawPath(bezierPath, controlPaint);canvas.drawCircle(radius, radius, controllerView.getRadius(), controlPaint);canvas.drawCircle(controllerView.getX(), controllerView.getY(), radius, controlPaint);canvas.drawText(String.valueOf(number), controllerView.getX(), controllerView.getY(), numberPaint);} else {canvas.drawCircle(radius, radius, radius, controlPaint);canvas.drawText(String.valueOf(number), radius, radius, numberPaint);}}}

这里我们需要分开考虑，在没有过度拖拽的情况下，我们走的是外层的 else 下面的代码，如果没有拖拽就是

canvas.drawCircle(radius, radius, radius, controlPaint);
canvas.drawText(String.valueOf(number), radius, radius, numberPaint);

想当于初始化小球。然后拖拽的过程中我们需要绘制贝塞尔曲线、拖拽的球、锚点的球和文字：

canvas.drawPath(bezierPath, controlPaint);
canvas.drawCircle(radius, radius, controllerView.getRadius(), controlPaint);
canvas.drawCircle(controllerView.getX(), controllerView.getY(), radius, controlPaint);
canvas.drawText(String.valueOf(number), controllerView.getX(), controllerView.getY(), numberPaint);

如果是过度拖拽，也有两种情况，一种是手指松开了，一种是手指还在屏幕移动。手指还没松开的时候我们还要去绘制拖拽的球，但是松开的话，else 里面什么都不需要干了。

到这就全部结束了。

附上 github地址

这篇关于仿QQ未读消息气泡拖拽黏连效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

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

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

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

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

ActiveMQ消息特性：延迟和定时消息投递（Delay and Schedule Message Delivery） 转自：http://blog.csdn.net/kimmking/article/details/8443872 有时候我们不希望消息马上被broker投递出去，而是想要消息60秒以后发给消费者，或者我们想让消息没隔一定时间投递一次，一共投递指定的次数。。。 类似
阅读更多...
Java消息队列：RabbitMQ与Kafka的集成与应用

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

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

Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统 一、Kafka 概述1.1 Kafka 定义1.2 Kafka 设计目标1.3 Kafka 特点 二、Kafka 架构设计2.1 基本架构2.2 Topic 和 Partition2.3 消费者和消费者组2.4 Replica 副本 三、Kafka 分布式集群搭建3.1 下载解压3.1.1 上传解压 3.2 修改 Kafka 配置文件3.2.1 修改zookeep
阅读更多...
在网页上制作仿电视演职员表效果

在网页上制作仿电视演职员表效果

阅读更多...
Android 友盟消息推送集成遇到的问题

Android 友盟消息推送集成遇到的问题

友盟消息推送遇到的问题 集成友盟消息推送，步骤根据提供的技术文档接入便可。可是当你集成到项目中去的时候，可能并不是一帆风顺就搞定，因为你项目里面是可能集成了其他的sdk（比如支付宝，微信，七鱼等等三方的sdk）。那么这个时候，再加上友盟的消息推送sdk集成可能就会出现问题。 问题清单 友盟消息推送sdk和支付宝sdk冲突问题 后台配置了消息推送，也显示发送成功，但是手机没有收到消息通知
阅读更多...
【Godot4.3】多边形的斜线填充效果基础实现

【Godot4.3】多边形的斜线填充效果基础实现

概述 图案（Pattern）填充是一个非常常见的效果。其中又以斜线填充最为简单。本篇就探讨在Godot4.3中如何使用Geometry2D和CanvasItem的绘图函数实现斜线填充效果。 基础思路 Geometry2D类提供了多边形和多边形以及多边形与折线的布尔运算。按照自然的思路，多边形的斜线填充应该属于“多边形与折线的布尔运算”范畴。 第一个问题是如何获得斜线，这条斜线应该满足什么样
阅读更多...
UniApp实现漂亮的音乐歌词滚动播放效果

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中，歌词的展示和滚动播放已经成为了一个非常常见的功能。今天，我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分，我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co
阅读更多...
Nuxt3入门：过渡效果（第5节）

Nuxt3入门：过渡效果（第5节）

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。 Nuxt 利用 Vue 的 <Transition> 组件在页面和布局之间应用过渡效果。 一、页面过渡效果 你可以启用页面过渡效果，以便对所有页面应用自动过渡效果。 nuxt.config.js export default defineNuxtConfig({app: {pageTransition: {name: 'fade',mode
阅读更多...
类codepen的实现可拖拽窗口demo

类codepen的实现可拖拽窗口demo

首先说下思想 flex或者其他布局方式，实现左右分割布局，主盒子宽度100%，左右布局中包含一个分割条（可在布局容器中，也可以单独定义）为分隔条绑定鼠标点击事件，为document绑定鼠标移动事件和鼠标放开事件，通过监听鼠标移动事件和上一个状态保存下来的鼠标位置作对比，判断当前鼠标移动方向（往左还是往右）然后计算当前鼠标位置和鼠标点击位置的距离，来计算左右容器的变化，然后通过dom的方式设置宽度
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2