@rafaelaugusto/jolt 0.1.0-beta.12 → 0.1.0-beta.14

package/platforms/android/java/org/rafaelaugusto/jolt/ParticleSimulation.java

@@ -0,0 +1,114 @@
+package org.rafaelaugusto.jolt;
+
+/** Bounded, allocation-free particle state. Units are DIPs, seconds and degrees.
+ * Android supplies elapsed wall time; the same engine runs in deterministic JVM tests. */
+public final class ParticleSimulation {
+    public static final int MAX_PARTICLES = 10000;
+    public final int shape, source;
+    public final float size;
+    private final int[] palette;
+    private final double rate, lifetime, duration;
+    private final float velocity, velocityRange, angle, spread, gravity, spin, spinRange;
+    private final boolean fade;
+    private double[] births;
+    private float[] xs, ys, vxs, vys, rotations, spins;
+    private int[] colors;
+    private int live, peak;
+    private long scheduled, emitted, skipped;
+    private long random;
+    private double time;
+
+    public ParticleSimulation(int[] palette, int shape, int source, double rate,
+            double lifetimeMs, float size, float velocity, float velocityRange,
+            float angle, float spread, float gravity, float spin, float spinRange,
+            boolean fade, double durationMs, long seed) {
+        if (palette == null || palette.length == 0 || palette.length > 32 || shape < 0 || shape > 2 || source < 0 || source > 2)
+            throw new IllegalArgumentException("Invalid particle colors, shape or source");
+        if (!finite(rate) || rate <= 0 || rate > 50000 || !finite(lifetimeMs) || lifetimeMs < 1 || lifetimeMs > 60000
+                || !finite(durationMs) || (durationMs != -1 && (durationMs < 1 || durationMs > Integer.MAX_VALUE - lifetimeMs - 50))
+                || !finite(size) || size < 1 || size > 128 || !finite(velocity) || velocity < 0 || velocity > 10000
+                || !finite(velocityRange) || velocityRange < 0 || velocityRange > 10000
+                || !finite(angle) || Math.abs(angle) > 360 || !finite(spread) || spread < 0 || spread > 360
+                || !finite(gravity) || Math.abs(gravity) > 10000 || !finite(spin) || Math.abs(spin) > 3600
+                || !finite(spinRange) || spinRange < 0 || spinRange > 3600)
+            throw new IllegalArgumentException("Invalid particle settings");
+        this.palette = palette.clone();
+        this.shape = shape; this.source = source; this.rate = rate;
+        lifetime = lifetimeMs / 1000; duration = durationMs < 0 ? Double.POSITIVE_INFINITY : durationMs / 1000;
+        this.size = size; this.velocity = velocity; this.velocityRange = velocityRange;
+        this.angle = angle; this.spread = spread; this.gravity = gravity;
+        this.spin = spin; this.spinRange = spinRange; this.fade = fade;
+        random = seed == 0 ? 1 : seed;
+        double population = rate * Math.min(lifetime, duration);
+        if (population > MAX_PARTICLES + 0.000001) throw new IllegalArgumentException("Particle population exceeds 10000");
+        int capacity = Math.max(1, Math.min(MAX_PARTICLES, (int)Math.ceil(population)));
+        births = new double[capacity]; xs = new float[capacity]; ys = new float[capacity];
+        vxs = new float[capacity]; vys = new float[capacity]; rotations = new float[capacity];
+        spins = new float[capacity]; colors = new int[capacity];
+    }
+
+    private static boolean finite(double value) { return !Double.isNaN(value) && !Double.isInfinite(value); }
+    private float unit() {
+        // xorshift64*: deterministic internal seed, never part of the public JS contract.
+        random ^= random >>> 12; random ^= random << 25; random ^= random >>> 27;
+        return ((random * 2685821657736338717L) >>> 40) / 16777216f;
+    }
+    private float variation(float range) { return (unit() * 2 - 1) * range; }
+
+    /** Advance directly to the current time, skipping already-dead births after a stall.
+     * No backlog of expired particles and no integration steps proportional to missed frames. */
+    public void advance(double elapsedSeconds, float width, float height) {
+        if (births == null || !finite(elapsedSeconds)) return;
+        time = Math.max(time, Math.max(0, elapsedSeconds));
+        for (int i = live - 1; i >= 0; i--) {
+            if (time - births[i] >= lifetime - 0.000000001) {
+                int last = --live;
+                births[i] = births[last]; xs[i] = xs[last]; ys[i] = ys[last];
+                vxs[i] = vxs[last]; vys[i] = vys[last]; rotations[i] = rotations[last];
+                spins[i] = spins[last]; colors[i] = colors[last];
+            }
+        }
+        long until = (long)Math.floor(Math.min(time, duration) * rate + 0.0000001);
+        long dead = Math.min(until, (long)Math.floor(Math.max(0, time - lifetime) * rate + 0.0000001));
+        if (dead > scheduled) { skipped += dead - scheduled; scheduled = dead; }
+        // scheduled is monotonic; at most capacity particles can be alive in this interval.
+        while (scheduled < until) {
+            long index = ++scheduled;
+            if (live >= births.length) { skipped++; continue; }
+            int i = live++;
+            births[i] = index / rate;
+            xs[i] = source == 0 ? width * .5f : unit() * width;
+            ys[i] = source == 1 ? 0 : source == 2 ? height : height * .5f;
+            double direction = Math.toRadians(angle + variation(spread * .5f));
+            float speed = velocity + variation(velocityRange);
+            vxs[i] = (float)Math.cos(direction) * speed;
+            vys[i] = (float)Math.sin(direction) * speed;
+            rotations[i] = shape == 1 ? unit() * 360 : 0;
+            spins[i] = spin + variation(spinRange);
+            colors[i] = palette[(int)((index - 1) % palette.length)];
+            emitted++;
+        }
+        peak = Math.max(peak, live);
+    }
+
+    public float x(int i) { return xs[i] + vxs[i] * (float)(time - births[i]); }
+    public float y(int i) { float age = (float)(time - births[i]); return ys[i] + vys[i] * age + gravity * age * age * .5f; }
+    public float rotation(int i) { return rotations[i] + spins[i] * (float)(time - births[i]); }
+    public int color(int i) {
+        int color = colors[i];
+        if (!fade) return color;
+        int alpha = Math.round((color >>> 24) * (float)Math.max(0, 1 - (time - births[i]) / lifetime));
+        return (color & 0x00ffffff) | (alpha << 24);
+    }
+    public boolean finished() { return time >= duration + lifetime || (time >= duration && live == 0); }
+    public int live() { return live; }
+    public int peak() { return peak; }
+    public int capacity() { return births == null ? 0 : births.length; }
+    public long emitted() { return emitted; }
+    public long skipped() { return skipped; }
+    public double time() { return time; }
+    public void clear() {
+        live = 0;
+        births = null; xs = ys = vxs = vys = rotations = spins = null; colors = null;
+    }
+}

package/platforms/android/proguard-rules.pro

@@ -19,3 +19,5 @@
 -keep class org.rafaelaugusto.jolt.PhotoZoom$* { *; }
 -keep class org.rafaelaugusto.jolt.GradientLayer { *; }
 -keep class org.rafaelaugusto.jolt.GradientLayer$* { *; }
+-keep class org.rafaelaugusto.jolt.ParticleEmitter { *; }
+-keep class org.rafaelaugusto.jolt.ParticleEmitter$* { *; }

package/src/android-plugin.d.ts

@@ -1,4 +1,52 @@
 declare namespace org.rafaelaugusto.jolt {
+  class ParticleEmitter {
+    constructor(
+      target: android.view.View,
+      overlay: boolean,
+      colors: native.Array<number>,
+      shape: number,
+      source: number,
+      rate: number,
+      lifetimeMs: number,
+      size: number,
+      velocity: number,
+      velocityRange: number,
+      angle: number,
+      spread: number,
+      gravity: number,
+      spin: number,
+      spinRange: number,
+      fade: boolean,
+      durationMs: number,
+      listener: ParticleEmitter.Listener,
+    )
+    start(): void
+    refresh(cornerPixels: number): void
+    stop(): void
+    static getActiveCount(): number
+    isStopped(): boolean
+    getLiveCount(): number
+    getPeakCount(): number
+    getCapacity(): number
+    getEmittedCount(): number
+    getSkippedCount(): number
+    getFrameCount(): number
+    getDrawCount(): number
+    getWorkNanos(): number
+    getDrawNanos(): number
+    getDensity(): number
+    getTimeSeconds(): number
+    isObserving(): boolean
+    getOriginInWindow(): native.Array<number>
+    getParticle(index: number): native.Array<number>
+    getFrameIntervals(): native.Array<number>
+    getBounds(): android.graphics.Rect
+  }
+  namespace ParticleEmitter {
+    class Listener {
+      constructor(implementation: { onEnd(): void })
+    }
+  }
   class PhotoZoom {
     constructor(
       image: android.widget.ImageView,
@@ -116,6 +164,14 @@ declare namespace org.rafaelaugusto.jolt {
       reverse: boolean,
       listener: GradientLayer.Listener,
     ): void
+    control(elapsed: number, paused: boolean): void
+    isPlaying(): boolean
+    getGeometry(): native.Array<number>
+    getCorner(): number
+    getStops(): native.Array<number>
+    getColors(): native.Array<number>
+    getSampleCount(): number
+    dispose(): void
     cancel(): void
   }
   namespace GradientLayer {
@@ -209,3 +265,40 @@ declare namespace org.rafaelaugusto.jolt {
     }
   }
 }
+
+declare namespace org.rafaelaugusto.jolt {
+  class PropertySink extends java.lang.Object {
+    static scalar(target: any, getter: string, setter: string): PropertySink
+    getDimensions(): number
+    isAlive(): boolean
+    isCompiled(): boolean
+    read(): native.Array<number>
+    write(values: native.Array<number>): void
+    dispose(): void
+  }
+  class MapLibrePropertySink extends PropertySink {
+    constructor(target: any, camera: boolean)
+  }
+  class PropertyPlayer extends java.lang.Object {
+    constructor(
+      sink: PropertySink,
+      times: native.Array<number>,
+      values: native.Array<number>,
+      finalValue: native.Array<number>,
+      duration: number,
+      delay: number,
+      repeat: number,
+      reverse: boolean,
+      listener: PropertyPlayer.Listener,
+    )
+    static activeCount(): number
+    getFrames(): number
+    control(time: number, paused: boolean): void
+    cancel(): void
+  }
+  namespace PropertyPlayer {
+    class Listener extends java.lang.Object {
+      constructor(implementation: { onEnd(completed: boolean): void })
+    }
+  }
+}

package/src/animate.ts

@@ -29,6 +29,7 @@ import {
   detachBindings,
   isMotionValue,
   type MotionValue,
+  type ValueAnimationOptions,
 } from './motion-value.js'
 import { resolveHaptic, type Haptic } from './haptics.js'
 import { layerable } from './mixer.js'
@@ -77,8 +78,8 @@ interface Options {
 export function animate(
   value: MotionValue,
   to: number | readonly (number | null)[],
-  transition?: Transition | SpringName,
-): Animation
+  transition?: ValueAnimationOptions | SpringName,
+): PlaybackAnimation
 export function animate(
   target: Target | readonly Target[],
   animation: Keyframes | PresetName,
@@ -92,7 +93,7 @@ export function animate(
   if (isMotionValue(target))
     return asRoot(target).animate(
       animation as number | readonly (number | null)[],
-      options as Transition | SpringName | undefined,
+      options as ValueAnimationOptions | SpringName | undefined,
     )
   return prepareAnimation(
     target as Target | readonly Target[],
@@ -237,7 +238,7 @@ export function decay(
  * Stops all or selected properties at their current values. `scale` stops both axes.
  * A motion value stops where it is, and so do the views bound to it.
  */
-export function stop(value: MotionValue): void
+export function stop(value: MotionValue, options?: { layer?: string }): void
 export function stop(
   target: Target | readonly Target[],
   properties?: readonly KeyframeProperty[],
@@ -245,11 +246,16 @@ export function stop(
 ): void
 export function stop(
   target: Target | readonly Target[] | MotionValue,
-  properties?: readonly KeyframeProperty[],
+  properties?: readonly KeyframeProperty[] | { layer?: string },
   options?: { layer?: string },
 ) {
-  if (isMotionValue(target)) return asRoot(target).stop()
-  const expanded = properties?.flatMap<Property>((property) =>
+  if (isMotionValue(target))
+    return asRoot(target).stop((properties as { layer?: string } | undefined)?.layer)
+  if (properties && !Array.isArray(properties))
+    throw new TypeError('View properties must be an array.')
+  const expanded = (
+    properties as readonly KeyframeProperty[] | undefined
+  )?.flatMap<Property>((property) =>
     property === 'scale' ? ['scaleX', 'scaleY'] : [property],
   )
   for (const view of toViews(target as Target | readonly Target[]))

package/src/drag.ts

@@ -247,7 +247,7 @@ class DragController implements Drag {
   }
   get position(): DragPoint {
     const value = this.config.value
-    if (value) return { x: 0, y: 0, [this.config.axes[0]!]: value.raw() }
+    if (value) return { x: 0, y: 0, [this.config.axes[0]!]: value.base() }
     return { x: currentValue(this.view, 'x'), y: currentValue(this.view, 'y') }
   }
   cancel = () => {
@@ -338,7 +338,7 @@ class DragController implements Drag {
       this.blocked = false
       const value = this.config.value
       if (value) {
-        value.stop()
+        value.stopBase()
         this.origin = this.position
       } else {
         // Claim just the enabled axes, preserving the native presentation on takeover.
@@ -385,7 +385,7 @@ class DragController implements Drag {
           : clampDrag(raw, curve.bounds)
         if (axis === 'x') vx = input.velocityX * resistance
         else vy = input.velocityY * resistance
-        if (this.config.value) this.config.value.set(position[axis])
+        if (this.config.value) this.config.value.setBase(position[axis])
         else {
           stopBase(this.view, [axis])
           setBase(this.view, axis, position[axis])

package/src/driver/android-gradient.ts

@@ -28,8 +28,10 @@ export function androidGradient(
   }
   let stack: android.graphics.drawable.LayerDrawable | undefined
   let queued = false
+  let removed = false
 
   const wrap = () => {
+    if (removed) return
     const native = view.nativeViewProtected as android.view.View | undefined
     if (!native) return
     const corner = typeof view.borderRadius === 'number' ? view.borderRadius : 0
@@ -87,6 +89,9 @@ export function androidGradient(
         }),
       )
       return {
+        control(elapsed, paused) {
+          if (active) layer.control(Math.round(elapsed), paused)
+        },
         cancel() {
           if (!active) return
           active = false
@@ -96,10 +101,12 @@ export function androidGradient(
       }
     },
     remove() {
+      if (removed) return
+      removed = true
       view.off('loaded', wrap)
       view.style.off('backgroundInternalChange', rewrap)
       view.style.off('borderTopLeftRadiusChange', rewrap)
-      layer.cancel()
+      layer.dispose()
       const native = view.nativeViewProtected as android.view.View | undefined
       if (native && stack && native.getBackground() === stack)
         native.setBackground(stack.getDrawable(0))

package/src/driver/android-particles.ts

@@ -0,0 +1,118 @@
+import { Application, Color, Utils, type View } from '@nativescript/core'
+import { onReducedMotion, reducedMotion } from '../config.js'
+import type { ParticleSettings } from '../particles.js'
+
+type NativeEmitter = org.rafaelaugusto.jolt.ParticleEmitter
+const live = new WeakMap<View, { emitter?: NativeEmitter; burst?: NativeEmitter }>()
+
+/** Internal diagnostic seam for native conformance, not a public animation API. */
+export function currentAndroidParticles(view: View, overlay = false) {
+  return live.get(view)?.[overlay ? 'burst' : 'emitter']
+}
+
+export function androidParticles(
+  view: View,
+  settings: ParticleSettings,
+  overlay: boolean,
+  owners: WeakMap<View, () => void>,
+): () => void {
+  let stopped = false,
+    queued = false
+  let emitter: NativeEmitter | undefined,
+    target: android.view.View | undefined,
+    unwatch: (() => void) | undefined
+  const key = overlay ? 'burst' : 'emitter'
+  const stop = () => {
+    if (stopped) return
+    stopped = true
+    view.off('loaded', schedule)
+    view.off('layoutChanged', schedule)
+    view.off('unloaded', stop)
+    view.style.off('borderTopLeftRadiusChange', schedule)
+    Application.off(Application.suspendEvent, stop)
+    unwatch?.()
+    unwatch = undefined
+    if (owners.get(view) === stop) owners.delete(view)
+    const active = live.get(view)
+    if (active && active[key] === emitter) {
+      delete active[key]
+      if (!active.emitter && !active.burst) live.delete(view)
+    }
+    const native = emitter
+    emitter = target = undefined
+    native?.stop()
+  }
+  const update = () => {
+    if (!view.isLoaded) return
+    if (reducedMotion()) return stop()
+    const native = view.nativeViewProtected as android.view.View | undefined
+    if (target && target !== native) return stop()
+    if (emitter) {
+      emitter.refresh(
+        (typeof view.borderRadius === 'number' ? view.borderRadius : 0) *
+          Utils.layout.getDisplayDensity(),
+      )
+      return
+    }
+    if (!native?.getWindowToken() || native.getWidth() <= 0 || native.getHeight() <= 0)
+      return
+    const colors = Array.create('int', settings.colors.length)
+    settings.colors.forEach((color, i) => {
+      colors[i] = new Color(color).argb | 0
+    })
+    target = native
+    emitter = new org.rafaelaugusto.jolt.ParticleEmitter(
+      native,
+      overlay,
+      colors,
+      settings.shape === 'circle' ? 0 : settings.shape === 'rectangle' ? 1 : 2,
+      settings.source === 'center' ? 0 : settings.source === 'top' ? 1 : 2,
+      settings.rate,
+      settings.lifetime,
+      settings.size,
+      settings.velocity,
+      settings.velocityRange,
+      settings.angle,
+      settings.spread,
+      settings.gravity,
+      settings.spin,
+      settings.spinRange,
+      settings.fadeOut,
+      settings.duration ?? -1,
+      new org.rafaelaugusto.jolt.ParticleEmitter.Listener({ onEnd: stop }),
+    )
+    const active = live.get(view) ?? {}
+    active[key] = emitter
+    live.set(view, active)
+    emitter.refresh(
+      (typeof view.borderRadius === 'number' ? view.borderRadius : 0) *
+        Utils.layout.getDisplayDensity(),
+    )
+    emitter.start()
+  }
+  function schedule() {
+    if (stopped || queued) return
+    queued = true
+    void Promise.resolve().then(() => {
+      queued = false
+      if (stopped) return
+      try {
+        update()
+      } catch (error) {
+        stop()
+        throw error
+      }
+    })
+  }
+  owners.set(view, stop)
+  view.on('loaded', schedule)
+  view.on('layoutChanged', schedule)
+  view.on('unloaded', stop)
+  view.style.on('borderTopLeftRadiusChange', schedule)
+  Application.on(Application.suspendEvent, stop)
+  unwatch = onReducedMotion((reduced) => {
+    if (reduced) stop()
+  })
+  schedule()
+  return stop
+}

package/src/driver/android.ts

@@ -12,6 +12,7 @@ import {
 import { Application, Utils, type View } from '@nativescript/core'
 import type { NumericProperty } from '../properties.js'
 import type { Driver } from './index.js'
+import { frame } from './frame.js'
 import { isColorProperty } from '../color.js'
 import {
   playAndroidColor,
@@ -109,6 +110,7 @@ export function createAndroidDriver(): Driver {
 
   return {
     now: () => android.os.SystemClock.uptimeMillis(),
+    frame,
     clock,
     control(_view, handle, elapsed, paused, command) {
       ;(handle as Handle).control(elapsed, paused, command)

package/src/driver/frame.ts

@@ -0,0 +1,10 @@
+import {
+  cancelAnimationFrame,
+  requestAnimationFrame,
+} from '@nativescript/core/animation-frame'
+
+/** NativeScript schedules subsequent frames with CADisplayLink / Choreographer. */
+export function frame(callback: () => void): () => void {
+  const id = requestAnimationFrame(callback)
+  return () => cancelAnimationFrame(id)
+}

package/src/driver/index.ts

@@ -15,6 +15,8 @@ export interface LayoutFrame {
 export interface Driver {
   /** Milliseconds, on the clock the platform's animations run on. */
   now(): number
+  /** One native animation frame; returns an idempotent cancellation function. */
+  frame(callback: () => void): () => void
   /** Starts the track at `startedAt + track.delay` and calls `onEnd` once, however it ends. */
   play(
     view: View,

package/src/driver/ios-gradient.ts

@@ -47,7 +47,8 @@ export function iosGradient(view: View, type: GradientType): GradientPainter {
     CATransaction.setDisableActions(true)
     if (layer.superlayer !== host.layer) host.layer.insertSublayerAtIndex(layer, 0)
     layer.frame = host.layer.bounds
-    layer.cornerRadius = host.layer.cornerRadius
+    layer.cornerRadius =
+      typeof view.borderRadius === 'number' ? view.borderRadius : host.layer.cornerRadius
     if (current) {
       const model = values(current)
       layer.colors = model.colors
@@ -59,9 +60,13 @@ export function iosGradient(view: View, type: GradientType): GradientPainter {
   }
   view.on('loaded', attach)
   view.on('layoutChanged', attach)
+  view.style.on('borderTopLeftRadiusChange', attach)
 
   return {
     paint(frame) {
+      layer.speed = 1
+      layer.timeOffset = 0
+      layer.beginTime = 0
       current = frame
       generation++
       for (const key of keys) layer.removeAnimationForKey(`jolt:gradient:${key}`)
@@ -73,7 +78,14 @@ export function iosGradient(view: View, type: GradientType): GradientPainter {
       attach()
       const sampled = frames.map(values)
       const now = CACurrentMediaTime()
+      const parentTime = () =>
+        layer.superlayer?.convertTimeFromLayer(CACurrentMediaTime(), null) ??
+        CACurrentMediaTime()
       CATransaction.begin()
+      CATransaction.setDisableActions(true)
+      layer.speed = 1
+      layer.timeOffset = 0
+      layer.beginTime = layer.superlayer?.convertTimeFromLayer(now, null) ?? now
       if (timing.repeat !== Infinity)
         CATransaction.setCompletionBlock(() => {
           if (instance === generation) onEnd(true)
@@ -83,7 +95,7 @@ export function iosGradient(view: View, type: GradientType): GradientPainter {
         animation.values = NSArray.arrayWithArray(sampled.map((value) => value[key]))
         animation.keyTimes = NSArray.arrayWithArray(times as number[])
         animation.duration = Math.max(timing.duration, 1) / 1000
-        animation.beginTime = layer.convertTimeFromLayer(now + timing.delay / 1000, null)
+        animation.beginTime = Math.max(0.000001, timing.delay / 1000)
         animation.fillMode = kCAFillModeBackwards
         if (timing.repeat > 0) {
           animation.autoreverses = timing.reverse
@@ -95,6 +107,15 @@ export function iosGradient(view: View, type: GradientType): GradientPainter {
       }
       CATransaction.commit()
       return {
+        control(elapsed, paused) {
+          if (instance !== generation) return
+          CATransaction.begin()
+          CATransaction.setDisableActions(true)
+          layer.speed = paused ? 0 : 1
+          layer.timeOffset = paused ? elapsed / 1000 : 0
+          layer.beginTime = paused ? 0 : parentTime() - elapsed / 1000
+          CATransaction.commit()
+        },
         cancel() {
           if (instance !== generation) return
           generation++
@@ -107,6 +128,7 @@ export function iosGradient(view: View, type: GradientType): GradientPainter {
       generation++
       view.off('loaded', attach)
       view.off('layoutChanged', attach)
+      view.style.off('borderTopLeftRadiusChange', attach)
       layer.removeAllAnimations()
       layer.removeFromSuperlayer()
     },

package/src/driver/ios.ts

@@ -13,6 +13,7 @@ import { playIOSColor, presentedIOSColor } from './ios-color.js'
 import { after, type Driver } from './index.js'
 import { hasInteractionSurface } from '../interaction-surface.js'
 import { retainInteractiveLayout } from './ios-layout.js'
+import { frame } from './frame.js'
 
 interface Handle {
   stop(): void
@@ -59,6 +60,7 @@ function ensurePerspective(view: View, layers: CALayer[]) {
 export function createIOSDriver(): Driver {
   return {
     now: () => CACurrentMediaTime() * 1000,
+    frame,
 
     play(view, track, startedAt, onEnd): Handle {
       if (isDecorationProperty(track.property))

package/src/engine.ts

@@ -1,11 +1,12 @@
 import {
   createClock,
+  registerPlayback,
   validateProgress,
   type PlaybackAnimation,
   type PlaybackClock,
   type PlaybackCommand,
 } from './playback.js'
-import type { View } from '@nativescript/core'
+import { Application, type View } from '@nativescript/core'
 import { getDriver } from './driver/index.js'
 import { playHaptics, type HapticOptions } from './haptics.js'
 import { readValue, writeValue, type Property } from './properties.js'
@@ -109,7 +110,9 @@ export class ViewAnimation implements PlaybackAnimation {
   private readyListener: (() => void) | undefined
   private readonly endless: boolean
   private readonly timingListeners = new Set<() => void>()
+  private readonly playbackChanged: () => void
   private timingChanged() {
+    this.playbackChanged()
     for (const callback of [...this.timingListeners]) callback()
   }
 
@@ -142,6 +145,7 @@ export class ViewAnimation implements PlaybackAnimation {
     if (this.settled) return
     if (!this.started) {
       this.pendingProgress = value
+      this.timingChanged()
       return
     }
     this.seekTime(this.duration * value)
@@ -280,7 +284,12 @@ export class ViewAnimation implements PlaybackAnimation {
     getDriver().stop(this.view, handle)
     this.playEntry(entry, elapsed)
   }
-  private unloaded = () => this.stop()
+  private unloaded = () => {
+    // NativeScript unloads the root view when iOS enters the background.
+    // An explicitly paused owner can resume after that temporary unload.
+    if (this._paused && Application.suspended) return
+    this.stop()
+  }
 
   constructor(
     readonly view: View,
@@ -295,6 +304,18 @@ export class ViewAnimation implements PlaybackAnimation {
           !Number.isFinite(plan.transition.curve.duration)),
     )
     this.finished = new Promise((resolve) => (this.resolve = resolve))
+    this.playbackChanged = registerPlayback(this, () => ({
+      position: this.pendingProgress,
+      time:
+        this.pendingProgress === undefined
+          ? this.time()
+          : this.pendingProgress * this.duration,
+      duration: this.duration,
+      paused: this._paused,
+      ready: this.ready,
+      settled: this.settled,
+      completed: this.settled && this.complete,
+    }))
     setArrival(this, new Promise<void>((resolve) => (this.arrive = resolve)))
     setArrivalTiming(this, {
       read: () => ({
@@ -436,11 +457,17 @@ export class ViewAnimation implements PlaybackAnimation {
       createClock(() => driver.now())
     if (this._paused) this.clock.pause()
     this.view.on('unloaded', this.unloaded)
-    this.haptics = playHaptics(this.view, tracks, this.haptic, driver, now, () =>
-      this.time(),
-    )
-    if (this._paused) this.haptics?.pause()
     for (const entry of this.entries) this.playEntry(entry)
+    // Register discrete feedback after the visual animators. Android dispatches
+    // these callbacks in registration order within a frame: feedback should see
+    // that frame's updated pose, not the preceding frame's position.
+    // Scale-zero native playback may already have completed synchronously.
+    if (!this.settled) {
+      this.haptics = playHaptics(this.view, tracks, this.haptic, driver, now, () =>
+        this.time(),
+      )
+      if (this._paused) this.haptics?.pause()
+    }
     if (this.pendingProgress !== undefined) {
       const progress = this.pendingProgress
       this.pendingProgress = undefined