仿QQ红点拖拽效果
仿 QQ 的红点拖拽效果，挺有意思的一个小功能。你应该在不少 App 里见过：消息提示的小红点可以被拖动，拖着拖着突然就“啪”一声炸掉，既解压又实用。这种交互其实背后挺讲究，尤其是用贝塞尔曲线来模拟那种“拉丝回弹”的感觉，做得好还挺有高级感。
实现思路其实不难，关键是几块配合得好：触摸事件监听（touchstart、touchmove、touchend）要及时响应；拖动过程中的位置更新得靠坐标转换加贝塞尔曲线计算来搞定，别让小红点乱飞；再加上requestAnimationFrame驱动动画，整个过程就流畅了不少。
想让它看起来不那么“死板”，可以加点弹性回弹，就像橡皮筋那种手感。状态控制也别忘了，比如拖出去炸掉之后该怎么重置、怎么标记有消息没消息这些，都要想清楚。
你要是想搞懂怎么画这个曲线，可以参考这些贝塞尔相关的资源，贝塞尔曲线绘图 和 贝塞尔曲线 demo 这两个比较适合上手看看。动手试试“Bezier”这个示例文件也不错，里面率已经封装好一套逻辑，省不少事。
如果你正好在做消息类 App，或者想试着提升交互手感，整一个这样的红点拖拽玩玩，还挺有趣的～
文件大小：105.58KB
评论区