react-native-smooth-clip-view 0.4.5 → 0.5.0

package/ios/SmoothClipRegistry.mm

@@ -1,5 +1,6 @@
 #import "SmoothClipViewRegistry.h"
 
+#import "SmoothClipBackdropView.h"
 #import "SmoothClipView.h"
 
 #import <React/RCTUtils.h>
@@ -57,6 +58,21 @@
 - (void)smoothClipClearVelocitySamples;
 @end
 
+@interface SmoothClipBackdropView (Registry)
+- (CGPoint)smoothClipBackdropCurrentTranslation;
+- (void)smoothClipApplyBackdrop:(CGPoint)translation;
+- (BOOL)smoothClipAnimateBackdropTo:(CGPoint)target
+                             timing:(smoothclip::TimingAnimation)timing
+                    sharedBeginTime:(CFTimeInterval)sharedBeginTime;
+- (BOOL)smoothClipAnimateBackdropTo:(CGPoint)target
+                             spring:(smoothclip::SpringAnimation)spring
+                    sharedBeginTime:(CFTimeInterval)sharedBeginTime;
+- (void)smoothClipCancelBackdropUsingTarget:(BOOL)useTarget;
+- (BOOL)smoothClipPauseBackdropAtMediaTime:(CFTimeInterval)mediaTime;
+- (BOOL)smoothClipResumeBackdropAtMediaTime:(CFTimeInterval)mediaTime
+                                  catchUpBy:(CFTimeInterval)catchUp;
+@end
+
 namespace smoothclip {
 namespace {
 
@@ -91,6 +107,9 @@ struct DriverState {
   bool hasLatest = false;
   Ownership ownership = Ownership::Interactive;
   std::vector<ViewKey> views;
+  // Backdrop views bound to the driver: translated by the presentation's
+  // backdrop channel on every write and animated on every run's epoch.
+  std::vector<ViewKey> backdrops;
   std::optional<ActiveAnimation> animation;
   // Set by destroyDriver while views are still registered (StrictMode effect
   // replay, hosts mounted in another subtree). The entry is erased when the
@@ -116,8 +135,19 @@ struct GroupState {
   std::unordered_set<uint64_t> remainingDriverIds;
   bool finished = true;
   bool mutating = false;
+  // Media time the caller's UI frame was stamped with; 0 when none was given.
+  CFTimeInterval beginTimeHint = 0;
 };
 
+// A frame stamp sits at most one frame ahead of the commit that carries it.
+// Anything further ahead is not a frame stamp and must not hold the run.
+// Behind the commit it is trusted only within the same window the Android
+// frame loop uses (kStartStampSanityWindowS): a group held pending longer than
+// that (a host that could not display, the app inactive) or a stamp from a
+// rescaled clock (Slow Animations) would otherwise begin fully elapsed and
+// snap to its target.
+constexpr CFTimeInterval kMaxBeginTimeLeadS = 0.25;
+
 std::unordered_map<uint64_t, DriverState> &registry() {
   static std::unordered_map<uint64_t, DriverState> value;
   return value;
@@ -199,6 +229,7 @@ void tryStartGroup(int32_t groupId);
 void finishGroupForHostLoss(int32_t groupId);
 DriverSnapshot snapshotForDriver(uint64_t driverId);
 SmoothClipView *viewForKey(ViewKey key);
+SmoothClipBackdropView *backdropForKey(ViewKey key);
 
 bool animationNeedsForegroundReconciliation(const DriverState &state) {
   if (!state.animation.has_value()) return false;
@@ -248,6 +279,9 @@ bool pauseSpringForInactivity(
         smoothClipPauseSpringAnimation:animation.animationId
                            atMediaTime:mediaTime] && paused;
   }
+  for (const ViewKey key : state.backdrops) {
+    [backdropForKey(key) smoothClipPauseBackdropAtMediaTime:mediaTime];
+  }
   if (!paused) animation.needsForegroundReconciliation = true;
   return paused;
 }
@@ -268,6 +302,10 @@ bool resumeSpringAfterInactivity(
                             atMediaTime:mediaTime
                              catchUpBy:catchUp] && resumed;
   }
+  for (const ViewKey key : state.backdrops) {
+    [backdropForKey(key) smoothClipResumeBackdropAtMediaTime:mediaTime
+                                                   catchUpBy:catchUp];
+  }
   if (!resumed) animation.needsForegroundReconciliation = true;
   return resumed;
 }
@@ -328,6 +366,83 @@ SmoothClipView *viewForKey(ViewKey key) {
   return (__bridge SmoothClipView *)(reinterpret_cast<void *>(key));
 }
 
+ViewKey keyForBackdrop(SmoothClipBackdropView *view) {
+  return reinterpret_cast<ViewKey>((__bridge void *)view);
+}
+
+SmoothClipBackdropView *backdropForKey(ViewKey key) {
+  return (__bridge SmoothClipBackdropView *)(reinterpret_cast<void *>(key));
+}
+
+CGPoint backdropTranslation(const Presentation &presentation) {
+  return CGPointMake(
+      presentation.backdropTranslateX, presentation.backdropTranslateY);
+}
+
+// The clip host knows nothing of the backdrop channel, so a presentation
+// read back from it carries none. A bound backdrop's visible translation is
+// the truth; without one, the driver's model (a pending run's start, else the
+// latest target).
+void overlayBackdrop(const DriverState &state, Presentation &presentation) {
+  if (!state.backdrops.empty()) {
+    const CGPoint translation = [backdropForKey(state.backdrops.front())
+        smoothClipBackdropCurrentTranslation];
+    presentation.backdropTranslateX = translation.x;
+    presentation.backdropTranslateY = translation.y;
+    return;
+  }
+  const Presentation &model =
+      state.animation.has_value() && !state.animation->started
+      ? state.animation->start
+      : state.latest;
+  presentation.backdropTranslateX = model.backdropTranslateX;
+  presentation.backdropTranslateY = model.backdropTranslateY;
+}
+
+void applyBackdrops(const DriverState &state, const Presentation &presentation) {
+  const CGPoint translation = backdropTranslation(presentation);
+  for (const ViewKey key : state.backdrops) {
+    [backdropForKey(key) smoothClipApplyBackdrop:translation];
+  }
+}
+
+void cancelBackdrops(const DriverState &state, bool useTarget) {
+  for (const ViewKey key : state.backdrops) {
+    [backdropForKey(key) smoothClipCancelBackdropUsingTarget:useTarget];
+  }
+}
+
+// Freezes every bound backdrop where it is and reads the channel back into
+// the frozen presentation.
+void freezeBackdropsInto(const DriverState &state, Presentation &presentation) {
+  cancelBackdrops(state, false);
+  overlayBackdrop(state, presentation);
+}
+
+// Runs the pending animation's backdrop channel on every bound backdrop, on
+// the same epoch as the clip's group. An inherited spring velocity was
+// resolved once by the registry before dispatch (resolvedSpringVelocity), so
+// `active.spring` carries the same trajectory the clip host runs.
+void installBackdropAnimations(
+    const DriverState &state,
+    CFTimeInterval sharedBeginTime) {
+  if (!state.animation.has_value() || state.backdrops.empty()) return;
+  const ActiveAnimation &active = *state.animation;
+  const CGPoint target = backdropTranslation(state.latest);
+  for (const ViewKey key : state.backdrops) {
+    SmoothClipBackdropView *backdrop = backdropForKey(key);
+    if (active.kind == AnimationKind::Timing) {
+      [backdrop smoothClipAnimateBackdropTo:target
+                                     timing:active.timing
+                            sharedBeginTime:sharedBeginTime];
+    } else {
+      [backdrop smoothClipAnimateBackdropTo:target
+                                     spring:active.spring
+                            sharedBeginTime:sharedBeginTime];
+    }
+  }
+}
+
 bool shouldReduceMotion(int32_t setting) {
   return setting == 1 ||
       (setting == 0 && UIAccessibilityIsReduceMotionEnabled());
@@ -468,6 +583,7 @@ Presentation canonicalFrozenPresentation(
   if (!hasCanonical && hasParticipantFallback) {
     canonical = participantFallback;
   }
+  freezeBackdropsInto(state, canonical);
   return canonical;
 }
 
@@ -478,7 +594,9 @@ Presentation canonicalVisiblePresentation(const DriverState &state) {
   for (const ViewKey key : state.views) {
     SmoothClipView *candidate = viewForKey(key);
     if ([candidate smoothClipIsJoinable]) {
-      return [candidate smoothClipCurrentPresentation];
+      Presentation visible = [candidate smoothClipCurrentPresentation];
+      overlayBackdrop(state, visible);
+      return visible;
     }
   }
   return state.latest;
@@ -554,11 +672,13 @@ std::vector<DriverSnapshot> cancelGroupInternal(
       for (const ViewKey key : state.views) {
         [viewForKey(key) smoothClipCancelAnimationUsingTarget:YES];
       }
+      cancelBackdrops(state, true);
       if (wasPending) {
         for (const ViewKey key : state.views) {
           [viewForKey(key) smoothClipApplyPresentation:resolved
                                   recordVelocitySample:NO];
         }
+        applyBackdrops(state, resolved);
       }
     } else {
       resolved = canonicalFrozenPresentation(state);
@@ -614,6 +734,7 @@ void cancelActive(
   for (const ViewKey key : state.views) {
     [viewForKey(key) smoothClipCancelAnimationUsingTarget:useTarget];
   }
+  cancelBackdrops(state, useTarget);
   emitCompletion(driverId, state, animationId, false);
 }
 
@@ -628,6 +749,7 @@ void finishStandaloneAtTarget(uint64_t driverId, DriverState &state) {
   for (const ViewKey key : state.views) {
     [viewForKey(key) smoothClipCancelAnimationUsingTarget:YES];
   }
+  cancelBackdrops(state, true);
   state.ownership = Ownership::Interactive;
   emitCompletion(driverId, state, animationId, true);
 }
@@ -646,6 +768,7 @@ void finishIfNoInstalledParticipants(uint64_t driverId, DriverState &state) {
   for (const ViewKey key : state.views) {
     [viewForKey(key) smoothClipCancelAnimationUsingTarget:YES];
   }
+  cancelBackdrops(state, true);
   state.ownership = Ownership::Interactive;
   emitCompletion(driverId, state, animationId, finished);
 }
@@ -662,6 +785,7 @@ void applyPresentation(
     [viewForKey(key) smoothClipApplyPresentation:presentation
                               recordVelocitySample:recordVelocitySample];
   }
+  applyBackdrops(state, presentation);
 }
 
 void prepareAnimation(
@@ -753,6 +877,7 @@ void startPendingAnimation(DriverState &state) {
     [participant smoothClipApplyPresentation:start recordVelocitySample:NO];
     installPendingAnimation(state, participant, key, start);
   }
+  installBackdropAnimations(state, 0);
 }
 
 void tryStartGroup(int32_t groupId) {
@@ -773,7 +898,18 @@ void tryStartGroup(int32_t groupId) {
     }
   }
 
-  const CFTimeInterval sharedBeginTime = CACurrentMediaTime();
+  // Anchor the run to the UI frame that started it when JS stamped one
+  // (Reanimated's target vsync): a `withTiming` begun in that same frame and
+  // this Core Animation run then trace one epoch, instead of the run leading
+  // by the rest of the frame. A recent stale stamp (a run held pending until
+  // its host could display) starts partway through, as that JS clock did; one
+  // outside the sanity window starts now.
+  const CFTimeInterval now = CACurrentMediaTime();
+  const CFTimeInterval hint = groupIterator->second.beginTimeHint;
+  const CFTimeInterval sharedBeginTime =
+      hint > 0 && hint <= now + kMaxBeginTimeLeadS &&
+          hint >= now - kStartStampSanityWindowS
+      ? hint : now;
   [CATransaction begin];
   [CATransaction setDisableActions:YES];
   for (const uint64_t driverId : driverIds) {
@@ -788,6 +924,7 @@ void tryStartGroup(int32_t groupId) {
       installPendingAnimation(
           state, participant, key, start, sharedBeginTime);
     }
+    installBackdropAnimations(state, sharedBeginTime);
   }
   [CATransaction commit];
 }
@@ -947,6 +1084,7 @@ void registerView(
     state.views.push_back(key);
   }
   [view smoothClipApplyPresentation:visible recordVelocitySample:NO];
+  applyBackdrops(state, visible);
   if (startsPendingRun) {
     startPendingAnimation(state);
   }
@@ -1002,7 +1140,45 @@ void unregisterView(uint64_t driverId, SmoothClipView *view) {
   state.views.erase(
       std::remove(state.views.begin(), state.views.end(), key),
       state.views.end());
-  if (state.destroyed && state.views.empty()) registry().erase(iterator);
+  if (state.destroyed && state.views.empty() && state.backdrops.empty()) {
+    registry().erase(iterator);
+  }
+}
+
+void registerBackdropView(uint64_t driverId, SmoothClipBackdropView *view) {
+  NSCAssert(NSThread.isMainThread, @"SmoothClip registry is main-thread only");
+  auto &state = registry()[driverId];
+  const ViewKey key = keyForBackdrop(view);
+  if (std::find(state.backdrops.begin(), state.backdrops.end(), key) !=
+      state.backdrops.end()) {
+    return;
+  }
+  // Adopt the driver's current value: a pending run's start, an already
+  // bound backdrop's visible value mid-run, else the model. A backdrop bound
+  // while a run is in flight follows from the next run.
+  Presentation visible =
+      state.animation.has_value() && !state.animation->started
+      ? state.animation->start
+      : state.latest;
+  if (!state.backdrops.empty()) overlayBackdrop(state, visible);
+  state.backdrops.push_back(key);
+  if (state.hasLatest) {
+    [view smoothClipApplyBackdrop:backdropTranslation(visible)];
+  }
+}
+
+void unregisterBackdropView(uint64_t driverId, SmoothClipBackdropView *view) {
+  NSCAssert(NSThread.isMainThread, @"SmoothClip registry is main-thread only");
+  auto iterator = registry().find(driverId);
+  if (iterator == registry().end()) return;
+  DriverState &state = iterator->second;
+  const ViewKey key = keyForBackdrop(view);
+  state.backdrops.erase(
+      std::remove(state.backdrops.begin(), state.backdrops.end(), key),
+      state.backdrops.end());
+  if (state.destroyed && state.views.empty() && state.backdrops.empty()) {
+    registry().erase(iterator);
+  }
 }
 
 void setPresentation(
@@ -1325,7 +1501,8 @@ int32_t createGroupAnimation(
     SpringAnimation spring,
     double durationMs,
     int32_t reduceMotion,
-    int32_t completionTag) {
+    int32_t completionTag,
+    double startedAtHintS) {
   std::vector<Presentation> resolvedStarts;
   bool reduced = false;
   if (!NSThread.isMainThread || controllerId == 0 ||
@@ -1377,6 +1554,9 @@ int32_t createGroupAnimation(
       driverIds,
       std::unordered_set<uint64_t>(driverIds.begin(), driverIds.end()),
   };
+  if (std::isfinite(startedAtHintS) && startedAtHintS > 0) {
+    group.beginTimeHint = startedAtHintS;
+  }
   groupRegistry().emplace(groupId, std::move(group));
 
   for (std::size_t entryIndex = 0; entryIndex < entries.size(); entryIndex += 1) {
@@ -1420,7 +1600,6 @@ int32_t animateTimingGroup(
     TimingAnimation animation,
     int32_t completionTag,
     double startedAtHintS) {
-  (void)startedAtHintS;
   return createGroupAnimation(
       controllerId,
       std::move(entries),
@@ -1429,7 +1608,8 @@ int32_t animateTimingGroup(
       {},
       animation.durationMs,
       animation.reduceMotion,
-      completionTag);
+      completionTag,
+      startedAtHintS);
 }
 
 int32_t animateSpringGroup(
@@ -1438,7 +1618,6 @@ int32_t animateSpringGroup(
     SpringAnimation animation,
     int32_t completionTag,
     double startedAtHintS) {
-  (void)startedAtHintS;
   return createGroupAnimation(
       controllerId,
       std::move(entries),
@@ -1447,7 +1626,8 @@ int32_t animateSpringGroup(
       animation,
       0,
       animation.reduceMotion,
-      completionTag);
+      completionTag,
+      startedAtHintS);
 }
 
 std::vector<DriverSnapshot> cancelAnimationGroup(
@@ -1544,6 +1724,7 @@ int32_t animateTiming(
       state.animation->participants.insert(key);
     }
   }
+  installBackdropAnimations(state, 0);
   return animationId;
 }
 
@@ -1633,6 +1814,7 @@ int32_t animateSpring(
       state.animation->participants.insert(key);
     }
   }
+  installBackdropAnimations(state, 0);
   return animationId;
 }
 
@@ -1709,6 +1891,7 @@ CancelResult cancelAnimation(
         [viewForKey(key) smoothClipApplyPresentation:target
                                 recordVelocitySample:NO];
       }
+      applyBackdrops(state, target);
     }
     state.ownership = Ownership::Interactive;
     return {true, target};
@@ -1733,7 +1916,7 @@ void destroyDriver(uint64_t driverId) {
   for (const ViewKey key : state.views) {
     [viewForKey(key) smoothClipClearVelocitySamples];
   }
-  if (state.views.empty()) {
+  if (state.views.empty() && state.backdrops.empty()) {
     registry().erase(iterator);
   } else {
     // Views can outlive the hook briefly (StrictMode effect replay, hosts in

package/ios/SmoothClipTurboModule.cpp

@@ -5,12 +5,13 @@
 #include "SmoothClipRegistrySnapshot.h"
 
 #include <cmath>
+#include <limits>
 #include <utility>
 
 namespace facebook::react {
 namespace {
 
-constexpr size_t kPresentationStride = 23;
+constexpr size_t kPresentationStride = 25;
 constexpr size_t kSnapshotStride = kPresentationStride + 1;
 constexpr size_t kMotionEntryStride = kPresentationStride * 2 + 2;
 
@@ -67,7 +68,9 @@ smoothclip::Presentation makePresentation(
     double shadowBlurRadius = 0,
     double shadowSpreadDistance = 0,
     double rotation = 0,
-    double opacity = 1) {
+    double opacity = 1,
+    double backdropTranslateX = 0,
+    double backdropTranslateY = 0) {
   const bool uniform = topLeftRadius == topRightRadius &&
       topLeftRadius == bottomRightRadius &&
       topLeftRadius == bottomLeftRadius;
@@ -85,7 +88,7 @@ smoothclip::Presentation makePresentation(
       contentScale,
       {shadowEnabled, shadowRed, shadowGreen, shadowBlue, shadowAlpha,
        shadowOffsetX, shadowOffsetY, shadowBlurRadius, shadowSpreadDistance},
-      rotation, opacity};
+      rotation, opacity, backdropTranslateX, backdropTranslateY};
 }
 
 bool finitePresentation(const smoothclip::Presentation &presentation) {
@@ -101,6 +104,8 @@ bool finitePresentation(const smoothclip::Presentation &presentation) {
       std::isfinite(presentation.contentScale) &&
       presentation.contentScale > 0 &&
       std::isfinite(presentation.rotation) && std::isfinite(presentation.opacity) &&
+      std::isfinite(presentation.backdropTranslateX) &&
+      std::isfinite(presentation.backdropTranslateY) &&
       std::isfinite(presentation.shadow.red) &&
       std::isfinite(presentation.shadow.green) &&
       std::isfinite(presentation.shadow.blue) &&
@@ -122,10 +127,14 @@ bool presentationAt(
     size_t offset,
     smoothclip::Presentation &result) {
   double values[kPresentationStride];
+  // One length read for the whole packet: `size` is a JSI call of its own,
+  // and this runs per clip per drag frame.
+  if (offset + kPresentationStride > array.size(runtime)) return false;
   for (size_t index = 0; index < kPresentationStride; index += 1) {
-    if (!numberAt(runtime, array, offset + index, values[index])) {
-      return false;
-    }
+    const jsi::Value value = array.getValueAtIndex(runtime, offset + index);
+    if (!value.isNumber()) return false;
+    values[index] = value.asNumber();
+    if (!std::isfinite(values[index])) return false;
   }
   const int32_t curveCode = static_cast<int32_t>(values[8]);
   if (values[8] != curveCode || !validCurveCode(curveCode) ||
@@ -145,7 +154,8 @@ bool presentationAt(
       values[11],
       values[12] == 1,
       values[13], values[14], values[15], values[16],
-      values[17], values[18], values[19], values[20], values[21], values[22]);
+      values[17], values[18], values[19], values[20], values[21], values[22],
+      values[23], values[24]);
   return finitePresentation(result);
 }
 
@@ -187,6 +197,8 @@ void writePresentation(
   result.setValueAtIndex(runtime, offset + 20, presentation.shadow.spreadDistance);
   result.setValueAtIndex(runtime, offset + 21, presentation.rotation);
   result.setValueAtIndex(runtime, offset + 22, presentation.opacity);
+  result.setValueAtIndex(runtime, offset + 23, presentation.backdropTranslateX);
+  result.setValueAtIndex(runtime, offset + 24, presentation.backdropTranslateY);
 }
 
 jsi::Array snapshotArray(
@@ -387,6 +399,16 @@ bool SmoothClipTurboModule::setClipPresentationBatch(
   return smoothclip::setPresentationBatch(parsed);
 }
 
+// JS stamps a run with Reanimated's frame timestamp in milliseconds on the
+// CACurrentMediaTime base; the registry takes seconds. Anything else means
+// "start now".
+static double startedAtHintSeconds(double startTimestampMs) {
+  if (!std::isfinite(startTimestampMs) || startTimestampMs <= 0) {
+    return std::numeric_limits<double>::quiet_NaN();
+  }
+  return startTimestampMs / 1000.0;
+}
+
 int32_t SmoothClipTurboModule::animateTimingGroup(
     jsi::Runtime &runtime,
     double controllerId,
@@ -399,7 +421,6 @@ int32_t SmoothClipTurboModule::animateTimingGroup(
     int32_t reduceMotion,
     int32_t completionTag,
     double startTimestamp) {
-  (void)startTimestamp;
   std::vector<smoothclip::GroupMotionEntry> parsed;
   if (!validDriverId(controllerId) ||
       !fixedGroupEntriesAt(runtime, entries, parsed) ||
@@ -417,7 +438,8 @@ int32_t SmoothClipTurboModule::animateTimingGroup(
        controlPoint2X,
        controlPoint2Y,
        reduceMotion},
-      completionTag);
+      completionTag,
+      startedAtHintSeconds(startTimestamp));
 }
 
 int32_t SmoothClipTurboModule::animateSpringGroup(
@@ -432,7 +454,6 @@ int32_t SmoothClipTurboModule::animateSpringGroup(
     int32_t reduceMotion,
     int32_t completionTag,
     double startTimestamp) {
-  (void)startTimestamp;
   std::vector<smoothclip::GroupMotionEntry> parsed;
   if (!validDriverId(controllerId) ||
       !fixedGroupEntriesAt(runtime, entries, parsed) ||
@@ -452,7 +473,8 @@ int32_t SmoothClipTurboModule::animateSpringGroup(
        false,
        reduceMotion,
        energyThreshold},
-      completionTag);
+      completionTag,
+      startedAtHintSeconds(startTimestamp));
 }
 
 jsi::Array SmoothClipTurboModule::cancelAnimationGroup(