QQ 未读消息的拖拽动态效果是如何实现的_-祥子在路上

鉴于2017年的答案突然又在2022年有这么多人关注，出了复刻的视频版，当初的知乎啊…

【三分钟了解编程原理，QQ 未读消息的拖拽效果是如何实现的？-哔哩哔哩】

不知道题主问的是不是这个东西？？

如果是的话，我可以解释一下，这个效果就是贝塞尔曲线 的一种应用，这里我就用安卓代码实现一下。

我们把这个东西的效果拆解一下

A,B是两个圆形，AB之间是一个由abcd四条path围成的动态的C区域，其中bd两条贝塞尔曲线有公有控制点e，e是ac圆心之差/2；

核心逻辑：一开始的时候，A,B的圆心是重合的，随着A,B距离增加，A的直径变小，带来C区域视觉上的拉长，到达一定距离后，B随着一段帧动画消失，A的直径变为0消失；

首先，自定义一个View后，建立核心参数：

第一步:计算获得两个圆心之间的动态距离distance,并通过距离来控制A圆的大小；

第二步：求取贝塞尔曲线控制点e的动态坐标与1，2，3，4四点动态坐标：

1、获得A,B圆之间的偏移量

2、有了偏移量就可以求出圆心两点斜率了

有了斜率，圆心坐标和直径，就可以通过计算获得1，2，3，4 四个点的动态实时坐标；

第三步：现在核心参数都已经计算获得，就可以用画笔画出中间C图形的path了，path由3→4→2→1顺序画出；

第四步：所有部件都准备好，现在只要写出onTouchEvent中的逻辑；

1、ACTION_DOWN按下时

2，ACTION_MOVE手指移动时

3，ACTION_CANCEL抬起手指时

OK。完成，运行一下看看效果

完成

源码我放在百度云盘了,

说实话,像这种漂亮的小控件,做出来不是很难,难的是创意,想出这个idea的设计师才是宝贝

-- 1月10日更

第一次回答破千赞，谢谢大家(,•́ . •̀,)

评论区

没带饭卡: 夸人的时候就叫人家设计师，改需求的时候就叫人家死产品经理😒 👍🏽381 💭N/A IP 🕐2017-01-07 11:01:55

│ └── Martin: 兄弟你想多了，人家说的是交互设计师，那还是死产品经理😆 👍🏽109 💭N/A IP 🕐2017-01-27 14:12:18
│ └── Vincent: 这东西估计还真是设计师想的，不是产品 👍🏽17 💭N/A IP 🕐2017-01-27 17:25:22
│ └── Fihr’Helbringer: UX、UI设计师：你礼貌吗？ 👍🏽28 💭N/A IP 🕐2022-03-26 14:56:38
│ │ └── 一杯原谅绿茶: 球球大作战[滑稽] 👍🏽0 💭N/A IP 🕐2022-03-31 04:46:28
│ └── 诺余: 这说的根本就是两个人😒 👍🏽1 💭N/A IP 🕐2022-03-31 12:41:06

SSKSSKSSK: 我曹没想到这个不起眼的一个东西需要这么多代码！！！ 👍🏽331 💭N/A IP 🕐2017-01-06 22:05:49

│ └── 如来: 我也曹了 👍🏽8 💭N/A IP 🕐2017-01-06 23:48:08
│ └── 黑猫先森: 很正常啊。你所看到的每一个那种类似的源代码都是很多的。我做了个企业级应用。稍微复杂了点。上千行代码。 👍🏽56 💭N/A IP 🕐2017-01-09 18:34:35
│ └── 守拙的瘦子: 我也曹 👍🏽1 💭N/A IP 🕐2017-01-12 21:18:51

随月: 666 👍🏽55 💭N/A IP 🕐2017-01-06 17:25:08

小繁: 就喜欢授人以渔还授人以鱼的人 👍🏽54 💭N/A IP 🕐2017-01-07 08:52:45

可离: 终于知道qq占内存为什么那么大了 👍🏽17 💭N/A IP 🕐2017-01-07 12:52:46

│ └── 温柔养猫人: 运行到后面,一大部分是数据的缓存. 👍🏽8 💭N/A IP 🕐2022-03-28 14:26:45
│ └── 黑笋纹奎: qq本身代码写的再像座屎山，他本身也就那么大。内存全是数据 👍🏽32 💭N/A IP 🕐2022-03-28 15:00:29
│ │ └── 小钰: 安装都800m了，安装完后还要加载，加载还会下东西，最少一个g空间 👍🏽1 💭N/A IP 🕐2022-03-30 19:17:36
│ │ └── 黑笋纹奎: 源代码本身，没多少空间。10m的文本，可以装完太多太多的代码了。那800mb，一大部分是预下载的动画和图形界面，这些东西在狭义上是不能算在代码里的。你用unity，资源，纹理，材质，和脚本就是分离的。就算你用qt，图形库和代码也是分离的。你用windows，你也不能把那一堆图标算作代码。讨论的是代码本身是不是屎，其他的，动态库，编译器，图形资源，声音资源，和代码是屎与否，无关。 👍🏽0 💭N/A IP 🕐2022-03-31 11:33:17
│ │ └── 黑笋纹奎: 对不起，说法有误。太久了，忘记原问题是什么了。此处我说代码是否是屎山，这不合适。我应该表述为：安装包是否庞大，绝大多数时候，与其他资源有关，与源代码没什么关系。更正如上。 👍🏽0 💭N/A IP 🕐2022-03-31 11:36:11
│ └── 编辑小助手三号: 现在QQ安装包都半个G大了 👍🏽0 💭N/A IP 🕐2022-03-28 18:20:18
│ │ └── 黑笋纹奎: 现在qq内置一个ue4引擎。只加了引擎，却不加图像，不加动画，不加音效，这不可能。ue4引擎也就那么大，大头全是数据，图像，音效。代码真没多大，1mb的代码已经有百万往上的字符。 👍🏽0 💭N/A IP 🕐2022-03-30 08:24:31
│ └── 请针对我: 这个东西并不大，编译出来也就几kb 👍🏽0 💭N/A IP 🕐2022-09-15 10:04:04

青未了: 想知道第一张图怎么截的屏? 👍🏽17 💭N/A IP 🕐2017-01-07 01:11:40

│ └── 原子君: 我告诉你吧，有些手机可以设置硬件按键截图，比如音量键，华为的智灵键这种，所以屏幕上手势还在操作就能截下来。 👍🏽28 💭N/A IP 🕐2017-01-07 01:31:48
│ │ └── 青未了: 明白了，谢谢你！ 👍🏽3 💭N/A IP 🕐2017-01-07 01:34:19
│ │ │ └── 原子君: (^_) 👍🏽0 💭N/A IP 🕐2017-01-07 08:07:48
│ │ └── 知乎用户7v7wJ4: AVD直接截 👍🏽0 💭N/A IP 🕐2017-01-07 15:56:19
│ │ └── twtian: 这个是不是要手机比较卡才行，或者是单身二十年的手速也可以啊？ 👍🏽1 💭N/A IP 🕐2017-01-08 07:48:22
│ │ └── 原子君: 不用，这个小红点特效本身就不是暂态的，你稍微拉一点可以一直保持不动，不需要捕捉瞬间状态，和橡皮筋一样。 👍🏽8 💭N/A IP 🕐2017-01-10 02:34:13
│ └── 刘星宇: 可以尝试录屏，然后截取视频画面。 👍🏽2 💭N/A IP 🕐2017-01-07 19:34:36
│ └── 自定义丶微笑: 大部分手机同时按电源键+音量减键是截屏功能 👍🏽1 💭N/A IP 🕐2017-01-22 01:26:02

知乎用户5mEEn8: 我记得在qq空间里有个开发者日志，作为开发者讲了这个的实现 👍🏽10 💭N/A IP 🕐2017-01-07 04:06:53

│ └── 祥子在路上: 我刚刚也看到了，另一个回复下有链接，讲了设计师定稿的过程，想到这种交互真的很厉害 👍🏽2 💭N/A IP 🕐2017-01-07 07:11:33
│ └── 四蓉: 哪个链接啊？我没找到啊 👍🏽1 💭N/A IP 🕐2017-09-26 16:39:59

刘副师长: talk is easy, show me the code.完美 👍🏽7 💭N/A IP 🕐2017-01-07 10:19:06

骑牧术: 你也是个宝贝。 👍🏽7 💭N/A IP 🕐2017-01-07 03:19:17

万宵: 我觉得设计师是个宝贝，敢想敢提，遇到知道怎样实现这个效果的程序员也很幸运 👍🏽4 💭N/A IP 🕐2017-01-09 11:19:33

帅华君: 所以不要为写代码而写代码，没创意迟早被机器取代 👍🏽2 💭N/A IP 🕐2017-01-22 18:53:50

墨子 2200MHz: 我记得腾讯官方团队在2年前发布过这个技术的大致实现诶… 👍🏽2 💭N/A IP 🕐2017-01-07 16:44:57

0.0: 碉堡了 👍🏽8 💭N/A IP 🕐2017-01-06 22:59:48

Only: 完美！ 👍🏽8 💭N/A IP 🕐2017-01-06 20:26:20

范小猫: 厉害厉害 👍🏽6 💭N/A IP 🕐2017-01-06 23:32:16

姬达鑫: 知乎的一股清流 👍🏽5 💭N/A IP 🕐2017-01-07 02:17:57

闹闹: 喜欢这个设计 👍🏽3 💭N/A IP 🕐2017-01-06 23:49:09

龍亞山: 这是什么语言呢？发自知乎UWP For 小米… 👍🏽2 💭N/A IP 🕐2017-01-07 06:51:48

神秘D字: 果真是天天不干正事的程序员哈哈哈哈 👍🏽1 💭N/A IP 🕐2017-01-07 13:33:28

Mr.Future: 腾讯产品部向你招手 👍🏽1 💭N/A IP 🕐2017-01-07 12:53:33

九千七: 牛人大多了??? 👍🏽1 💭N/A IP 🕐2017-01-07 10:57:36

付川: 编程乎 👍🏽1 💭N/A IP 🕐2017-01-07 10:38:46

孙啥: 第一次发现这个黏球效果，玩了一上午 👍🏽1 💭N/A IP 🕐2017-01-07 10:17:42

喵呜汪: 手动点赞，啦啦啦 👍🏽1 💭N/A IP 🕐2017-01-07 07:06:33

呵呵: 厉害 👍🏽1 💭N/A IP 🕐2017-01-07 01:34:19

原子君: 太牛逼了。 👍🏽1 💭N/A IP 🕐2017-01-07 01:29:47

sapphire: 好酷啊 👍🏽1 💭N/A IP 🕐2017-01-07 00:23:06

Makoto Kumano: 厉害了 👍🏽1 💭N/A IP 🕐2017-01-06 23:49:16

ChenXiii: tql！ 👍🏽0 💭N/A IP 🕐2018-10-28 02:22:40

吃菠萝冰的命: 缺女朋友吗 👍🏽0 💭N/A IP 🕐2018-07-15 01:53:48

不重要先生: 你他娘的真是个人才！ 👍🏽0 💭N/A IP 🕐2017-10-23 20:43:32

斗机灵: 牛逼，像这之类的算法还有哪些 👍🏽0 💭N/A IP 🕐2017-05-01 10:28:02

DAY6: 真厉害，随随便便就写出来。还没找到工作的安卓程序员膜拜一下 👍🏽0 💭N/A IP 🕐2017-04-06 13:44:29

喵不可言: 不得了… 👍🏽0 💭N/A IP 🕐2017-03-22 19:10:36

设使天下无有孤: 为啥不放在github呢。。 👍🏽0 💭N/A IP 🕐2017-03-07 16:59:57

就叫taki君吧: 求github上的源码 👍🏽0 💭N/A IP 🕐2017-02-10 15:59:28

Ken 大神: 牛逼，佩服 👍🏽0 💭N/A IP 🕐2017-02-08 18:02:56

川川川台: 这么小的一个动作，就这么多代码。那做一个完整的软件岂不是超级复杂。 👍🏽0 💭N/A IP 🕐2017-02-02 13:54:41

和同尘: csdn一大堆 👍🏽0 💭N/A IP 🕐2017-01-28 22:52:41

哦哦啊: 牛批 👍🏽0 💭N/A IP 🕐2017-01-28 17:34:53

KamZhi: 为什么有锯齿呢 👍🏽0 💭N/A IP 🕐2017-01-27 22:11:58

想啖蔗在食蓼: 好希望微信也有 👍🏽0 💭N/A IP 🕐2017-01-24 17:40:44

Lira: 一直想知道为什么，今天撞到答案了 👍🏽0 💭N/A IP 🕐2017-01-24 15:19:41

快到碗里来: 大神。你用的啥软件编写的。我想学学 👍🏽0 💭N/A IP 🕐2017-01-23 18:12:48

帅华君: 狠狠认同你最后说的实话 👍🏽0 💭N/A IP 🕐2017-01-22 18:53:01

SIN不是吗: 虽然我什么都看不懂但还是感觉好厉害的样子 👍🏽0 💭N/A IP 🕐2017-01-22 01:11:25

夕阳: 一脸懵逼的进来说了句卧槽，然后一脸懵逼的出去Ծ‸Ծ 👍🏽0 💭N/A IP 🕐2017-01-21 17:31:21

李士炎: 第一步onDraw方法中，A圆的大小计算为什么要那样写啊？ 👍🏽0 💭N/A IP 🕐2017-01-21 11:35:24

谢耳朵: 啊哈…这个自定义控件我也写过 👍🏽0 💭N/A IP 🕐2017-01-18 14:11:44

Tqsh: 贝塞尔曲线。。。 👍🏽0 💭N/A IP 🕐2017-01-18 12:19:38

杨弘宇: 让我想到一个手机游戏《粘粘世界》，就是用粘球来搭桥的那个，设计师是玩了这个游戏才有的这个创意吧。 👍🏽0 💭N/A IP 🕐2017-01-14 08:25:10

大萝北: 66666 👍🏽0 💭N/A IP 🕐2017-01-13 16:57:21

没事儿就发疯: 认真答题的人，给赞 👍🏽0 💭N/A IP 🕐2017-01-13 13:51:31

RR阿奇啊: 牛 👍🏽0 💭N/A IP 🕐2017-01-13 12:53:46

这么多桉: 厉害了！ 👍🏽0 💭N/A IP 🕐2017-01-12 01:07:52

陶斩仙: 你也是个宝贝😂 👍🏽0 💭N/A IP 🕐2017-01-10 00:28:40

Dee Dee: 太厉害了 👍🏽0 💭N/A IP 🕐2017-01-09 23:17:17

tee: 锯齿比较明显是不是跟分辨率有关？ 👍🏽0 💭N/A IP 🕐2017-01-09 17:22:20

你也曾遗憾吗: 膜拜前辈 👍🏽0 💭N/A IP 🕐2017-01-09 17:06:48

鬼晓晓: 这个好像网上还有更加具体的解释 👍🏽0 💭N/A IP 🕐2017-01-09 16:34:33

Momo: 点赞点赞！！！ 👍🏽0 💭N/A IP 🕐2017-01-09 16:17:18

城市病人: 6了 👍🏽0 💭N/A IP 🕐2017-01-09 09:55:23

竹语竹心: 刚开始学自定义控件的时候一脸懵逼，最近好像有点明白了。。。 👍🏽0 💭N/A IP 🕐2017-01-09 02:26:04

逍遥中不自在: 厉害厉害(ง •̀_•́)ง 👍🏽0 💭N/A IP 🕐2017-01-08 21:30:26

宋胖胖: 第一次见到类似的东西是很多年前的twitter客户端…当时就觉得,好生动形象啊 👍🏽0 💭N/A IP 🕐2017-01-08 20:45:50

少不入川: 666 👍🏽0 💭N/A IP 🕐2017-01-08 19:47:23

中国大赢: 没想到一个小小的特效，这么多代码 👍🏽0 💭N/A IP 🕐2017-01-08 13:23:34

诀谙: 现在看到啥都在想如何用代码实现 👍🏽0 💭N/A IP 🕐2017-01-08 11:23:27

知乎用户87pxmz: 虽然看不懂，但是很6的样子。。。 👍🏽0 💭N/A IP 🕐2017-01-08 10:35:45

谢志坤: 我记得好像这个效果的设计人好像知乎上答过这个问题 👍🏽0 💭N/A IP 🕐2017-01-08 10:01:22

三千: 哇兄弟，贼厉害！！！ 👍🏽0 💭N/A IP 🕐2017-01-08 09:54:11

知后觉: 同意作者的观点。创意比代码实现更加难得——但是话说回来，创意要建立在技术的基础上，不然就大力出悲剧了（如 win vista曲折的开发过程）。 👍🏽0 💭N/A IP 🕐2017-01-08 08:42:44

twtian: 大神，膜拜，讲解的这么通俗易懂 👍🏽0 💭N/A IP 🕐2017-01-08 07:47:12

张小亮: 解释的清楚明白，文科生看懂了前半部分…… 👍🏽0 💭N/A IP 🕐2017-01-08 03:28:39

严禁恶意讨新: 谢大神！ 👍🏽0 💭N/A IP 🕐2017-01-08 03:05:37

苏普: 讲道理感觉那个小球很难点到 👍🏽0 💭N/A IP 🕐2017-01-08 01:39:20

momo: 不是很懂为什么不都用public呢？ 👍🏽0 💭N/A IP 🕐2017-01-08 01:19:49

Lsi77: 厉害了 👍🏽0 💭N/A IP 🕐2017-01-08 01:07:56

卡卡: 厉害了我的哥 👍🏽0 💭N/A IP 🕐2017-01-08 00:34:01

陈凌宇: 字基本我都认识，就是。。。 👍🏽0 💭N/A IP 🕐2017-01-07 20:58:23

豪傑: 第666个赞 👍🏽0 💭N/A IP 🕐2017-01-07 20:55:27

粉红的AMD: 厉害了！ 👍🏽0 💭N/A IP 🕐2017-01-07 19:33:02

持易: 说好的idea is cheap呢 👍🏽0 💭N/A IP 🕐2017-01-07 17:31:40

mwmwmwmwmwmwm: 关注了 👍🏽0 💭N/A IP 🕐2017-01-07 17:26:58

Petal Prince: 这个回答这个态度，给个赞不过分 👍🏽0 💭N/A IP 🕐2017-01-07 16:49:56

七色逆光: 666 👍🏽0 💭N/A IP 🕐2017-01-07 16:36:18

苏梦梦: mark 👍🏽0 💭N/A IP 🕐2017-01-07 16:10:13

知乎用户juRU2j: 最后一句话才是重点啊！ 👍🏽0 💭N/A IP 🕐2017-01-07 15:14:44

裂空龙: 为最后一句话点个赞…… 👍🏽0 💭N/A IP 🕐2017-01-07 14:40:09

郑周: 科学的最高度是艺术和哲学啊 👍🏽0 💭N/A IP 🕐2017-01-07 14:12:28

梦梦的幻想乡: 厉害啦点个赞 👍🏽0 💭N/A IP 🕐2017-01-07 13:50:49

和你: 666 👍🏽0 💭N/A IP 🕐2017-01-07 13:14:48

可离: 大神 👍🏽0 💭N/A IP 🕐2017-01-07 12:51:23

Nathan: 真厉害 👍🏽0 💭N/A IP 🕐2017-01-07 12:49:10

飞檐雀: 白学了CADCAM… 👍🏽0 💭N/A IP 🕐2017-01-07 12:06:05

好好: 厉害 👍🏽0 💭N/A IP 🕐2017-01-07 11:10:41

碧蓝: 厉害了 👍🏽0 💭N/A IP 🕐2017-01-07 11:02:19

Dr.Rainbow: 想出来才是最难得 👍🏽0 💭N/A IP 🕐2017-01-07 10:37:26

老爷车: 历害 👍🏽0 💭N/A IP 🕐2017-01-07 10:06:56

在别处: 最后一句没错 👍🏽0 💭N/A IP 🕐2017-01-07 09:40:38

不似少年游: 这才是干货 👍🏽0 💭N/A IP 🕐2017-01-07 09:30:24

一个好人: 厉害了，word哥。 👍🏽0 💭N/A IP 🕐2017-01-07 08:38:50

Denry Ko: 牛逼 👍🏽0 💭N/A IP 🕐2017-01-07 08:27:12

负雪: 大神… 👍🏽0 💭N/A IP 🕐2017-01-07 07:59:13

Ymir: 专业人士 👍🏽0 💭N/A IP 🕐2017-01-07 07:49:46

半杯红酒半杯可乐: 额……请问这个是用哪个语言写的？谢谢 👍🏽0 💭N/A IP 🕐2017-01-07 06:26:57

│ └── 祥子在路上: java 👍🏽0 💭N/A IP 🕐2017-01-07 07:09:46

安思: 无论是从理论，还是实现上，都很认真详细，向这样的学术与实践结合的态度学习！ 👍🏽0 💭N/A IP 🕐2017-01-07 05:37:58

秀川: 认真答题，手动点赞 👍🏽0 💭N/A IP 🕐2017-01-07 05:24:31

Xie-yuxuan: 好佩服 👍🏽0 💭N/A IP 🕐2017-01-07 01:42:36

无重力: 厉害 👍🏽0 💭N/A IP 🕐2017-01-07 01:26:48

二狗子: 贝赛尔曲线 👍🏽0 💭N/A IP 🕐2017-01-07 00:19:17

炭烧YO鱼肠: 这个厉害了 👍🏽0 💭N/A IP 🕐2017-01-07 00:00:38

古乐兽: 想知道怎么系统的学习贝塞尔曲线，怎么确定锚点 👍🏽0 💭N/A IP 🕐2022-04-21 18:49:34

少年的雨: 啊，这，万万没想一个动效竟然需要数学，崩溃了… 👍🏽0 💭N/A IP 🕐2022-03-31 15:07:53

平井一夫: 牛啊 👍🏽0 💭N/A IP 🕐2022-03-30 14:23:07

这里是Rea: 感谢！ 👍🏽0 💭N/A IP 🕐2022-03-31 11:55:24

Logic: 我有个问题，ios这个功能有时候会遇到某一个气泡卡住，只有我这样吗，好像是拖走不松手，再放回原位就会这样 👍🏽0 💭N/A IP 🕐2022-03-28 21:31:34

暴龙战士: 程序猿数学也要好啊 👍🏽0 💭N/A IP 🕐2022-03-28 19:39:12

Moiiiiiit: 爹！!!! 👍🏽0 💭N/A IP 🕐2022-03-28 19:22:16

一戳一蹦哒: 挺妙的，我一开始想到的方式是距离函数的blend 👍🏽0 💭N/A IP 🕐2022-03-28 15:40:29

Lin: 牛逼 👍🏽0 💭N/A IP 🕐2022-03-27 15:34:15

游戏人生: 很专业啊 👍🏽0 💭N/A IP 🕐2022-03-28 15:31:09

飞行员少年: 太漂亮了这也 👍🏽0 💭N/A IP 🕐2022-03-27 16:38:06