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