@momo-kits/native-kits 0.168.1-beta.24-debug → 0.168.1-beta.25-debug

package/ios/Navigation/BottomTab/DuoLiquidSelection.swift

@@ -0,0 +1,364 @@
+//
+//  DuoLiquidSelection.swift
+//  MoMoUIKits
+//
+//  iOS 26 tab bar selection motion without the glass material, port of RN
+//  `BottomTab/useLiquidSelection.ts` (Compose `DuoLiquidSelection.kt`).
+//
+
+import SwiftUI
+import UIKit
+
+enum LiquidAxis {
+    case x, y
+}
+
+// RN reanimated { damping: 18, stiffness: 220, mass: 0.8 }
+let liquidSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
+
+private struct SpringParams {
+    let mass: CGFloat
+    let stiffness: CGFloat
+    let damping: CGFloat
+
+    static let standard = SpringParams(mass: 0.8, stiffness: 220, damping: 18)
+    // the lens trails the finger a little while dragged
+    static let drag = SpringParams(mass: 0.6, stiffness: 600, damping: 24)
+}
+
+private let reducedDuration: CFTimeInterval = 0.2
+// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
+let liquidLensScaleX: CGFloat = 1.2
+let liquidLensScaleY: CGFloat = 1.3
+// a moving lens stretches along its path and thins across it, eased per frame
+private let stretchPerPoint: CGFloat = 0.012
+private let maxStretch: CGFloat = 0.25
+private let stretchEasing: CGFloat = 0.25
+private let restStretch: CGFloat = 0.002
+// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
+private let tapLiftDuration: Double = 0.12
+private let barSwell: CGFloat = 0.04
+private let iconPop: CGFloat = 1.15
+private let iconPopDuration: Double = 0.12
+// below it a press is a tap
+private let dragSlop: CGFloat = 10
+// UIScrollView rubber band constant
+private let rubberBandConstant: CGFloat = 0.55
+// a vetoed switch: the lens returns to the selected tab after this
+private let resyncDelay: Double = 0.1
+// RN TouchableOpacity delayLongPress
+private let longPressDelay: Double = 0.5
+
+/// Resistance past the first and last tab, the further the finger goes the less the lens follows.
+private func rubberBand(_ value: CGFloat, max: CGFloat, dimension: CGFloat) -> CGFloat {
+    func band(_ overshoot: CGFloat) -> CGFloat {
+        (1 - 1 / (overshoot * rubberBandConstant / dimension + 1)) * dimension
+    }
+    if value < 0 { return -band(-value) }
+    if value > max { return max + band(value - max) }
+    return value
+}
+
+/// Owns the lens: its offset is integrated on a display link (SwiftUI can't expose an animation's
+/// in-flight value, and the stretch and the tabs' active tint follow it every frame); lift and pop
+/// are plain SwiftUI springs. Input is one gesture over the whole bar, so a press is either a tap,
+/// a long press or a drag.
+final class DuoLiquidSelection: ObservableObject {
+    @Published private(set) var offset: CGFloat = 0
+    @Published private(set) var stretch: CGFloat = 0
+    @Published private(set) var lift: CGFloat = 0
+    @Published private(set) var selectedIndex = 0
+    @Published private(set) var popIndex: Int?
+    @Published private(set) var pop: CGFloat = 1
+
+    var axis: LiquidAxis = .x
+    var count = 0
+    /// Distance between two neighbouring tab centers.
+    var pitch: CGFloat = 0
+    /// The first tab's center in the gesture's coordinate space.
+    var firstCenter: CGFloat = 0
+    var reduceMotion = false
+    var onSelect: (Int) -> Void = { _ in }
+    var onLongPress: ((Int) -> Void)?
+    var onTick: () -> Void = {}
+
+    private var velocity: CGFloat = 0
+    // where the lens is heading, so a re-render doesn't restart a spring already going there
+    private var destination: CGFloat = 0
+    private var spring = SpringParams.standard
+    private var timed: (from: CGFloat, start: CFTimeInterval?)?
+    private var displayLink: CADisplayLink?
+    private var lastTimestamp: CFTimeInterval?
+    private var measured = false
+
+    private var touchIndex: Int?
+    private var dragging = false
+    private var hovered = 0
+    private var longPressWork: DispatchWorkItem?
+    private var resyncWork: DispatchWorkItem?
+    private var lastSample: (position: CGFloat, time: Date)?
+    private var dragVelocity: CGFloat = 0
+    private var liftGeneration = 0
+    private var popGeneration = 0
+
+    deinit {
+        displayLink?.invalidate()
+    }
+
+    func sync(index: Int) {
+        let changed = index != selectedIndex
+        selectedIndex = index
+        let target = CGFloat(index) * pitch
+        // snap on first layout so the lens doesn't slide in from the leading edge
+        if measured {
+            move(to: target)
+            if changed { popIcon(index) }
+        } else {
+            stop()
+            destination = target
+            offset = target
+        }
+        measured = pitch > 0
+    }
+
+    func activeOpacity(_ index: Int) -> Double {
+        guard pitch > 0 else { return selectedIndex == index ? 1 : 0 }
+        return Double(min(max(1 - abs(offset - CGFloat(index) * pitch) / pitch, 0), 1))
+    }
+
+    var barScale: CGFloat { 1 + lift * barSwell }
+
+    var lensScale: (along: CGFloat, across: CGFloat, x: CGFloat, y: CGFloat) {
+        (1 + stretch, 1 - stretch * 0.5, 1 + lift * (liquidLensScaleX - 1), 1 + lift * (liquidLensScaleY - 1))
+    }
+
+    // MARK: Input
+
+    func touchChanged(location: CGPoint, translation: CGSize, time: Date) {
+        let value = position(location)
+        defer { lastSample = (value, time) }
+        guard let touchIndex else {
+            let index = nearest(value)
+            touchIndex = index
+            dragging = false
+            dragVelocity = 0
+            pressIn(index)
+            let work = DispatchWorkItem { [weak self] in self?.onLongPress?(index) }
+            longPressWork = work
+            DispatchQueue.main.asyncAfter(deadline: .now() + longPressDelay, execute: work)
+            return
+        }
+        if !dragging, hypot(translation.width, translation.height) > dragSlop {
+            dragging = true
+            longPressWork?.cancel()
+            hovered = touchIndex
+            animateLift(1)
+        }
+        guard dragging else { return }
+        if let lastSample {
+            let dt = time.timeIntervalSince(lastSample.time)
+            if dt > 0 { dragVelocity = (value - lastSample.position) / CGFloat(dt) }
+        }
+        let target = nearest(value)
+        if target != hovered {
+            hovered = target
+            onTick()
+        }
+        let follow = rubberBand(value, max: CGFloat(count - 1) * pitch, dimension: pitch)
+        if reduceMotion {
+            stop()
+            destination = follow
+            offset = follow
+        } else {
+            move(to: follow, spring: .drag)
+        }
+    }
+
+    func touchEnded(location: CGPoint) {
+        longPressWork?.cancel()
+        longPressWork = nil
+        defer {
+            touchIndex = nil
+            lastSample = nil
+        }
+        guard let touchIndex else { return }
+        if dragging {
+            dragging = false
+            animateLift(0)
+            let target = nearest(position(location))
+            move(to: CGFloat(target) * pitch, velocity: dragVelocity)
+            select(target)
+        } else {
+            pulseLift()
+            // a tap or a held tab, both pick the pressed tab like the system tab bar
+            select(touchIndex)
+        }
+    }
+
+    /// The system took the touch: nothing is selected, the lens returns to the selected tab.
+    func touchCancelled() {
+        guard touchIndex != nil else { return }
+        longPressWork?.cancel()
+        longPressWork = nil
+        touchIndex = nil
+        lastSample = nil
+        dragging = false
+        animateLift(0)
+        move(to: CGFloat(selectedIndex) * pitch, velocity: 0)
+    }
+
+    // MARK: Motion
+
+    private func position(_ point: CGPoint) -> CGFloat {
+        (axis == .x ? point.x : point.y) - firstCenter
+    }
+
+    private func nearest(_ value: CGFloat) -> Int {
+        guard pitch > 0 else { return 0 }
+        return min(max(Int((value / pitch).rounded()), 0), max(count - 1, 0))
+    }
+
+    private func pressIn(_ index: Int) {
+        resyncWork?.cancel()
+        // the lens heads to the pressed tab, not only the selected one
+        move(to: CGFloat(index) * pitch)
+        animateLift(1)
+    }
+
+    private func select(_ index: Int) {
+        onSelect(index)
+        resync()
+    }
+
+    /// Returns the lens to the selected tab unless a switch to where it is heading happened.
+    private func resync() {
+        resyncWork?.cancel()
+        let work = DispatchWorkItem { [weak self] in
+            guard let self, !self.dragging else { return }
+            let target = CGFloat(self.selectedIndex) * self.pitch
+            if self.destination != target { self.move(to: target) }
+        }
+        resyncWork = work
+        DispatchQueue.main.asyncAfter(deadline: .now() + resyncDelay, execute: work)
+    }
+
+    private func animateLift(_ target: CGFloat) {
+        liftGeneration += 1
+        if reduceMotion {
+            lift = 0
+            return
+        }
+        withAnimation(liquidSpring) { lift = target }
+    }
+
+    private func pulseLift() {
+        guard !reduceMotion else { return animateLift(0) }
+        liftGeneration += 1
+        let generation = liftGeneration
+        withAnimation(.linear(duration: tapLiftDuration)) { lift = 1 }
+        DispatchQueue.main.asyncAfter(deadline: .now() + tapLiftDuration) { [weak self] in
+            guard let self, self.liftGeneration == generation else { return }
+            withAnimation(liquidSpring) { self.lift = 0 }
+        }
+    }
+
+    private func popIcon(_ index: Int) {
+        guard !reduceMotion else { return }
+        popGeneration += 1
+        let generation = popGeneration
+        popIndex = index
+        pop = 1
+        withAnimation(.linear(duration: iconPopDuration)) { pop = iconPop }
+        DispatchQueue.main.asyncAfter(deadline: .now() + iconPopDuration) { [weak self] in
+            guard let self, self.popGeneration == generation else { return }
+            withAnimation(liquidSpring) { self.pop = 1 }
+        }
+    }
+
+    private func move(to target: CGFloat, velocity: CGFloat? = nil, spring: SpringParams = .standard) {
+        if destination == target, velocity == nil { return }
+        destination = target
+        self.spring = spring
+        if let velocity { self.velocity = velocity }
+        timed = reduceMotion ? (from: offset, start: nil) : nil
+        startDisplayLink()
+    }
+
+    private func stop() {
+        velocity = 0
+        timed = nil
+    }
+
+    fileprivate func tick(_ link: CADisplayLink) {
+        let now = link.targetTimestamp
+        let dt = min(now - (lastTimestamp ?? link.timestamp), 1.0 / 30)
+        lastTimestamp = now
+        let previous = offset
+        var next = offset
+        var settled = false
+
+        if var timed {
+            let start = timed.start ?? link.timestamp
+            timed.start = start
+            self.timed = timed
+            let fraction = min(max((now - start) / reducedDuration, 0), 1)
+            // reanimated withTiming default: ease in-out quad
+            let eased = fraction < 0.5 ? 2 * fraction * fraction : 1 - 2 * (1 - fraction) * (1 - fraction)
+            next = timed.from + (destination - timed.from) * CGFloat(eased)
+            settled = fraction >= 1
+        } else {
+            // a few sub steps keep the stiff drag spring stable
+            let steps = 4
+            let h = CGFloat(dt) / CGFloat(steps)
+            for _ in 0..<steps {
+                let force = -spring.stiffness * (next - destination) - spring.damping * velocity
+                velocity += force / spring.mass * h
+                next += velocity * h
+            }
+            settled = abs(next - destination) < 0.1 && abs(velocity) < 1
+        }
+        if settled {
+            next = destination
+            stop()
+        }
+        offset = next
+
+        if reduceMotion {
+            stretch = 0
+        } else {
+            let target = min(abs(next - previous) * stretchPerPoint, maxStretch)
+            // eased both ways: a slow frame (the spring turning at its overshoot) must not snap the shape
+            let eased = stretch + (target - stretch) * stretchEasing
+            stretch = eased < restStretch ? 0 : eased
+        }
+        if settled, stretch == 0 { stopDisplayLink() }
+    }
+
+    private func startDisplayLink() {
+        guard displayLink == nil else { return }
+        let link = CADisplayLink(target: DisplayLinkProxy(owner: self), selector: #selector(DisplayLinkProxy.tick))
+        link.preferredFrameRateRange = CAFrameRateRange(minimum: 60, maximum: 120, preferred: 120)
+        link.add(to: .main, forMode: .common)
+        displayLink = link
+        lastTimestamp = nil
+    }
+
+    private func stopDisplayLink() {
+        displayLink?.invalidate()
+        displayLink = nil
+    }
+}
+
+/// CADisplayLink retains its target; the proxy keeps the selection free to deinit mid motion.
+private final class DisplayLinkProxy: NSObject {
+    weak var owner: DuoLiquidSelection?
+
+    init(owner: DuoLiquidSelection) {
+        self.owner = owner
+    }
+
+    @objc func tick(_ link: CADisplayLink) {
+        guard let owner else { return link.invalidate() }
+        owner.tick(link)
+    }
+}