@rafaelaugusto/jolt 0.1.0-beta.4 → 0.1.0-beta.6

package/src/driver/android.ts

@@ -1,15 +1,27 @@
+import {
+  androidPlayback,
+  androidClockFactory,
+  type AndroidPlayback,
+} from './android-playback.js'
+import { isDecorationProperty } from '../decoration.js'
+import {
+  syncAndroidDecoration,
+  playAndroidDecoration,
+  presentedAndroidDecoration,
+} from './android-decoration.js'
 import { Utils, type View } from '@nativescript/core'
 import type { NumericProperty } from '../properties.js'
 import type { Driver } from './index.js'
 import { isColorProperty } from '../color.js'
-import { playAndroidColor, presentedAndroidColor } from './android-color.js'
+import {
+  playAndroidColor,
+  presentedAndroidColor,
+  syncAndroidColor,
+} from './android-color.js'
 
 type NativeView = android.view.View
 
-interface Handle {
-  cancel(): void
-  elapsed(): number
-}
+type Handle = AndroidPlayback
 
 /** Own only layers we create; keep app-configured hardware/software layers and paints intact. */
 function fadeLayer(view: View, nativeView: NativeView): (() => void) | undefined {
@@ -74,12 +86,19 @@ export function createAndroidDriver(): Driver {
     rotateX: View.ROTATION_X,
     rotateY: View.ROTATION_Y,
   } satisfies Record<NumericProperty, unknown>
+  const clock = androidClockFactory()
   const interpolator = new android.view.animation.LinearInterpolator()
 
   return {
     now: () => android.os.SystemClock.uptimeMillis(),
+    clock,
+    control(_view, handle, elapsed, paused, command) {
+      ;(handle as Handle).control(elapsed, paused, command)
+    },
 
     play(view, track, _startedAt, onEnd) {
+      if (isDecorationProperty(track.property))
+        return playAndroidDecoration(view, track, onEnd)
       if (isColorProperty(track.property)) return playAndroidColor(view, track, onEnd)
       const nativeView = view.nativeViewProtected as NativeView
       const scale = unit(track.property)
@@ -104,9 +123,6 @@ export function createAndroidDriver(): Driver {
         nativeView,
         holders,
       )
-      let cancelled = false
-      let ended = false
-      let started = false
       let restoreLayer: (() => void) | undefined
       const releaseLayer = () => {
         restoreLayer?.()
@@ -127,52 +143,36 @@ export function createAndroidDriver(): Driver {
             : android.animation.ValueAnimator.RESTART,
         )
       }
-      animator.addListener(
-        new android.animation.Animator.AnimatorListener({
-          onAnimationStart() {
-            started = true
-            if (
-              !cancelled &&
-              !ended &&
-              track.property === 'opacity' &&
-              track.values.some((value) => value !== track.values[0])
-            )
-              restoreLayer = fadeLayer(view, nativeView)
-          },
-          onAnimationRepeat() {},
-          onAnimationCancel() {
-            cancelled = true
-            releaseLayer()
-          },
-          onAnimationEnd() {
-            if (ended) return
-            ended = true
-            releaseLayer()
-            onEnd()
-          },
-        }),
-      )
-
       accessors[track.property].set(nativeView, track.values[0]! * scale)
-      animator.start()
-      return {
-        elapsed: () => (started ? track.delay + animator.getCurrentPlayTime() : 0),
-        cancel() {
-          // Cancel before native callbacks: Android can send onStart while cancelling a delay.
-          cancelled = true
-          releaseLayer()
-          animator.cancel()
+      return androidPlayback(
+        animator,
+        track,
+        onEnd,
+        () => {
+          if (
+            track.property === 'opacity' &&
+            track.values.some((value) => value !== track.values[0])
+          )
+            restoreLayer = fadeLayer(view, nativeView)
         },
-      } satisfies Handle
+        releaseLayer,
+      )
     },
 
     stop(_view, handle) {
       ;(handle as Handle).cancel()
     },
 
+    sync(view) {
+      syncAndroidDecoration(view)
+      syncAndroidColor(view)
+    },
+
     elapsed: (handle) => (handle as Handle).elapsed(),
 
     presented(view, property) {
+      if (isDecorationProperty(property))
+        return presentedAndroidDecoration(view, property)
       if (isColorProperty(property)) return presentedAndroidColor(view, property)
       const nativeView = view.nativeViewProtected as NativeView | undefined
       return nativeView ? accessors[property].get(nativeView) / unit(property) : undefined
@@ -207,5 +207,19 @@ export function createAndroidDriver(): Driver {
         marker.cancel()
       }
     },
+
+    reducedMotion() {
+      // Remove animations sets the animator duration scale to zero.
+      if (android.os.Build.VERSION.SDK_INT >= 26)
+        return !android.animation.ValueAnimator.areAnimatorsEnabled()
+      const { Global } = android.provider.Settings
+      return (
+        Global.getFloat(
+          Utils.android.getApplicationContext().getContentResolver(),
+          Global.ANIMATOR_DURATION_SCALE,
+          1,
+        ) === 0
+      )
+    },
   }
 }

package/src/driver/index.ts

@@ -1,3 +1,4 @@
+import type { PlaybackClock, PlaybackCommand } from '../playback.js'
 import { isAndroid, type View } from '@nativescript/core'
 import type { Property } from '../properties.js'
 import type { Track } from '../track.js'
@@ -15,12 +16,26 @@ export interface Driver {
     onEnd: (finished?: boolean) => void,
   ): unknown
   stop(view: View, handle: unknown): void
+  /** A native elapsed-time marker when system animation speed affects time. */
+  clock?(duration: number): PlaybackClock
+  /** Move only this native track to an elapsed time, optionally holding it. */
+  control?(
+    view: View,
+    handle: unknown,
+    elapsed: number,
+    paused: boolean,
+    command?: PlaybackCommand,
+  ): void
+  /** Reapply native presentation after a Core model write rebuilds its drawable/layers. */
+  sync?(view: View, excluding?: Property): void
   /** Track time, including its delay, when the native clock differs from `now()`. */
   elapsed?(handle: unknown): number
   /** The value on screen, when the platform knows it better than the track does. */
   presented(view: View, property: Property): number | undefined
   /** Calls back after `ms` of animation time, respecting platform speed settings. */
   after(ms: number, callback: () => void): () => void
+  /** The platform's accessibility setting: Reduce Motion on iOS, Remove animations on Android. */
+  reducedMotion?(): boolean
 }
 
 export function after(ms: number, callback: () => void) {

package/src/driver/ios-color.ts

@@ -2,6 +2,7 @@ import { Color, type View } from '@nativescript/core'
 import { colorProperty } from '@nativescript/core/ui/styling/style-properties'
 import { formattedTextProperty, textProperty } from '@nativescript/core/ui/text-base'
 import { readColor, type ColorProperty } from '../color.js'
+import { iosPlayback } from './ios-playback.js'
 import type { Track } from '../track.js'
 
 type TextView = View & {
@@ -18,6 +19,8 @@ type PaintLayer = {
 }
 type NativeView = UIView & { borderLayer?: CAShapeLayer }
 interface ColorHandle {
+  elapsed(): number
+  control(elapsed: number, paused: boolean): void
   stop(): void
   presented(): number | undefined
 }
@@ -35,8 +38,8 @@ export function presentedIOSColor(
   view: View,
   property: ColorProperty,
 ): number | undefined {
-  const current = playing.get(view)?.get(property)?.presented()
-  if (current !== undefined) return current
+  const active = playing.get(view)?.get(property)
+  if (active) return active.presented()
   if (property === 'color' && !view.color) {
     const label = labelOf(view)
     if (label?.textColor) return Color.fromIosColor(label.textColor).argb >>> 0
@@ -56,6 +59,7 @@ export function playIOSColor(
   startedAt: number,
   onEnd: (finished?: boolean) => void,
 ): ColorHandle {
+  const timing = iosPlayback(track, startedAt)
   const property = track.property as ColorProperty
   let target: PaintLayer | undefined
   let restore: (() => void) | undefined
@@ -107,11 +111,21 @@ export function playIOSColor(
   }
   const handle: ColorHandle = {
     stop: cancel,
+    elapsed: timing.elapsed,
+    control(time, paused) {
+      if (!stopped) {
+        timing.control(time, paused)
+        attach()
+      }
+    },
     presented() {
+      // A new CA copy commits at the end of the turn. After controls, the engine
+      // clock is authoritative even before presentationLayer catches up.
+      if (timing.controlled) return undefined
       if (!target) return track.values[0]
       const layer = target.layer.presentationLayer()
       // Before CA commits its first frame, the model already contains the target.
-      if (!layer) return track.valueAt(CACurrentMediaTime() * 1000 - startedAt)
+      if (!layer) return track.valueAt(timing.elapsed())
       const color = (layer as unknown as Record<string, interop.Pointer | null>)[
         target.path
       ]
@@ -189,12 +203,6 @@ export function playIOSColor(
     )
     animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
     animation.duration = Math.max(track.duration, 1) / 1000
-    animation.beginTime = layer.convertTimeFromLayer(
-      (startedAt + track.delay) / 1000,
-      null,
-    )
-    animation.fillMode = kCAFillModeBackwards
-    animation.removedOnCompletion = track.repeat !== Infinity
     if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
       const maximum = Math.min(
         120,
@@ -211,8 +219,9 @@ export function playIOSColor(
       animation.autoreverses = track.reverse
       animation.repeatCount = track.reverse ? (track.repeat + 1) / 2 : track.repeat + 1
     }
+    timing.configure(animation, layer)
     CATransaction.begin()
-    if (track.repeat !== Infinity)
+    if (!timing.paused && track.repeat !== Infinity)
       CATransaction.setCompletionBlock(() => {
         if (!stopped && instance === generation) {
           cleanup()

package/src/driver/ios-decoration.ts

@@ -0,0 +1,332 @@
+import type { View } from '@nativescript/core'
+import {
+  dip,
+  isWritingDecoration,
+  radiusKeys,
+  widthKeys,
+  validateDecorationTarget,
+  type DecorationProperty,
+} from '../decoration.js'
+import { iosPlayback } from './ios-playback.js'
+import type { Track } from '../track.js'
+
+type NativeView = UIView & { outerShadowContainerLayer?: CALayer }
+type Binding = { layer: CALayer; path: string; values: unknown[] }
+interface Handle {
+  elapsed(): number
+  control(elapsed: number, paused: boolean): void
+  track: Track
+  stop(): void
+  presented(): number | undefined
+  attach(): void
+}
+const playing = new WeakMap<View, Map<DecorationProperty, Handle>>()
+const paths = {
+  borderRadius: 'cornerRadius',
+  borderWidth: 'borderWidth',
+  shadowOpacity: 'shadowOpacity',
+  shadowRadius: 'shadowRadius',
+  shadowOffsetX: 'shadowOffset.width',
+  shadowOffsetY: 'shadowOffset.height',
+} as const
+
+export function syncIOSDecoration(view: View, excluding?: string) {
+  for (const [property, handle] of playing.get(view) ?? [])
+    if (property !== excluding) handle.attach()
+}
+export const presentedIOSDecoration = (view: View, property: DecorationProperty) =>
+  playing.get(view)?.get(property)?.presented()
+
+/** Animate Core's uniform border and its separate outer-shadow layers. */
+export function playIOSDecoration(
+  view: View,
+  track: Track,
+  startedAt: number,
+  onEnd: (finished?: boolean) => void,
+): Handle {
+  const timing = iosPlayback(track, startedAt)
+  const property = track.property as Exclude<
+    DecorationProperty,
+    'elevation' | 'translationZ'
+  >
+  const native = view.nativeViewProtected as NativeView
+  const key = `jolt:${property}`
+  let bindings: Binding[] = []
+  let stopped = false
+  let queued = false
+  let generation = 0
+  const entries = playing.get(view) ?? new Map<DecorationProperty, Handle>()
+  playing.set(view, entries)
+  const cleanup = () => {
+    if (stopped) return
+    stopped = true
+    generation++
+    view.off('unloaded', cancel)
+    view.off('layoutChanged', refresh)
+    view.style.off('backgroundInternalChange', refresh)
+    for (const event of changes) view.style.off(event, external)
+    for (const binding of bindings) binding.layer.removeAnimationForKey(key)
+    if (entries.get(property) === handle) entries.delete(property)
+  }
+  const cancel = () => {
+    if (!stopped) {
+      cleanup()
+      onEnd(false)
+    }
+  }
+  const refresh = () => {
+    if (stopped || queued) return
+    queued = true
+    void Promise.resolve().then(() => {
+      queued = false
+      if (!stopped && view.nativeViewProtected === native) handle.attach()
+    })
+  }
+  const external = (event: { eventName: string }) => {
+    if (isWritingDecoration(view)) return
+    const own =
+      property === 'borderRadius'
+        ? radiusKeys
+        : property === 'borderWidth'
+          ? widthKeys
+          : ['boxShadow']
+    void Promise.resolve().then(() => {
+      if (stopped) return
+      if (own.some((name) => event.eventName === `${name}Change`)) return cancel()
+      try {
+        validateDecorationTarget(view, property)
+      } catch {
+        cancel()
+      }
+    })
+  }
+  const changes = [
+    ...radiusKeys,
+    ...widthKeys,
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'clipPath',
+    'cornerShape',
+    'boxShadow',
+  ].map((name) => `${name}Change`)
+  const handle: Handle = {
+    track,
+    stop: cancel,
+    elapsed: timing.elapsed,
+    control(time, paused) {
+      if (!stopped) {
+        timing.control(time, paused)
+        handle.attach()
+      }
+    },
+    presented() {
+      if (timing.controlled) return undefined
+      const binding = bindings[0]
+      const layer = binding?.layer.presentationLayer()
+      if (!layer) return track.valueAt(timing.elapsed())
+      if (property === 'shadowOffsetX') return layer.shadowOffset.width
+      if (property === 'shadowOffsetY') return layer.shadowOffset.height
+      return (layer as unknown as Record<string, number>)[paths[property]]!
+    },
+    attach() {
+      if (stopped) return
+      const instance = ++generation
+      for (const binding of bindings) binding.layer.removeAnimationForKey(key)
+      bindings = []
+      // Path clipping and spread are nonlinear. Sample even a linear radius
+      // tween so its shadow and inner cutout follow the capped native corner.
+      const steps = Math.max(1, Math.min(6000, Math.ceil((track.duration * 60) / 1000)))
+      const times =
+        property === 'borderRadius'
+          ? [
+              ...new Set([
+                ...track.times,
+                ...Array.from({ length: steps + 1 }, (_, i) => i / steps),
+              ]),
+            ].sort((a, b) => a - b)
+          : [...track.times]
+      const values =
+        property === 'borderRadius'
+          ? times.map((time) =>
+              time === 1
+                ? track.values.at(-1)!
+                : track.valueAt(track.delay + time * track.duration),
+            )
+          : [...track.values]
+      if (property === 'borderRadius' || property === 'borderWidth') {
+        bindings.push({
+          layer: native.layer,
+          path: paths[property],
+          values:
+            property === 'borderRadius' && native.bounds?.size
+              ? values.map((value) =>
+                  Math.min(
+                    value,
+                    native.bounds.size.width / 2,
+                    native.bounds.size.height / 2,
+                  ),
+                )
+              : values,
+        })
+        if (property === 'borderRadius') {
+          const shadows = view.boxShadow
+          const layers = native.outerShadowContainerLayer?.sublayers
+          if (Array.isArray(shadows) && layers) {
+            for (let i = 0; i < Math.min(shadows.length, layers.count); i++) {
+              const layer = layers.objectAtIndex(i)
+              const spread = dip(shadows[i]!.spreadRadius)
+              bindings.push({
+                layer,
+                path: 'shadowPath',
+                values: values.map((radius) =>
+                  roundedPath(native.bounds, radius, spread),
+                ),
+              })
+              if (layer.mask)
+                bindings.push({
+                  layer: layer.mask,
+                  path: 'path',
+                  values: values.map((radius) =>
+                    shadowMask(native.bounds, radius, maskExtent(view, entries)),
+                  ),
+                })
+            }
+          }
+        }
+      } else {
+        const layer = native.outerShadowContainerLayer?.sublayers?.firstObject
+        if (!layer) return cancel()
+        bindings.push({ layer, path: paths[property], values: [...track.values] })
+        // Core's mask bounds are sized for the final blur/offset. Give intermediate
+        // samples room too. Radius owns the animated inner edge when it is active.
+        if (layer.mask && !entries.has('borderRadius')) {
+          CATransaction.begin()
+          CATransaction.setDisableActions(true)
+          ;(layer.mask as CAShapeLayer).path = shadowMask(
+            native.bounds,
+            native.layer.cornerRadius,
+            maskExtent(view, entries),
+          )
+          CATransaction.commit()
+        }
+      }
+      CATransaction.begin()
+      CATransaction.setDisableActions(true)
+      if (!timing.paused && track.repeat !== Infinity)
+        CATransaction.setCompletionBlock(() => {
+          if (stopped || generation !== instance) return
+          cleanup()
+          onEnd()
+        })
+      // Core treats a zero-alpha shadow as opaque. Commit the native endpoint
+      // explicitly too; otherwise a fade to zero would flash back on completion.
+      const paint = bindings[0]!.layer
+      if (property === 'shadowOpacity') paint.shadowOpacity = track.to
+      else if (property === 'shadowRadius') paint.shadowRadius = track.to
+      else if (property === 'shadowOffsetX')
+        paint.shadowOffset = CGSizeMake(track.to, paint.shadowOffset.height)
+      else if (property === 'shadowOffsetY')
+        paint.shadowOffset = CGSizeMake(paint.shadowOffset.width, track.to)
+      for (const { layer, path, values } of bindings) {
+        const animation = CAKeyframeAnimation.animationWithKeyPath(path)
+        animation.values = NSArray.arrayWithArray(values)
+        animation.keyTimes = NSArray.arrayWithArray(times)
+        animation.duration = Math.max(1, track.duration) / 1000
+        if (track.repeat > 0) {
+          animation.autoreverses = track.reverse
+          animation.repeatCount = track.reverse
+            ? (track.repeat + 1) / 2
+            : track.repeat + 1
+        }
+        timing.configure(animation, layer)
+        if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
+          const max = Math.min(
+            120,
+            native.window?.screen.maximumFramesPerSecond ??
+              UIScreen.mainScreen.maximumFramesPerSecond,
+          )
+          animation.preferredFrameRateRange = CAFrameRateRangeMake(
+            Math.min(80, max),
+            max,
+            max,
+          )
+        }
+        layer.addAnimationForKey(animation, key)
+      }
+      CATransaction.commit()
+    },
+  }
+  entries.set(property, handle)
+  view.on('unloaded', cancel)
+  view.on('layoutChanged', refresh)
+  view.style.on('backgroundInternalChange', refresh)
+  for (const event of changes) view.style.on(event, external)
+  // All model endpoints have been committed before driver.play(). Each handle
+  // follows the same timeline even if Core redraws its layers during layout.
+  for (const active of entries.values()) active.attach()
+  return handle
+}
+
+function maskExtent(view: View, entries: Map<DecorationProperty, Handle>): number {
+  const shadows = Array.isArray(view.boxShadow) ? view.boxShadow : []
+  const maximum = (property: DecorationProperty, fallback: number) =>
+    Math.max(
+      Math.abs(fallback),
+      ...(entries.get(property)?.track.values.map(Math.abs) ?? []),
+    )
+  return Math.max(
+    1,
+    ...shadows.map(
+      (shadow) =>
+        maximum('shadowRadius', dip(shadow.blurRadius) / 2) * 6 +
+        Math.abs(dip(shadow.spreadRadius)) +
+        maximum('shadowOffsetX', dip(shadow.offsetX)) +
+        maximum('shadowOffsetY', dip(shadow.offsetY)) +
+        1,
+    ),
+  )
+}
+
+/** Keep identical path topology at radius zero so CA can interpolate it. */
+function roundedPath(bounds: CGRect, radius: number, spread = 0): interop.Pointer {
+  const rect = CGRectInset(bounds, -spread, -spread)
+  const r = Math.min(
+    Math.max(0, Math.min(radius, bounds.size.width / 2, bounds.size.height / 2) + spread),
+    Math.max(0, rect.size.width / 2),
+    Math.max(0, rect.size.height / 2),
+  )
+  const x = rect.origin.x,
+    y = rect.origin.y,
+    right = x + rect.size.width,
+    bottom = y + rect.size.height
+  const k = r * 0.5522847498307936
+  const path = CGPathCreateMutable()
+  CGPathMoveToPoint(path, null, x + r, y)
+  CGPathAddLineToPoint(path, null, right - r, y)
+  CGPathAddCurveToPoint(path, null, right - r + k, y, right, y + r - k, right, y + r)
+  CGPathAddLineToPoint(path, null, right, bottom - r)
+  CGPathAddCurveToPoint(
+    path,
+    null,
+    right,
+    bottom - r + k,
+    right - r + k,
+    bottom,
+    right - r,
+    bottom,
+  )
+  CGPathAddLineToPoint(path, null, x + r, bottom)
+  CGPathAddCurveToPoint(path, null, x + r - k, bottom, x, bottom - r + k, x, bottom - r)
+  CGPathAddLineToPoint(path, null, x, y + r)
+  CGPathAddCurveToPoint(path, null, x, y + r - k, x + r - k, y, x + r, y)
+  CGPathCloseSubpath(path)
+  return path
+}
+function shadowMask(bounds: CGRect, radius: number, extent: number): interop.Pointer {
+  const path = CGPathCreateMutable()
+  CGPathAddPath(path, null, roundedPath(bounds, radius))
+  CGPathAddRect(path, null, CGRectInset(bounds, -extent, -extent))
+  return path
+}

package/src/driver/ios-playback.ts

@@ -0,0 +1,51 @@
+import type { Track } from '../track.js'
+
+/** Each CAAnimation owns its clock; the view and its children keep their speed. */
+export function iosPlayback(track: Track, startedAt: number) {
+  let anchor = startedAt
+  let offset = 0
+  let paused = false
+  let controlled = false
+  const elapsed = () => offset + (paused ? 0 : CACurrentMediaTime() * 1000 - anchor)
+  return {
+    elapsed,
+    get controlled() {
+      return controlled
+    },
+    get paused() {
+      return paused
+    },
+    control(time: number, hold: boolean) {
+      controlled = true
+      offset = time
+      anchor = CACurrentMediaTime() * 1000
+      paused = hold
+    },
+    configure(animation: CAKeyframeAnimation, layer: CALayer) {
+      const now = CACurrentMediaTime()
+      const position = elapsed()
+      animation.speed = paused ? 0 : 1
+      animation.timeOffset = paused ? Math.max(0, position - track.delay) / 1000 : 0
+      animation.beginTime = layer.convertTimeFromLayer(
+        paused ? now : now - position / 1000 + track.delay / 1000,
+        null,
+      )
+      animation.fillMode = paused ? 'both' : kCAFillModeBackwards
+      animation.removedOnCompletion = !paused && track.repeat !== Infinity
+      // With speed 0, CA folds an exact duration boundary back to the first
+      // frame. Hold the actual endpoint with a constant copy, also when a
+      // shorter property waits at its end while another one is being scrubbed.
+      if (paused && Number.isFinite(track.end) && position >= track.end) {
+        const values = animation.values!
+        const index = track.reverse && track.repeat % 2 === 1 ? 0 : values.count - 1
+        const value = values.objectAtIndex(index)
+        animation.values = NSArray.arrayWithArray([value, value])
+        animation.keyTimes = NSArray.arrayWithArray([0, 1])
+        animation.duration = 1
+        animation.repeatCount = 0
+        animation.autoreverses = false
+        animation.timeOffset = 0
+      }
+    },
+  }
+}