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

package/src/track.ts

@@ -5,6 +5,7 @@ import { precision, type Property } from './properties.js'
 import { solveSpring, springPhysics } from './spring.js'
 import type { Curve, ResolvedTransition } from './transition.js'
 import { colorMixer, isColorProperty, type ColorProperty } from './color.js'
+import { reducedMotion, timeScale } from './config.js'
 
 /**
  * One property animated over time. The curve is computed here and sampled,
@@ -50,13 +51,22 @@ export function createTrack(
   velocity: number,
 ): Track {
   if (isColorProperty(property)) return colorTrack(property, keyframes, transition)
-  const { curve, delay, repeat, reverse } = transition
-  const motion =
+  const { curve, repeat, reverse } = transition
+  if (property !== 'opacity' && reducedMotion())
+    return instantTrack(
+      property,
+      restingValue(property, keyframes, curve, repeat, reverse),
+    )
+  const slowdown = 1 / timeScale()
+  const delay = transition.delay * slowdown
+  const motion = slow(
     curve.type === 'spring'
-      ? spring(property, keyframes, curve, velocity)
+      ? spring(property, keyframes, curve, velocity * slowdown, slowdown)
       : curve.type === 'decay'
-        ? decay(property, keyframes[0]!, curve)
-        : tween(keyframes, curve)
+        ? decay(property, keyframes[0]!, curve, slowdown)
+        : tween(keyframes, curve, slowdown),
+    slowdown,
+  )
   const { duration } = motion
   const first = motion.values[0]!
   const last = motion.values.at(-1)!
@@ -104,6 +114,50 @@ export function createTrack(
   }
 }
 
+/** Already at its end: the engine writes the value and plays nothing. */
+export function instantTrack(property: Property, value: number): Track {
+  const to = isDecorationProperty(property) ? clampDecoration(property, value) : value
+  return {
+    property,
+    delay: 0,
+    duration: 0,
+    repeat: 0,
+    reverse: false,
+    times: [0, 1],
+    values: [to, to],
+    to,
+    end: 0,
+    arrival: 0,
+    valueAt: () => to,
+    velocityAt: () => 0,
+  }
+}
+
+function restingValue(
+  property: Property,
+  keyframes: readonly number[],
+  curve: Curve,
+  repeat: number,
+  reverse: boolean,
+) {
+  const first = keyframes[0]!
+  if (!Number.isFinite(repeat) || (reverse && repeat % 2 === 1)) return first
+  if (curve.type !== 'decay') return keyframes.at(-1)!
+  const landing = solveDecay(
+    first,
+    curve.velocity,
+    curve.friction,
+    precision[property],
+  ).to
+  return curve.snap ? closest(curve.snap, landing) : landing
+}
+
+function closest(stops: readonly number[], target: number) {
+  return stops.reduce((best, stop) =>
+    Math.abs(stop - target) < Math.abs(best - target) ? stop : best,
+  )
+}
+
 function colorTrack(
   property: ColorProperty,
   colors: readonly number[],
@@ -156,28 +210,46 @@ function colorTrack(
   }
 }
 
+/** Plays the same trajectory over a longer or shorter time. */
+function slow(motion: Motion, factor: number): Motion {
+  if (factor === 1) return motion
+  return {
+    ...motion,
+    duration: motion.duration * factor,
+    position: (time) => motion.position(time / factor),
+    velocity: (time) => motion.velocity(time / factor) / factor,
+  }
+}
+
+/** Keyframes per second of playback, so slowed curves stay smooth. */
+function samples(duration: number, density: number) {
+  return Math.max(
+    1,
+    Math.min(
+      MAX_DECAY_SAMPLES,
+      Math.ceil(((duration * density) / 1000) * SAMPLES_PER_SECOND),
+    ),
+  )
+}
+
 function decay(
   property: Property,
   from: number,
   curve: Extract<Curve, { type: 'decay' }>,
+  density: number,
 ): Motion {
   const motion = solveDecay(from, curve.velocity, curve.friction, precision[property])
   if (curve.snap) {
-    const to = curve.snap.reduce((closest, stop) =>
-      Math.abs(stop - motion.to) < Math.abs(closest - motion.to) ? stop : closest,
-    )
     return spring(
       property,
-      [from, to],
+      [from, closest(curve.snap, motion.to)],
       { type: 'spring', physics: springPhysics({}), velocity: curve.velocity },
       0,
+      density,
     )
   }
 
-  const steps = Math.max(
-    1,
-    Math.min(MAX_DECAY_SAMPLES, Math.ceil((motion.duration / 1000) * SAMPLES_PER_SECOND)),
-  )
+  const steps = samples(motion.duration, density)
   const times: number[] = []
   const values: number[] = []
   for (let i = 0; i <= steps; i++) {
@@ -201,6 +273,7 @@ function spring(
   [from, to]: readonly number[],
   curve: Extract<Curve, { type: 'spring' }>,
   velocity: number,
+  density: number,
 ): Motion {
   const motion = solveSpring(
     curve.physics,
@@ -209,7 +282,7 @@ function spring(
     curve.velocity ?? velocity,
     precision[property],
   )
-  const steps = Math.max(1, Math.ceil((motion.duration / 1000) * SAMPLES_PER_SECOND))
+  const steps = samples(motion.duration, density)
   const times: number[] = []
   const values: number[] = []
   for (let i = 0; i <= steps; i++) {
@@ -222,6 +295,7 @@ function spring(
 function tween(
   keyframes: readonly number[],
   curve: Extract<Curve, { type: 'tween' }>,
+  density: number,
 ): Motion {
   const { duration, ease } = curve
   const offsets = curve.times ?? keyframes.map((_, i) => i / (keyframes.length - 1))
@@ -245,16 +319,7 @@ function tween(
     const from = keyframes[i]!
     const to = keyframes[i + 1]!
     const easing = ease[i]!
-    const steps =
-      easing === linear || from === to
-        ? 1
-        : Math.max(
-            1,
-            Math.min(
-              MAX_DECAY_SAMPLES,
-              Math.ceil(((span * duration) / 1000) * SAMPLES_PER_SECOND),
-            ),
-          )
+    const steps = easing === linear || from === to ? 1 : samples(span * duration, density)
     for (let step = 1; step <= steps; step++) {
       times.push(start + (span * step) / steps)
       values.push(step === steps ? to : from + (to - from) * easing(step / steps))

package/src/types.ts

@@ -7,6 +7,10 @@ import type { ColorKeyframes } from './color.js'
 export type KeyframeValue = number | readonly (number | null)[]
 
 export interface Keyframes {
+  /** One continuous SVG path, expressed as translation coordinates in DIPs. */
+  path?: string
+  /** Face the path's forward tangent (+X artwork). Requires path. */
+  orient?: boolean
   backgroundColor?: ColorKeyframes
   /** Uniform starting edge colors; widths and radii may differ. */
   borderColor?: ColorKeyframes
@@ -41,6 +45,9 @@ export interface Keyframes {
   rotateY?: KeyframeValue
 }
 
+/** Properties that can be timed or stopped independently. A path owns x/y and optionally rotate. */
+export type KeyframeProperty = Exclude<keyof Keyframes, 'path' | 'orient'>
+
 /** A view, or anything that holds one: a NativeScript-Vue element, an Angular `ElementRef`. */
 export type Target =
   View | { readonly nativeView: View } | { readonly nativeElement: View }
@@ -66,7 +73,7 @@ export interface Stagger {
 }
 
 export type AnimateOptions = Transition & {
-  [K in keyof Keyframes]?: Transition | SpringName
+  [K in KeyframeProperty | 'path']?: Transition | SpringName
 } & {
   /** Offset translations/rotations and multiply scale/opacity by their values at the start. */
   relative?: boolean

package/src/vue/index.ts

@@ -0,0 +1,189 @@
+import {
+  BaseTransition,
+  defineComponent,
+  h,
+  type App,
+  type BaseTransitionProps,
+  type NSVElement,
+  type ObjectDirective,
+  type PropType,
+} from 'nativescript-vue'
+import {
+  animate,
+  press,
+  type AnimateOptions,
+  type Keyframes,
+  type PlaybackAnimation,
+  type PresetName,
+  type SpringName,
+} from '../index.js'
+
+type Host = NSVElement
+type Options = AnimateOptions | SpringName
+
+/** A preset name or keyframes, alone or paired with a transition. */
+export type AnimateValue =
+  PresetName | Keyframes | readonly [animation: PresetName | Keyframes, options?: Options]
+
+/** The pressed keyframes, alone or paired with a transition. */
+export type PressValue = Keyframes | readonly [pressed: Keyframes, options?: Options]
+
+export interface TransitionProps {
+  /** Played when the child is inserted. */
+  enter?: AnimateValue
+  /** Played before the child is removed. */
+  leave?: AnimateValue
+  /** Also play `enter` on the first render. */
+  appear?: boolean
+  mode?: 'in-out' | 'out-in' | 'default'
+}
+
+const animations = new WeakMap<object, PlaybackAnimation>()
+const removers = new WeakMap<object, () => void>()
+
+function split<T>(
+  value: T | readonly [T, Options?],
+): [animation: T, options: Options | undefined] {
+  return Array.isArray(value)
+    ? [value[0] as T, value[1] as Options | undefined]
+    : [value as T, undefined]
+}
+
+function same(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+    return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false
+  const keys = Object.keys(a)
+  return (
+    keys.length === Object.keys(b).length &&
+    keys.every((key) =>
+      same((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key]),
+    )
+  )
+}
+
+function play(el: Host, value: AnimateValue) {
+  const [animation, options] = split<PresetName | Keyframes>(value)
+  const handle = animate(el, animation, options)
+  animations.set(el, handle)
+  return handle
+}
+
+function cancel(el: Host) {
+  animations.get(el)?.stop()
+  animations.delete(el)
+}
+
+function attach(el: Host, value: PressValue | undefined) {
+  const [pressed, options] = value === undefined ? [] : split<Keyframes>(value)
+  removers.set(el, press(el, pressed, options))
+}
+
+/**
+ * Plays an animation when the element mounts, and again whenever the value changes.
+ *
+ * ```vue
+ * <Label v-animate="'fadeInUp'" />
+ * <Label v-animate="['popIn', { delay: 200 }]" />
+ * ```
+ */
+export const vAnimate: ObjectDirective<Host, AnimateValue> = {
+  mounted(el, { value }) {
+    play(el, value)
+  },
+  updated(el, { value, oldValue }) {
+    if (!same(value, oldValue)) play(el, value)
+  },
+  unmounted: cancel,
+}
+
+/**
+ * Press feedback while a finger is on the element.
+ *
+ * ```vue
+ * <GridLayout v-press />
+ * <GridLayout v-press="{ scale: 0.95 }" />
+ * ```
+ */
+export const vPress: ObjectDirective<Host, PressValue | undefined> = {
+  mounted(el, { value }) {
+    attach(el, value)
+  },
+  updated(el, { value, oldValue }) {
+    if (same(value, oldValue)) return
+    removers.get(el)?.()
+    attach(el, value)
+  },
+  unmounted(el) {
+    removers.get(el)?.()
+    removers.delete(el)
+  },
+}
+
+/** The hooks `JoltTransition` hands to Vue's `BaseTransition`. */
+export function transitionHooks(props: TransitionProps): BaseTransitionProps<Host> {
+  const run = (value: AnimateValue | undefined) => (el: Host, done: () => void) => {
+    if (value === undefined) {
+      done()
+      return
+    }
+    const handle = play(el, value)
+    void handle.finished.then(() => {
+      if (animations.get(el) === handle) animations.delete(el)
+      done()
+    })
+  }
+  const hooks: BaseTransitionProps<Host> = {
+    onEnter: run(props.enter),
+    onEnterCancelled: cancel,
+    onLeave: run(props.leave),
+    onLeaveCancelled: cancel,
+  }
+  if (props.appear) {
+    hooks.onAppear = hooks.onEnter
+    hooks.onAppearCancelled = cancel
+  }
+  return hooks
+}
+
+const value = {
+  type: [String, Object, Array] as PropType<AnimateValue>,
+  default: undefined,
+}
+
+/**
+ * Animates a child in and out. Vue keeps the element until the leave animation settles.
+ *
+ * ```vue
+ * <JoltTransition enter="popIn" leave="fadeOut">
+ *   <Label v-if="visible" text="Saved" />
+ * </JoltTransition>
+ * ```
+ */
+export const JoltTransition = defineComponent({
+  name: 'JoltTransition',
+  props: {
+    enter: value,
+    leave: value,
+    appear: Boolean,
+    mode: { type: String as PropType<TransitionProps['mode']>, default: undefined },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        BaseTransition,
+        { ...transitionHooks(props), mode: props.mode, appear: props.appear },
+        slots,
+      )
+  },
+})
+
+/** Registers `v-animate`, `v-press` and `JoltTransition` on the app. */
+export function install(app: App) {
+  app.directive('animate', vAnimate)
+  app.directive('press', vPress)
+  app.component('JoltTransition', JoltTransition)
+}
+
+export default { install }

package/src/zoom-native.ts

@@ -0,0 +1,124 @@
+import { Utils, isIOS, type Image, type View } from '@nativescript/core'
+
+export interface ZoomSnapshot {
+  x: number
+  y: number
+  scale: number
+  progress: number
+  pending: boolean
+}
+export interface ZoomDriver {
+  readonly native: object
+  readonly state: ZoomSnapshot
+  zoom(scale: number, x: number, y: number, animated: boolean): void
+  reset(animated: boolean): void
+  requestDismiss(): void
+  setReduced(value: boolean): void
+  setActive(value: boolean): void
+  layout(): void
+  stop(): void
+}
+export interface ZoomSettings {
+  minimum: number
+  maximum: number
+  doubleTap: number
+  dismiss: boolean
+  reduced: boolean
+  backdrop?: View
+  chrome?: View
+}
+
+export function createZoomDriver(
+  image: Image,
+  viewport: View,
+  options: ZoomSettings,
+  dismiss: (
+    x: number,
+    y: number,
+    scale: number,
+    velocity: number,
+    progress: number,
+  ) => void,
+  settled: (x: number, y: number, scale: number) => void,
+): ZoomDriver {
+  const { minimum, maximum, doubleTap, reduced, backdrop, chrome } = options
+  if (isIOS) {
+    const native =
+      JoltPhotoZoom.attachImageViewportMinimumMaximumDoubleTapDismissReducedBackdropChromeOnDismissOnSettled(
+        image.nativeViewProtected,
+        viewport.nativeViewProtected,
+        minimum,
+        maximum,
+        doubleTap,
+        options.dismiss,
+        reduced,
+        backdrop?.nativeViewProtected ?? null,
+        chrome?.nativeViewProtected ?? null,
+        dismiss,
+        settled,
+      )
+    return {
+      native,
+      get state() {
+        return {
+          x: native.x,
+          y: native.y,
+          scale: native.scale,
+          progress: native.dismissProgress,
+          pending: native.dismissPending,
+        }
+      },
+      zoom: (s, x, y, a) => native.zoomFocusXFocusYAnimated(s, x, y, a),
+      reset: (a) => native.reset(a),
+      requestDismiss: () => native.requestDismiss(),
+      setReduced: (r) => native.setReduced(r),
+      setActive: (a) => native.setActive(a),
+      layout: () => native.layout(),
+      stop: () => native.stop(),
+    }
+  }
+  const density = Utils.layout.getDisplayDensity()
+  const source = image.imageSource!
+  const angle = Math.abs((source.rotationAngle ?? 0) % 180)
+  const swapped = angle > 45 && angle < 135
+  const native = new org.rafaelaugusto.jolt.PhotoZoom(
+    image.nativeViewProtected,
+    viewport.nativeViewProtected,
+    swapped ? source.height : source.width,
+    swapped ? source.width : source.height,
+    minimum,
+    maximum,
+    doubleTap,
+    options.dismiss,
+    reduced,
+    backdrop?.nativeViewProtected ?? null,
+    chrome?.nativeViewProtected ?? null,
+    (viewport as View & { touchListener?: android.view.View.OnTouchListener })
+      .touchListener ?? null,
+    (image as View & { touchListener?: android.view.View.OnTouchListener })
+      .touchListener ?? null,
+    new org.rafaelaugusto.jolt.PhotoZoom.Listener({
+      onDismiss: dismiss,
+      onSettled: settled,
+    }),
+  )
+  return {
+    native,
+    get state() {
+      return {
+        x: native.getX(),
+        y: native.getY(),
+        scale: native.getScale(),
+        progress: native.getDismissProgress(),
+        pending: native.isDismissPending(),
+      }
+    },
+    zoom: (s, x, y, a) => native.zoom(s, x * density, y * density, a),
+    reset: (a) => native.reset(a),
+    requestDismiss: () => native.requestDismiss(),
+    setReduced: (r) => native.setReduced(r),
+    setActive: (a) => native.setActive(a),
+    layout: () => {},
+    stop: () => native.stop(),
+  }
+}