@onekeyfe/react-native-perp-depth-bar 3.0.42 → 3.0.45

package/android/src/main/java/com/margelo/nitro/perpdepthbar/HybridPerpDepthBars.kt

@@ -1,18 +1,24 @@
 package com.margelo.nitro.perpdepthbar
 
-import android.animation.ValueAnimator
 import android.graphics.Canvas
 import android.graphics.Paint
+import android.view.Choreographer
 import android.view.MotionEvent
 import android.view.View
-import android.view.animation.PathInterpolator
 import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.uimanager.ThemedReactContext
+import kotlin.math.abs
+import kotlin.math.exp
 
 /**
- * Renders an entire column of order-book depth bars for one side. Draws N
- * rects whose horizontal fill fraction animates on the UI thread via a single
- * [ValueAnimator], replacing N reanimated `DepthBar` instances.
+ * Renders an entire column of order-book depth bars for one side. Draws N rects
+ * whose horizontal fill fraction is eased on the UI thread.
+ *
+ * Animation model: a [Choreographer] frame loop continuously eases every row's
+ * on-screen fill toward its latest target (short fixed exponential smoothing).
+ * New data just retargets — the loop keeps gliding and only stops once every row
+ * has settled. Updates chain into continuous motion and a fluctuating row count
+ * no longer freezes the column (only a coin/tick switch snaps, via `epoch`).
  */
 @DoNotStrip
 class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBarsSpec() {
@@ -22,14 +28,17 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
   private val pricePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.LEFT }
   private val sizePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { textAlign = Paint.Align.RIGHT }
 
-  private var current = DoubleArray(0)
-  private var start = DoubleArray(0)
-  private var target = DoubleArray(0)
+  private var current = DoubleArray(0) // on-screen fill fraction per row (0..1)
+  private var target = DoubleArray(0)  // latest target fill fraction per row
 
   private var lastEpoch = Double.NaN
   private var hasDrawn = false
   private var isDisposed = false
-  private var animator: ValueAnimator? = null
+
+  private val choreographer = Choreographer.getInstance()
+  private var frameScheduled = false
+  private var lastFrameNanos = 0L
+  private val frameCallback = Choreographer.FrameCallback { onFrame(it) }
 
   override val view: View = object : View(context) {
     override fun onDraw(canvas: Canvas) {
@@ -73,6 +82,7 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
     get() = field
     set(value) { if (!isDisposed) { field = value; view.invalidate() } }
 
+  /** Kept for OS "reduce motion" accessibility only — NOT a caller on/off knob. */
   override var reducedMotion: Boolean = false
     get() = field
     set(value) { field = value }
@@ -153,7 +163,7 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
 
   /**
    * Called by Nitro once after a prop-update transaction. Recompute targets and
-   * (re)start the animation here so a multi-prop update animates once.
+   * (re)start the easing loop here so a multi-prop update retargets once.
    */
   override fun afterUpdate() {
     super.afterUpdate()
@@ -164,13 +174,11 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
   private fun syncTargets() {
     val count = percents.size
     val epochChanged = epoch != lastEpoch
-    val countChanged = target.size != count
-    val snap = !hasDrawn || reducedMotion || epochChanged || countChanged
-
+    val snap = !hasDrawn || reducedMotion || epochChanged
     val newTarget = DoubleArray(count) { clampFrac(percents[it]) }
 
     if (snap) {
-      animator?.cancel()
+      cancelFrameLoop()
       current = newTarget.copyOf()
       target = newTarget
       lastEpoch = epoch
@@ -179,27 +187,62 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
       return
     }
 
-    // Animate each row from its current value to the new target.
-    if (current.size != count) current = current.copyOf(count)
-    start = current.copyOf()
+    // Keep existing rows easing; brand-new rows appear at their target (no
+    // grow-from-zero flash). Then retarget and let the frame loop glide.
+    if (current.size != count) {
+      current = DoubleArray(count) { i -> if (i < current.size) current[i] else newTarget[i] }
+    }
     target = newTarget
     lastEpoch = epoch
+    scheduleFrameLoop()
+  }
 
-    animator?.cancel()
-    animator = ValueAnimator.ofFloat(0f, 1f).apply {
-      duration = DURATION_MS
-      interpolator = EASE_OUT_CUBIC
-      addUpdateListener { a ->
-        if (isDisposed) return@addUpdateListener
-        val f = a.animatedFraction
-        for (i in current.indices) {
-          val s = if (i < start.size) start[i] else 0.0
-          val t = if (i < target.size) target[i] else 0.0
-          current[i] = s + (t - s) * f
-        }
-        view.invalidate()
+  // MARK: - Continuous easing (Choreographer)
+  private fun scheduleFrameLoop() {
+    if (frameScheduled || isDisposed) return
+    val n = minOf(current.size, target.size)
+    var needs = false
+    for (i in 0 until n) {
+      if (abs(target[i] - current[i]) > 0.001) { needs = true; break }
+    }
+    if (!needs) { view.invalidate(); return }
+    frameScheduled = true
+    lastFrameNanos = 0L
+    choreographer.postFrameCallback(frameCallback)
+  }
+
+  private fun cancelFrameLoop() {
+    if (frameScheduled) {
+      choreographer.removeFrameCallback(frameCallback)
+      frameScheduled = false
+    }
+    lastFrameNanos = 0L
+  }
+
+  private fun onFrame(now: Long) {
+    if (isDisposed) { frameScheduled = false; return }
+    val dt = if (lastFrameNanos > 0L) (now - lastFrameNanos) / 1e9 else 1.0 / 60.0
+    lastFrameNanos = now
+    val alpha = 1.0 - exp(-maxOf(dt, 0.0) / TAU_SECONDS)
+
+    var settled = true
+    val n = minOf(current.size, target.size)
+    for (i in 0 until n) {
+      val d = target[i] - current[i]
+      if (abs(d) <= 0.001) {
+        current[i] = target[i]
+      } else {
+        current[i] += d * alpha
+        settled = false
       }
-      start()
+    }
+    view.invalidate()
+
+    if (settled) {
+      frameScheduled = false
+      lastFrameNanos = 0L
+    } else {
+      choreographer.postFrameCallback(frameCallback)
     }
   }
 
@@ -252,12 +295,14 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
 
   override fun dispose() {
     isDisposed = true
-    animator?.cancel()
-    animator = null
+    cancelFrameLoop()
   }
 
   companion object {
-    private const val DURATION_MS = 260L
-    private val EASE_OUT_CUBIC = PathInterpolator(0.33f, 1f, 0.68f, 1f)
+    /**
+     * Exponential-smoothing time constant (seconds); mirror of
+     * PerpTiming.depthBarSmoothingTauSeconds on iOS.
+     */
+    private const val TAU_SECONDS = 0.10
   }
 }

package/android/src/main/java/com/margelo/nitro/perpdepthbar/HybridPerpSideRatio.kt

@@ -1,15 +1,22 @@
 package com.margelo.nitro.perpdepthbar
 
-import android.animation.ValueAnimator
 import android.graphics.Canvas
 import android.graphics.Paint
 import android.graphics.RectF
+import android.view.Choreographer
 import android.view.View
-import android.view.animation.PathInterpolator
 import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.uimanager.ThemedReactContext
-
-/** Two horizontal segments whose widths animate to the bid/ask ratio. */
+import kotlin.math.abs
+import kotlin.math.exp
+
+/**
+ * Two horizontal segments whose widths ease to the bid/ask ratio.
+ *
+ * Animation model mirrors the depth bars: a [Choreographer] frame loop
+ * continuously eases the split fraction toward its latest target (short fixed
+ * exponential smoothing). New data just retargets; the loop stops once settled.
+ */
 @DoNotStrip
 class HybridPerpSideRatio(val context: ThemedReactContext) : HybridPerpSideRatioSpec() {
 
@@ -19,11 +26,14 @@ class HybridPerpSideRatio(val context: ThemedReactContext) : HybridPerpSideRatio
 
   // Animated split fraction (bid share of the available width), 0..1.
   private var currentSplit = 0.5
-  private var startSplit = 0.5
   private var targetSplit = 0.5
   private var hasDrawn = false
   private var isDisposed = false
-  private var animator: ValueAnimator? = null
+
+  private val choreographer = Choreographer.getInstance()
+  private var frameScheduled = false
+  private var lastFrameNanos = 0L
+  private val frameCallback = Choreographer.FrameCallback { onFrame(it) }
 
   override val view: View = object : View(context) {
     override fun onDraw(canvas: Canvas) {
@@ -54,6 +64,7 @@ class HybridPerpSideRatio(val context: ThemedReactContext) : HybridPerpSideRatio
     get() = field
     set(value) { if (!isDisposed) { field = value; view.invalidate() } }
 
+  /** Kept for OS "reduce motion" accessibility only — NOT a caller on/off knob. */
   override var reducedMotion: Boolean = false
     get() = field
     set(value) { field = value }
@@ -84,26 +95,51 @@ class HybridPerpSideRatio(val context: ThemedReactContext) : HybridPerpSideRatio
     val split = bid / (bid + ask)
     val snap = !hasDrawn || reducedMotion
     if (snap) {
-      animator?.cancel()
+      cancelFrameLoop()
       currentSplit = split
       targetSplit = split
       hasDrawn = true
       view.invalidate()
       return
     }
-    startSplit = currentSplit
     targetSplit = split
-    animator?.cancel()
-    animator = ValueAnimator.ofFloat(0f, 1f).apply {
-      duration = DURATION_MS
-      interpolator = EASE_OUT_CUBIC
-      addUpdateListener { a ->
-        if (isDisposed) return@addUpdateListener
-        currentSplit = startSplit + (targetSplit - startSplit) * a.animatedFraction
-        view.invalidate()
-      }
-      start()
+    scheduleFrameLoop()
+  }
+
+  // MARK: - Continuous easing (Choreographer)
+  private fun scheduleFrameLoop() {
+    if (frameScheduled || isDisposed) return
+    if (abs(targetSplit - currentSplit) <= 0.0005) { view.invalidate(); return }
+    frameScheduled = true
+    lastFrameNanos = 0L
+    choreographer.postFrameCallback(frameCallback)
+  }
+
+  private fun cancelFrameLoop() {
+    if (frameScheduled) {
+      choreographer.removeFrameCallback(frameCallback)
+      frameScheduled = false
+    }
+    lastFrameNanos = 0L
+  }
+
+  private fun onFrame(now: Long) {
+    if (isDisposed) { frameScheduled = false; return }
+    val dt = if (lastFrameNanos > 0L) (now - lastFrameNanos) / 1e9 else 1.0 / 60.0
+    lastFrameNanos = now
+    val alpha = 1.0 - exp(-maxOf(dt, 0.0) / TAU_SECONDS)
+
+    val d = targetSplit - currentSplit
+    if (abs(d) <= 0.0005) {
+      currentSplit = targetSplit
+      view.invalidate()
+      frameScheduled = false
+      lastFrameNanos = 0L
+      return
     }
+    currentSplit += d * alpha
+    view.invalidate()
+    choreographer.postFrameCallback(frameCallback)
   }
 
   private fun drawSegments(canvas: Canvas) {
@@ -128,12 +164,14 @@ class HybridPerpSideRatio(val context: ThemedReactContext) : HybridPerpSideRatio
 
   override fun dispose() {
     isDisposed = true
-    animator?.cancel()
-    animator = null
+    cancelFrameLoop()
   }
 
   companion object {
-    private const val DURATION_MS = 300L
-    private val EASE_OUT_CUBIC = PathInterpolator(0.33f, 1f, 0.68f, 1f)
+    /**
+     * Exponential-smoothing time constant (seconds); mirror of
+     * PerpTiming.sideRatioSmoothingTauSeconds on iOS.
+     */
+    private const val TAU_SECONDS = 0.12
   }
 }

package/ios/HybridPerpDepthBars.swift

@@ -2,8 +2,16 @@ import Foundation
 import UIKit
 
 /// Renders an entire column of order-book depth bars for one side (asks/bids).
-/// Each row is a CALayer whose horizontal `scaleX` fill is animated on the UI
+/// Each row is a CALayer whose horizontal `scaleX` fill is eased on the UI
 /// thread, replacing N reanimated `DepthBar` instances.
+///
+/// Animation model: a single `CADisplayLink` continuously eases every row's
+/// on-screen scale toward its latest target (short fixed exponential smoothing,
+/// `tau ≈ 0.1s`). New data just retargets — the link keeps gliding and only
+/// stops once every row has settled. Updates therefore chain into continuous
+/// motion, and a fluctuating row count no longer freezes the column (only a
+/// coin/tick switch snaps, via `epoch`). Tracks the per-row text closely so the
+/// bar and the price/size labels stay in agreement.
 final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
 
   // MARK: - HybridView
@@ -17,8 +25,13 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
   private var sizeLayers: [CATextLayer] = []
   private let textScale = UIScreen.main.scale
 
+  // MARK: - Continuous-easing state
+  private var currentScales: [CGFloat] = [] // on-screen scaleX per row (0...1)
+  private var targetScales: [CGFloat] = []  // latest target scaleX per row
+  private var displayLink: CADisplayLink?
+  private var lastTick: CFTimeInterval = 0
+
   // MARK: - State for animation decisions
-  private var lastPercents: [Double] = []
   private var lastEpoch: Double = .nan
   private var hasLaidOut = false
 
@@ -28,6 +41,8 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
   var rowMarginTop: Double = 0 { didSet { scheduleLayout() } }
   var barInset: Double = 0 { didSet { scheduleLayout() } }
   var origin: String = "left" { didSet { scheduleLayout() } }
+  /// Kept for OS "reduce motion" accessibility only — NOT a caller on/off knob.
+  /// Depth bars animate by default; callers don't pass anything to enable it.
   var reducedMotion: Bool = false { didSet { scheduleLayout() } }
   var epoch: Double = 0 { didSet { scheduleLayout() } }
 
@@ -75,6 +90,10 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     }
   }
 
+  deinit {
+    stopDisplayLink()
+  }
+
   private func handleTap(atY y: CGFloat) {
     let step = CGFloat(rowHeight + rowMarginTop)
     guard step > 0 else { return }
@@ -89,7 +108,7 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     view.setNeedsLayout()
   }
 
-  // MARK: - Layout + animation
+  // MARK: - Layout + retarget
   private func performLayout() {
     let bounds = view.bounds
     guard bounds.width > 0 else { return }
@@ -98,10 +117,8 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     syncLayerCount(count)
     syncTextLayerCount(count)
 
-    // Decide whether this update should animate or snap.
     let epochChanged = epoch != lastEpoch
-    let countChanged = lastPercents.count != count
-    let snap = !hasLaidOut || reducedMotion || epochChanged || countChanged
+    let snap = !hasLaidOut || reducedMotion || epochChanged
 
     let rowW = bounds.width
     let h = CGFloat(rowHeight)
@@ -110,32 +127,41 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     let isRight = origin == "right"
     let anchorX: CGFloat = isRight ? 1 : 0
 
+    // Geometry never animates — set it directly each pass.
     CATransaction.begin()
-    CATransaction.setDisableActions(true) // suppress implicit anims for geometry
-
+    CATransaction.setDisableActions(true)
     for i in 0..<count {
       let layer = barLayers[i]
       let rowTop = CGFloat(rowMarginTop) + CGFloat(i) * (h + CGFloat(rowMarginTop))
       let rowCenterY = rowTop + h / 2
-
       layer.anchorPoint = CGPoint(x: anchorX, y: 0.5)
       layer.bounds = CGRect(x: 0, y: 0, width: rowW, height: barH)
       layer.position = CGPoint(x: isRight ? rowW : 0, y: rowCenterY)
       layer.backgroundColor = cachedColor
+    }
+    CATransaction.commit()
 
-      let target = clampScale(percents[i])
-      let changed = i >= lastPercents.count || lastPercents[i] != percents[i]
+    var newTargets = [CGFloat](repeating: 0, count: count)
+    for i in 0..<count { newTargets[i] = clampScale(percents[i]) }
 
-      if snap || !changed {
-        layer.removeAnimation(forKey: "fill")
-        layer.transform = CATransform3DMakeScale(target, 1, 1)
-      } else {
-        animateScaleX(layer: layer, to: target)
+    if snap {
+      stopDisplayLink()
+      currentScales = newTargets
+      targetScales = newTargets
+      applyScales()
+    } else {
+      // Keep existing rows easing; brand-new rows appear at their target (no
+      // grow-from-zero flash). Then retarget and let the display link glide.
+      if currentScales.count < count {
+        for i in currentScales.count..<count { currentScales.append(newTargets[i]) }
+      } else if currentScales.count > count {
+        currentScales.removeLast(currentScales.count - count)
       }
+      targetScales = newTargets
+      applyScales() // render current immediately (geometry/new rows) this frame
+      startDisplayLinkIfNeeded()
     }
 
-    CATransaction.commit()
-
     // Text never animates — snap frames/strings each layout pass.
     CATransaction.begin()
     CATransaction.setDisableActions(true)
@@ -163,11 +189,78 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     }
     CATransaction.commit()
 
-    lastPercents = percents
     lastEpoch = epoch
     hasLaidOut = true
   }
 
+  /// Writes `currentScales` into every bar layer's transform (no implicit anim).
+  private func applyScales() {
+    let n = min(currentScales.count, barLayers.count)
+    guard n > 0 else { return }
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    for i in 0..<n {
+      barLayers[i].transform = CATransform3DMakeScale(currentScales[i], 1, 1)
+    }
+    CATransaction.commit()
+  }
+
+  // MARK: - Continuous easing (display link)
+  private func startDisplayLinkIfNeeded() {
+    if displayLink != nil { return }
+    let n = min(currentScales.count, targetScales.count)
+    var needs = false
+    for i in 0..<n where abs(targetScales[i] - currentScales[i]) > 0.001 {
+      needs = true
+      break
+    }
+    guard needs else { return }
+    lastTick = 0
+    let proxy = DisplayLinkProxy(self)
+    let link = CADisplayLink(target: proxy, selector: #selector(DisplayLinkProxy.tick(_:)))
+    link.add(to: .main, forMode: .common)
+    displayLink = link
+  }
+
+  private func stopDisplayLink() {
+    displayLink?.invalidate()
+    displayLink = nil
+    lastTick = 0
+  }
+
+  /// Called by the display link each frame. Eases every row toward its target.
+  func handleTick(_ link: CADisplayLink) {
+    let now = link.timestamp
+    let dt = lastTick > 0 ? now - lastTick : link.duration
+    lastTick = now
+    let tau = PerpTiming.depthBarSmoothingTauSeconds
+    let alpha = CGFloat(1 - exp(-max(dt, 0) / max(tau, 0.0001)))
+
+    var settled = true
+    let n = min(min(currentScales.count, targetScales.count), barLayers.count)
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    for i in 0..<n {
+      let t = targetScales[i]
+      let c = currentScales[i]
+      let d = t - c
+      if abs(d) <= 0.001 {
+        if c != t {
+          currentScales[i] = t
+          barLayers[i].transform = CATransform3DMakeScale(t, 1, 1)
+        }
+      } else {
+        let nc = c + d * alpha
+        currentScales[i] = nc
+        barLayers[i].transform = CATransform3DMakeScale(nc, 1, 1)
+        settled = false
+      }
+    }
+    CATransaction.commit()
+
+    if settled { stopDisplayLink() }
+  }
+
   private func makeTextLayer(alignment: CATextLayerAlignmentMode) -> CATextLayer {
     let l = CATextLayer()
     l.contentsScale = textScale
@@ -195,28 +288,6 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     }
   }
 
-  private func animateScaleX(layer: CALayer, to target: CGFloat) {
-    // Continue from the on-screen (presentation) value to avoid snap-back when
-    // a new animation starts every tick (~10Hz).
-    let current: CGFloat
-    if let pres = layer.presentation() {
-      current = pres.value(forKeyPath: "transform.scale.x") as? CGFloat
-        ?? (layer.value(forKeyPath: "transform.scale.x") as? CGFloat ?? target)
-    } else {
-      current = layer.value(forKeyPath: "transform.scale.x") as? CGFloat ?? target
-    }
-
-    layer.transform = CATransform3DMakeScale(target, 1, 1) // model = final
-
-    let anim = CABasicAnimation(keyPath: "transform.scale.x")
-    anim.fromValue = current
-    anim.toValue = target
-    anim.duration = PerpTiming.depthBarDurationMs / 1000.0
-    anim.timingFunction = PerpTiming.easeOutCubic()
-    anim.isRemovedOnCompletion = true
-    layer.add(anim, forKey: "fill")
-  }
-
   private func syncLayerCount(_ count: Int) {
     if barLayers.count < count {
       for _ in barLayers.count..<count {
@@ -242,3 +313,11 @@ final class HybridPerpDepthBars: HybridPerpDepthBarsSpec {
     CGFloat(max(0, min(100, percent)) / 100.0)
   }
 }
+
+/// Weak forwarder so the `CADisplayLink` (retained by the run loop) does not
+/// retain `HybridPerpDepthBars`, allowing `deinit` to invalidate the link.
+private final class DisplayLinkProxy {
+  weak var owner: HybridPerpDepthBars?
+  init(_ owner: HybridPerpDepthBars) { self.owner = owner }
+  @objc func tick(_ link: CADisplayLink) { owner?.handleTick(link) }
+}

package/ios/HybridPerpSideRatio.swift

@@ -1,7 +1,11 @@
 import Foundation
 import UIKit
 
-/// Two horizontal segments whose widths animate to the bid/ask ratio.
+/// Two horizontal segments whose widths ease to the bid/ask ratio.
+///
+/// Animation model mirrors the depth bars: a `CADisplayLink` continuously eases
+/// the split fraction toward its latest target (short fixed exponential
+/// smoothing). New data just retargets; the link stops once settled.
 final class HybridPerpSideRatio: HybridPerpSideRatioSpec {
 
   // MARK: - HybridView
@@ -11,12 +15,19 @@ final class HybridPerpSideRatio: HybridPerpSideRatioSpec {
   private let askLayer = CALayer()
   private var hasLaidOut = false
 
+  // MARK: - Continuous-easing state (bid share of the available width, 0...1)
+  private var currentSplit: CGFloat = 0.5
+  private var targetSplit: CGFloat = 0.5
+  private var displayLink: CADisplayLink?
+  private var lastTick: CFTimeInterval = 0
+
   // MARK: - Props
   var bidPercentage: Double = 50 { didSet { scheduleLayout() } }
   var askPercentage: Double = 50 { didSet { scheduleLayout() } }
   var segmentHeight: Double = 4 { didSet { scheduleLayout() } }
   var cornerRadius: Double = 999 { didSet { scheduleLayout() } }
   var gap: Double = 2 { didSet { scheduleLayout() } }
+  /// Kept for OS "reduce motion" accessibility only — NOT a caller on/off knob.
   var reducedMotion: Bool = false { didSet { scheduleLayout() } }
 
   var longColor: String = "" {
@@ -43,6 +54,10 @@ final class HybridPerpSideRatio: HybridPerpSideRatioSpec {
     }
   }
 
+  deinit {
+    stopDisplayLink()
+  }
+
   private func scheduleLayout() {
     view.setNeedsLayout()
   }
@@ -52,67 +67,88 @@ final class HybridPerpSideRatio: HybridPerpSideRatioSpec {
     guard bounds.width > 0 else { return }
 
     let h = CGFloat(segmentHeight)
-    let y = (bounds.height - h) / 2
-    let g = CGFloat(gap)
-    let available = max(bounds.width - g, 0)
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    bidLayer.cornerRadius = min(CGFloat(cornerRadius), h / 2)
+    askLayer.cornerRadius = min(CGFloat(cornerRadius), h / 2)
+    CATransaction.commit()
 
     let bid = max(bidPercentage, 1)
     let ask = max(askPercentage, 1)
-    let total = bid + ask
-    let bidW = available * CGFloat(bid / total)
-    let askW = available - bidW
-    let radius = CGFloat(cornerRadius)
-
-    let bidFrame = CGRect(x: 0, y: y, width: bidW, height: h)
-    let askFrame = CGRect(x: bidW + g, y: y, width: askW, height: h)
+    let target = CGFloat(bid / (bid + ask))
 
     let snap = !hasLaidOut || reducedMotion
-
-    CATransaction.begin()
-    CATransaction.setDisableActions(true)
-    bidLayer.cornerRadius = min(radius, h / 2)
-    askLayer.cornerRadius = min(radius, h / 2)
-    CATransaction.commit()
-
     if snap {
-      CATransaction.begin()
-      CATransaction.setDisableActions(true)
-      bidLayer.frame = bidFrame
-      askLayer.frame = askFrame
-      CATransaction.commit()
+      stopDisplayLink()
+      currentSplit = target
+      targetSplit = target
+      layoutSegments(currentSplit)
     } else {
-      animateFrame(layer: bidLayer, to: bidFrame)
-      animateFrame(layer: askLayer, to: askFrame)
+      targetSplit = target
+      layoutSegments(currentSplit) // apply current + any geometry change now
+      startDisplayLinkIfNeeded()
     }
     hasLaidOut = true
   }
 
-  private func animateFrame(layer: CALayer, to frame: CGRect) {
-    let duration = PerpTiming.sideRatioDurationMs / 1000.0
-    let timing = PerpTiming.easeOutCubic()
-
-    let fromBounds = layer.presentation()?.bounds ?? layer.bounds
-    let fromPos = layer.presentation()?.position ?? layer.position
-
-    let newBounds = CGRect(x: 0, y: 0, width: frame.width, height: frame.height)
-    let newPos = CGPoint(x: frame.midX, y: frame.midY)
-
-    layer.bounds = newBounds
-    layer.position = newPos
+  /// Lays both segment frames out from a split fraction (no implicit anim).
+  private func layoutSegments(_ split: CGFloat) {
+    let bounds = view.bounds
+    guard bounds.width > 0 else { return }
+    let h = CGFloat(segmentHeight)
+    let y = (bounds.height - h) / 2
+    let g = CGFloat(gap)
+    let available = max(bounds.width - g, 0)
+    let bidW = available * split
+    let askW = max(available - bidW, 0)
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    bidLayer.frame = CGRect(x: 0, y: y, width: bidW, height: h)
+    askLayer.frame = CGRect(x: bidW + g, y: y, width: askW, height: h)
+    CATransaction.commit()
+  }
 
-    let boundsAnim = CABasicAnimation(keyPath: "bounds")
-    boundsAnim.fromValue = NSValue(cgRect: fromBounds)
-    boundsAnim.toValue = NSValue(cgRect: newBounds)
-    boundsAnim.duration = duration
-    boundsAnim.timingFunction = timing
+  // MARK: - Continuous easing (display link)
+  private func startDisplayLinkIfNeeded() {
+    if displayLink != nil { return }
+    guard abs(targetSplit - currentSplit) > 0.0005 else { return }
+    lastTick = 0
+    let proxy = SideRatioLinkProxy(self)
+    let link = CADisplayLink(target: proxy, selector: #selector(SideRatioLinkProxy.tick(_:)))
+    link.add(to: .main, forMode: .common)
+    displayLink = link
+  }
 
-    let posAnim = CABasicAnimation(keyPath: "position")
-    posAnim.fromValue = NSValue(cgPoint: fromPos)
-    posAnim.toValue = NSValue(cgPoint: newPos)
-    posAnim.duration = duration
-    posAnim.timingFunction = timing
+  private func stopDisplayLink() {
+    displayLink?.invalidate()
+    displayLink = nil
+    lastTick = 0
+  }
 
-    layer.add(boundsAnim, forKey: "ratioBounds")
-    layer.add(posAnim, forKey: "ratioPos")
+  func handleTick(_ link: CADisplayLink) {
+    let now = link.timestamp
+    let dt = lastTick > 0 ? now - lastTick : link.duration
+    lastTick = now
+    let tau = PerpTiming.sideRatioSmoothingTauSeconds
+    let alpha = CGFloat(1 - exp(-max(dt, 0) / max(tau, 0.0001)))
+
+    let d = targetSplit - currentSplit
+    if abs(d) <= 0.0005 {
+      if currentSplit != targetSplit {
+        currentSplit = targetSplit
+        layoutSegments(currentSplit)
+      }
+      stopDisplayLink()
+      return
+    }
+    currentSplit += d * alpha
+    layoutSegments(currentSplit)
   }
 }
+
+/// Weak forwarder so the `CADisplayLink` does not retain `HybridPerpSideRatio`.
+private final class SideRatioLinkProxy {
+  weak var owner: HybridPerpSideRatio?
+  init(_ owner: HybridPerpSideRatio) { self.owner = owner }
+  @objc func tick(_ link: CADisplayLink) { owner?.handleTick(link) }
+}

package/ios/PerpColorParser.swift

@@ -75,6 +75,17 @@ enum PerpTiming {
   static let depthBarDurationMs: Double = 260
   static let sideRatioDurationMs: Double = 300
 
+  /// Exponential-smoothing time constant (seconds) for the continuous,
+  /// frame-driven depth-bar easing. Each frame the on-screen value moves a
+  /// fraction `1 - exp(-dt / tau)` toward the latest target, so the bar always
+  /// glides toward the newest data instead of restarting a fixed-length anim
+  /// per tick. ~63% of any change covered in `tau`, ~95% in `3*tau`.
+  static let depthBarSmoothingTauSeconds: Double = 0.10
+
+  /// Same continuous-easing time constant for the bid/ask side-ratio bar. A
+  /// touch larger than the depth bars since it changes more slowly.
+  static let sideRatioSmoothingTauSeconds: Double = 0.12
+
   static func easeOutCubic() -> CAMediaTimingFunction {
     CAMediaTimingFunction(controlPoints: 0.33, 1, 0.68, 1)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-perp-depth-bar",
-  "version": "3.0.42",
+  "version": "3.0.45",
   "description": "react-native-perp-depth-bar",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",