@rafaelaugusto/jolt 0.1.0-beta.7 → 0.1.0-beta.9

package/platforms/ios/src/JoltInteractiveAnimation.m

@@ -0,0 +1,123 @@
+#import "JoltInteractiveAnimation.h"
+#import <QuartzCore/QuartzCore.h>
+
+@interface JoltInteractiveAnimation ()
+@property(nonatomic, weak) UIView *view;
+@property(nonatomic, copy) NSArray<CALayer *> *layers;
+@property(nonatomic, copy) NSString *keyPath;
+@property(nonatomic, copy) NSArray<NSNumber *> *values;
+@property(nonatomic, copy) NSArray<NSNumber *> *times;
+@property(nonatomic) double duration, delay, repeats, anchor, offset, finalValue;
+@property(nonatomic) BOOL reverse, paused, stopped;
+@property(nonatomic, copy, nullable) void (^completion)(BOOL);
+@end
+
+@implementation JoltInteractiveAnimation
+static NSMapTable<UIView *, NSMutableDictionary<NSString *, JoltInteractiveAnimation *> *> *views;
+static NSMutableSet<JoltInteractiveAnimation *> *playing;
+static CADisplayLink *displayLink;
+
++ (void)initialize {
+    if (self != [JoltInteractiveAnimation class]) return;
+    views = [NSMapTable weakToStrongObjectsMapTable];
+    playing = [NSMutableSet new];
+}
++ (void)schedule {
+    if (playing.count && !displayLink) {
+        displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(tick:)];
+        if (@available(iOS 15.0, *)) {
+            float maximum = MIN(120, UIScreen.mainScreen.maximumFramesPerSecond);
+            displayLink.preferredFrameRateRange = CAFrameRateRangeMake(MIN(80, maximum), maximum, maximum);
+        }
+        [displayLink addToRunLoop:NSRunLoop.mainRunLoop forMode:NSRunLoopCommonModes];
+    } else if (!playing.count && displayLink) {
+        [displayLink invalidate]; displayLink = nil;
+    }
+}
++ (void)tick:(CADisplayLink *)link {
+    for (JoltInteractiveAnimation *track in playing.allObjects) {
+        if (track.stopped || track.paused) continue;
+        if (!track.view) { [track finish:NO]; continue; }
+        double elapsed = track.elapsed;
+        [track apply:elapsed];
+        if (isfinite(track.repeats) && elapsed >= track.delay + track.duration * (track.repeats + 1))
+            [track finish:YES];
+    }
+}
++ (instancetype)startView:(UIView *)view layers:(NSArray<CALayer *> *)layers keyPath:(NSString *)keyPath
+                  values:(NSArray<NSNumber *> *)values times:(NSArray<NSNumber *> *)times
+                duration:(double)duration delay:(double)delay repeat:(double)repeat
+                 reverse:(BOOL)reverse finalValue:(double)finalValue
+               startedAt:(double)startedAt completion:(void (^)(BOOL))completion {
+    JoltInteractiveAnimation *track = [self new];
+    track.view = view; track.layers = layers; track.keyPath = keyPath; track.values = values; track.times = times;
+    track.duration = MAX(1, duration); track.delay = delay; track.repeats = repeat;
+    track.reverse = reverse; track.finalValue = finalValue;
+    track.anchor = startedAt; track.completion = completion;
+    NSMutableDictionary *properties = [views objectForKey:view];
+    if (!properties) { properties = [NSMutableDictionary new]; [views setObject:properties forKey:view]; }
+    JoltInteractiveAnimation *previous = properties[keyPath];
+    [previous cancel];
+    // Cancelling the last property can remove the dictionary from the weak map.
+    [views setObject:properties forKey:view];
+    properties[keyPath] = track;
+    [track apply:track.elapsed];
+    [playing addObject:track]; [self schedule];
+    return track;
+}
+- (double)elapsed { return self.offset + (self.paused ? 0 : CACurrentMediaTime() * 1000 - self.anchor); }
+- (double)value:(double)elapsed {
+    double total = self.delay + self.duration * (self.repeats + 1);
+    if (isfinite(total) && elapsed >= total) return self.finalValue;
+    double time = MAX(0, elapsed - self.delay);
+    double iteration = floor(time / self.duration);
+    double progress = fmod(time, self.duration) / self.duration;
+    if (self.reverse && fmod(iteration, 2) >= 1) progress = 1 - progress;
+    NSUInteger low = 0, high = self.times.count - 1;
+    while (low + 1 < high) {
+        NSUInteger middle = (low + high) / 2;
+        if (self.times[middle].doubleValue <= progress) low = middle; else high = middle;
+    }
+    double start = self.times[low].doubleValue, end = self.times[high].doubleValue;
+    double fraction = end > start ? MIN(1, MAX(0, (progress - start) / (end - start))) : 1;
+    return self.values[low].doubleValue + (self.values[high].doubleValue - self.values[low].doubleValue) * fraction;
+}
+- (void)apply:(double)elapsed {
+    UIView *view = self.view;
+    if (!view || self.stopped) return;
+    double value = [self value:elapsed];
+    [CATransaction begin]; [CATransaction setDisableActions:YES];
+    if ([self.keyPath isEqualToString:@"opacity"]) view.alpha = value;
+    for (CALayer *layer in self.layers) [layer setValue:@(value) forKeyPath:self.keyPath];
+    [CATransaction commit];
+}
+- (void)control:(double)elapsed paused:(BOOL)paused {
+    if (self.stopped) return;
+    self.offset = elapsed; self.anchor = CACurrentMediaTime() * 1000; self.paused = paused;
+    [self apply:elapsed];
+    if (paused) [playing removeObject:self]; else [playing addObject:self];
+    [[self class] schedule];
+}
+- (void)finish:(BOOL)completed {
+    if (self.stopped) return;
+    self.stopped = YES;
+    [playing removeObject:self];
+    UIView *view = self.view;
+    NSMutableDictionary *properties = view ? [views objectForKey:view] : nil;
+    if (properties[self.keyPath] == self) [properties removeObjectForKey:self.keyPath];
+    if (view && !properties.count) [views removeObjectForKey:view];
+    void (^callback)(BOOL) = self.completion; self.completion = nil;
+    [[self class] schedule];
+    if (callback) callback(completed);
+}
+- (void)cancel { [self finish:NO]; }
++ (void)syncView:(UIView *)view excluding:(NSString *)keyPath {
+    for (JoltInteractiveAnimation *track in [views objectForKey:view].allValues)
+        if (![track.keyPath isEqualToString:keyPath]) [track apply:track.elapsed];
+}
++ (NSNumber *)valueForView:(UIView *)view keyPath:(NSString *)keyPath {
+    JoltInteractiveAnimation *track = [views objectForKey:view][keyPath];
+    return track ? [view.layer valueForKeyPath:keyPath] : nil;
+}
++ (NSUInteger)activeCount { return playing.count; }
+@end

package/platforms/ios/src/module.modulemap

@@ -1,5 +1,6 @@
 module JoltMotion {
     header "JoltImageEffect.h"
     header "JoltPhotoZoom.h"
+    header "JoltInteractiveAnimation.h"
     export *
 }

package/src/animate.ts

@@ -67,6 +67,15 @@ export function animate(
   animation: Keyframes | PresetName,
   options?: AnimateOptions | SpringName,
 ): PlaybackAnimation {
+  return prepareAnimation(target, animation, options)()
+}
+
+/** Validate and snapshot a complete animation before changing any view ownership. */
+export function prepareAnimation(
+  target: Target | readonly Target[],
+  animation: Keyframes | PresetName,
+  options?: AnimateOptions | SpringName,
+): () => PlaybackAnimation {
   const { keyframes, base, overrides, stagger, relative, haptic, path } = prepare(
     animation,
     options,
@@ -78,11 +87,8 @@ export function animate(
     for (const property of Object.keys(keyframes))
       if (isColorProperty(property)) validateColorTarget(view, property)
       else if (isDecorationProperty(property)) validateDecorationTarget(view, property)
-    return new ViewAnimation(
-      view,
-      plan(keyframes, base, overrides, 0, relative, path),
-      feedback,
-    )
+    const plans = plan(keyframes, base, overrides, 0, relative, path)
+    return () => new ViewAnimation(view, plans, feedback)
   }
 
   const views = target.map(toView)
@@ -100,9 +106,10 @@ export function animate(
       path,
     ),
   )
-  return playbackGroup(
-    views.map((view, index) => new ViewAnimation(view, plans[index]!, feedback, true)),
-  )
+  return () =>
+    playbackGroup(
+      views.map((view, index) => new ViewAnimation(view, plans[index]!, feedback, true)),
+    )
 }
 
 /** Starts at the current translation and slows down from a velocity in DIPs per second. */

package/src/drag-input.ts

@@ -0,0 +1,74 @@
+import { Utils, type PanGestureEventData, type View } from '@nativescript/core'
+import { getDriver } from './driver/index.js'
+
+interface Sample {
+  x: number
+  y: number
+  time: number
+}
+
+/** Android's raw coordinates avoid feedback from translating the touched view. */
+export class DragInput {
+  private samples: Sample[] = []
+  private lastMoved = 0
+  reset() {
+    this.samples = []
+    this.lastMoved = 0
+  }
+  read(event: PanGestureEventData, view: View) {
+    const ios = event.ios as UIPanGestureRecognizer | undefined
+    const android = event.android?.current as android.view.MotionEvent | undefined
+    const parent = view.parent?.nativeViewProtected ?? view.nativeViewProtected
+    const delta = ios
+      ? ios.translationInView(parent)
+      : { x: event.deltaX, y: event.deltaY }
+    const density = Utils.layout.getDisplayDensity()
+    const sample: Sample = android
+      ? {
+          x: android.getRawX() / density,
+          y: android.getRawY() / density,
+          time: Number(android.getEventTime()),
+        }
+      : { ...delta, time: getDriver().now() }
+    if (
+      Number.isFinite(sample.x) &&
+      Number.isFinite(sample.y) &&
+      Number.isFinite(sample.time)
+    ) {
+      const previous = this.samples.at(-1)
+      if (!previous || sample.x !== previous.x || sample.y !== previous.y)
+        this.lastMoved = sample.time
+      // Replace duplicate times (Android sends began + changed for the same event).
+      if (this.samples.at(-1)?.time === sample.time) this.samples.pop()
+      this.samples.push(sample)
+      while (this.samples.length > 2 && this.samples[1]!.time < sample.time - 100)
+        this.samples.shift()
+    }
+    const first = this.samples[0]
+    const elapsed = first ? sample.time - first.time : 0
+    // UIKit may retain its last movement velocity when the finger holds still
+    // before lifting. A stale velocity must not turn that hold into a fling.
+    const nativeVelocity = ios
+      ? sample.time - this.lastMoved > 100
+        ? { x: 0, y: 0 }
+        : ios.velocityInView(parent)
+      : undefined
+    const velocity = nativeVelocity ?? {
+      x: elapsed > 0 && elapsed <= 150 ? ((sample.x - first!.x) * 1000) / elapsed : 0,
+      y: elapsed > 0 && elapsed <= 150 ? ((sample.y - first!.y) * 1000) / elapsed : 0,
+    }
+    const action = android?.getActionMasked()
+    return {
+      x: delta.x,
+      y: delta.y,
+      velocityX: Number.isFinite(velocity.x) ? velocity.x : 0,
+      velocityY: Number.isFinite(velocity.y) ? velocity.y : 0,
+      cancelled:
+        event.state === 0 ||
+        action === 3 ||
+        action === 5 ||
+        action === 6 ||
+        (android ? android.getPointerCount() > 1 : (ios?.numberOfTouches ?? 1) > 1),
+    }
+  }
+}

package/src/drag-physics.ts

@@ -0,0 +1,110 @@
+import { solveDecay } from './decay.js'
+import { solveSpring, springPhysics } from './spring.js'
+
+export interface DragCurve {
+  type: 'drag'
+  velocity: number
+  friction: number
+  bounds: readonly [number, number]
+  snap?: readonly number[]
+  rubberband: boolean
+}
+
+export const clampDrag = (value: number, [min, max]: readonly [number, number]) =>
+  Math.max(min, Math.min(max, value))
+
+/** Bounded resistance; coordinates and the resistance length are DIPs. */
+export function resistDrag(
+  value: number,
+  bounds: readonly [number, number],
+  length: number,
+) {
+  const edge = clampDrag(value, bounds)
+  const distance = value - edge
+  return edge + (distance / (1 + Math.abs(distance) / length)) * 0.55
+}
+
+/** Recover the finger-space origin when grabbing an already rubberbanded pose. */
+export function resumeDrag(
+  value: number,
+  bounds: readonly [number, number],
+  length: number,
+) {
+  const edge = clampDrag(value, bounds)
+  const distance = value - edge
+  // A native edge spring or external owner can exceed the usual resistance range.
+  // Expand it for this gesture so every finite visible pose has a stable inverse.
+  length = Math.max(length, Math.abs(distance) * 4)
+  return { origin: edge + distance / (0.55 - Math.abs(distance) / length), length }
+}
+
+export function dragDestination(from: number, curve: DragCurve) {
+  const projected = solveDecay(from, curve.velocity, curve.friction, 0.25).to
+  if (curve.snap)
+    return curve.snap.reduce((best, point) =>
+      Math.abs(point - projected) < Math.abs(best - projected) ? point : best,
+    )
+  return clampDrag(projected, curve.bounds)
+}
+
+/** One precomputed motion. Native keyframes play both the coast and edge recovery. */
+export function solveDragRelease(from: number, curve: DragCurve) {
+  const to = dragDestination(from, curve)
+  const coast = solveDecay(from, curve.velocity, curve.friction, 0.25)
+  const edge = clampDrag(from, curve.bounds)
+  const springTo = (start: number, target: number, velocity: number) => {
+    const motion = solveSpring(
+      springPhysics({ duration: 500, bounce: 0 }),
+      start,
+      target,
+      velocity,
+      0.25,
+    )
+    const position = (time: number) => {
+      const value = time >= motion.duration ? target : motion.position(time)
+      return curve.rubberband ? value : clampDrag(value, curve.bounds)
+    }
+    return {
+      ...motion,
+      position,
+      velocity: (time: number) => {
+        const raw = motion.position(time)
+        return time >= motion.duration ||
+          (!curve.rubberband && raw !== clampDrag(raw, curve.bounds))
+          ? 0
+          : motion.velocity(time)
+      },
+    }
+  }
+  if (curve.snap || from !== edge)
+    return {
+      ...springTo(from, curve.snap ? to : edge, curve.velocity),
+      to: curve.snap ? to : edge,
+    }
+  if (to === coast.to) return coast
+
+  // Reach the boundary with the decay's actual velocity, then absorb that velocity.
+  const rate = -Math.log(curve.friction)
+  const collision = Math.max(
+    0,
+    -Math.log1p((-(to - from) * rate * 1000) / curve.velocity) / rate,
+  )
+  const recovery = springTo(to, to, coast.velocity(collision))
+  const duration = collision + (curve.rubberband ? recovery.duration : 0)
+  return {
+    to,
+    duration,
+    position: (time: number) =>
+      time >= duration
+        ? to
+        : time < collision
+          ? coast.position(time)
+          : recovery.position(time - collision),
+    velocity: (time: number) =>
+      time >= duration
+        ? 0
+        : time < collision
+          ? coast.velocity(time)
+          : recovery.velocity(time - collision),
+  }
+}