How to Compute and Draw the One‑Click “Dismiss” Effect with Bezier Curves

Many users enjoy the QQ "one‑click dismiss" feature that pulls the red notification dot away, but implementing it requires understanding the geometry of two circles connected by Bézier curves. The small circle stays at a fixed position while its radius changes, and the large circle follows the finger, with a fixed radius.

1. Compute the line between the circle centers

Given the small‑circle center O(startX, startY), the large‑circle center P0(x0, y0), and radii r and R, the distance between the centers is

d = sqrt((x0 - startX)^2 + (y0 - startY)^2)

2. Find the tangent points

For two externally separated circles there are two external common tangents. When the radii differ, the tangents intersect at a point on the line joining the centers. Using elementary geometry:

Let γ = arcsin((R - r) / d) be the angle between the line OP0 and the tangent from the small circle.

Let α = arctan((startY - y0) / (x0 - startX)) be the angle of OP0 relative to the x‑axis (note that on mobile the y‑axis points down).

Then β = π/2 - γ - α gives the angle needed for the first pair of tangent points.

The coordinates of the first two tangent points are:

P1.x = startX - cos(β) * r

P1.y = startY - sin(β) * r

P2.x = x0 - cos(β) * R

P2.y = y0 - sin(β) * R

3. Compute the remaining two tangent points

Because of symmetry, additional angles are needed:

δ = π/2 - α

ε = π/2 - γ - δ

ζ = π/2 + γ - α

The coordinates become:

P3.x = startX + cos(ζ) * r

P3.y = startY + sin(ζ) * r

P4.x = x0 + cos(ζ) * R

P4.y = y0 + sin(ζ) * R

4. Draw the Bézier curves

With the four tangent points known, each pair (P1‑P2 and P3‑P4) forms a straight segment that will serve as the base of a quadratic Bézier curve. A control point is needed for each curve.

4.1 Bézier curve basics

A quadratic Bézier curve is defined by three points: the start point, the end point, and a single control point that determines the curve’s shape. As the animation progresses (t from 0 to 1), the curve smoothly interpolates between the start and end points.

4.2 Choosing control points

One simple choice is the midpoint of the line joining the two circle centers, but a better visual result—used by Tencent designers—is to place the control point at the midpoint of the opposite tangent segment: the control point for the P1‑P2 curve is the midpoint of P1‑P4, and the control point for the P3‑P4 curve is the midpoint of P2‑P3.

The midpoint calculations are straightforward arithmetic on the coordinates of the four tangent points.

Below are the key illustrations referenced in the tutorial:

By following these calculations, developers can recreate the smooth, responsive one‑click dismiss animation on any mobile platform.