How can I create a fluid liquid animation with a smooth bulge effect in SwiftUI?

I would describe this animation effect as the reverse of the droplet motion commonly seen in coffee advertisements. A liquid drop normally causes a "rebound" with a small circular drop escaping the surface tension. The effect in this animation seems to start with that circular drop, so it's like playing the droplet motion backwards. Not easy to implement!

You have managed to get quite far with your example, but the shape of the bulge is not quite right. I've focused on trying to make this part better.

I would suggest building the bulge shape by adding arcs to the path. The following diagram illustrates how the bulge can be based on the outline of two adjoining circles:

The bulge starts at point A, proceeding along the circumference of the circle with center point B. When it reaches the tangent with the smaller circle, it proceeds along the circumference of the smaller circle. This makes the point of the bulge. The reverse arc is then applied on the other side.

Here is an implementation of a shape that works this way:

SWIFTCopied
struct Bulge: Shape {
    let bulgeAngle: Angle // alpha
    let circleRadius: CGFloat
    let bulgeBeginRadius: CGFloat
    var bulgePointRadius: CGFloat

    var animatableData: CGFloat {
        get { bulgePointRadius }
        set { bulgePointRadius = newValue }
    }

    func path(in rect: CGRect) -> Path {
        Path { path in
            let sinAlpha = CGFloat(sin(bulgeAngle.radians))
            let cosAlpha = CGFloat(cos(bulgeAngle.radians))
            let pointA = CGPoint(
                x: rect.midX - (circleRadius * sinAlpha),
                y: rect.midY - (circleRadius * cosAlpha)
            )
            let pointB = CGPoint(
                x: rect.midX - ((circleRadius + bulgeBeginRadius) * sinAlpha),
                y: rect.midY - ((circleRadius + bulgeBeginRadius) * cosAlpha)
            )
            let beta = min(
                (Double.pi / 2) - bulgeAngle.radians,
                acos(Double(rect.midX - pointB.x) / (bulgeBeginRadius + bulgePointRadius))
            )
            let pointC = CGPoint(
                x: rect.midX,
                y: pointB.y + (sin(beta) * (bulgeBeginRadius + bulgePointRadius))
            )
            let pointD = CGPoint(
                x: rect.midX + ((circleRadius + bulgeBeginRadius) * sinAlpha),
                y: pointB.y
            )
            path.move(to: pointA)
            path.addArc(
                center: pointB,
                radius: bulgeBeginRadius,
                startAngle: .radians(Double.pi / 2) - bulgeAngle,
                endAngle: .radians(beta),
                clockwise: true
            )
            path.addArc(
                center: pointC,
                radius: bulgePointRadius,
                startAngle: .radians(Double.pi + beta),
                endAngle: .radians(-beta),
                clockwise: false
            )
            path.addArc(
                center: pointD,
                radius: bulgeBeginRadius,
                startAngle: .radians(Double.pi - beta),
                endAngle: .radians(Double.pi / 2) + bulgeAngle,
                clockwise: true
            )
        }
    }
}

The bulge can be animated by changing the radius for the small circle (the bulge point), as illustrated with this demo:

SWIFTCopied
struct BulgeDemo: View {
    let bulgeAngle = Angle.degrees(25) // alpha
    let circleRadius: CGFloat = 75
    let bulgeBeginRadius: CGFloat = 100
    @State private var bulgePointRadius: CGFloat = 10

    var body: some View {
        ZStack {
            Circle()
                .stroke()
                .frame(width: circleRadius * 2, height: circleRadius * 2)
            Bulge(
                bulgeAngle: bulgeAngle,
                circleRadius: circleRadius,
                bulgeBeginRadius: bulgeBeginRadius,
                bulgePointRadius: bulgePointRadius
            )
            .stroke(.blue, lineWidth: 3)
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
                bulgePointRadius = circleRadius
            }
        }
    }
}

This bulge can now be plugged into your original LiquidAnimation. The main changes needed:

• A circle is now the first layer in the ZStack.
• The new Bulge shape replaces BulgeEffect.
• A .rotationEffect is used to align the bulge with the incoming dot.
• Before I was able to work out the cap to apply to the angle beta, I found that a .spring animation caused some strange effects. This is fixed now, but using a simpler animation like .easeIn works quite well anyway.

SWIFTCopied
struct LiquidAnimation: View {
    let outerDiameter: CGFloat
    let innerDiameter: CGFloat
    let dotSize: CGFloat
    let bulgeAngle = Angle.degrees(25) // alpha
    let bulgeBeginRadius: CGFloat = 100
    let minBulgePointRadius: CGFloat = 10

    @State private var movingDots: [MovingDot] = []
    @State private var targetAngle: Double = 0
    @State private var bulgePointRadius: CGFloat = 0

    var body: some View {
        ZStack {
            Circle()
                .frame(width: innerDiameter, height: innerDiameter)
            Bulge(
                bulgeAngle: bulgeAngle,
                circleRadius: innerDiameter / 2,
                bulgeBeginRadius: bulgeBeginRadius,
                bulgePointRadius: bulgePointRadius
            )
            .rotationEffect(.radians(targetAngle + (Double.pi / 2)))
            .onAppear { bulgePointRadius = innerDiameter / 2 }

            ForEach(movingDots) { dot in
                Circle()
                    .frame(width: dotSize * 2, height: dotSize * 2)
                    .scaleEffect(dot.scale)
                    .position(
                        x: outerDiameter/2 + cos(dot.startAngle) * (outerDiameter/2 - dot.progress * (outerDiameter/2 - innerDiameter/2)),
                        y: outerDiameter/2 + sin(dot.startAngle) * (outerDiameter/2 - dot.progress * (outerDiameter/2 - innerDiameter/2))
                    )
            }
        }
        .frame(width: outerDiameter, height: outerDiameter)
        .onAppear(perform: startSpawningDots)
    }

    private func startSpawningDots() {
        Timer.scheduledTimer(withTimeInterval: Double.random(in: 2...5), repeats: true) { _ in
            let startAngle = Double.random(in: 0...(2 * .pi))
            let newDot = MovingDot(startAngle: startAngle, progress: 0)

            movingDots.append(newDot)

            withAnimation(.easeIn(duration: 1.5)) {
                movingDots[movingDots.count - 1].progress = 0.8
            }

            DispatchQueue.main.asyncAfter(deadline: .now() + 1.2) {
                targetAngle = startAngle
//                withAnimation(.spring(response: 0.3, dampingFraction: 0.6)) {
                withAnimation(.easeIn) {
                    bulgePointRadius = minBulgePointRadius
                }

                withAnimation(.easeOut(duration: 0.3)) {
                    movingDots[movingDots.count - 1].scale = 1.2
                }
            }

            DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
                withAnimation(.easeOut(duration: 0.3)) {
                    movingDots[movingDots.count - 1].progress = 1
                    movingDots[movingDots.count - 1].scale = 0.1
                }

//                withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
                withAnimation(.easeIn) {
                    bulgePointRadius = innerDiameter / 2
                }
            }

            DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                movingDots.removeAll { $0.id == newDot.id }
            }
        }
    }
}

The animation could still do with some polishing, but hopefully it gets you further.