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

package/src/engine.ts

@@ -13,6 +13,7 @@ import { createTrack, type Track } from './track.js'
 import type { ResolvedTransition } from './transition.js'
 import { isColorProperty } from './color.js'
 import type { PreparedPath, PathProperty } from './path.js'
+import { BASE, identity, MixHandle, mixFor, mixOf, mixesOf } from './mixer.js'
 
 export interface Animation extends PromiseLike<boolean> {
   /**
@@ -32,10 +33,17 @@ export interface Plan {
   transition: ResolvedTransition
   relative?: boolean
   path?: PreparedPath
+  /** A track that is already sampled, like a motion value mapped onto a property. */
+  track?: () => Track
+  /** A named layer composed with the property's base instead of replacing it. */
+  layer?: string
 }
 
 interface Entry {
   readonly track: Track
+  /** The property, or the property and its layer. */
+  readonly key: string
+  readonly layer?: string
   readonly startedAt: number
   readonly owner: ViewAnimation
   handle: unknown
@@ -48,7 +56,7 @@ interface Entry {
 
 const revisions = new WeakMap<View, Map<Property, symbol>>()
 
-const running = new WeakMap<View, Map<Property, Entry>>()
+const running = new WeakMap<View, Map<string, Entry>>()
 const arrivals = new WeakMap<Animation, Promise<unknown>>()
 
 /** Internal forecast for starting a timeline step before another one arrives. */
@@ -188,7 +196,7 @@ export class ViewAnimation implements PlaybackAnimation {
         entry.done = false
         entry.finished = false
         this.pending++
-        entriesOf(this.view).set(entry.track.property, entry)
+        entriesOf(this.view).set(entry.key, entry)
         this.playEntry(entry, position)
       }
     }
@@ -199,9 +207,9 @@ export class ViewAnimation implements PlaybackAnimation {
     this.timingChanged()
   }
   elapsed(entry: Entry, now: number) {
-    return this.controlled
-      ? this.time()
-      : (getDriver().elapsed?.(entry.handle) ?? now - entry.startedAt)
+    if (this.controlled) return this.time()
+    if (entry.handle instanceof MixHandle) return entry.handle.elapsed()
+    return getDriver().elapsed?.(entry.handle) ?? now - entry.startedAt
   }
   private time() {
     return this.clock?.time() ?? 0
@@ -209,8 +217,10 @@ export class ViewAnimation implements PlaybackAnimation {
   private controlTracks(position: number, command: PlaybackCommand = 'seek') {
     const driver = getDriver()
     for (const entry of this.entries)
-      if (!entry.done)
-        driver.control?.(this.view, entry.handle, position, this._paused, command)
+      if (entry.done) continue
+      else if (entry.handle instanceof MixHandle)
+        entry.handle.control(position, this._paused)
+      else driver.control?.(this.view, entry.handle, position, this._paused, command)
   }
   private scheduleArrival() {
     this.cancelArrival?.()
@@ -244,19 +254,31 @@ export class ViewAnimation implements PlaybackAnimation {
     const initial = entry.generation === 0
     const instance = ++entry.generation
     const driver = getDriver()
-    entry.handle = driver.play(
-      this.view,
-      entry.track,
-      initial ? entry.startedAt : driver.now() - elapsed,
-      (finished = true) => {
-        if (entry.done || instance !== entry.generation) return
-        entry.done = true
-        entry.finished = finished
-        entry.completedValue = readValue(this.view, entry.track.property)
-        forget(entry)
-        this.ended(finished)
-      },
-    )
+    const startedAt = initial ? entry.startedAt : driver.now() - elapsed
+    const onEnd = (finished = true) => {
+      if (entry.done || instance !== entry.generation) return
+      entry.done = true
+      entry.finished = finished
+      entry.completedValue = readValue(this.view, entry.track.property)
+      forget(entry)
+      this.ended(finished)
+    }
+    const { property } = entry.track
+    const mix =
+      entry.layer !== undefined ? mixing(this.view, property) : mixOf(this.view, property)
+    entry.handle = mix
+      ? mix.adopt(entry.layer ?? BASE, entry.track, startedAt, onEnd)
+      : driver.play(this.view, entry.track, startedAt, onEnd)
+  }
+
+  /** Moves a natively playing entry into its property's mix, without restarting it. */
+  rehome(entry: Entry) {
+    if (entry.done || entry.handle instanceof MixHandle) return
+    const elapsed = this.elapsed(entry, getDriver().now())
+    const handle = entry.handle
+    entry.generation++
+    getDriver().stop(this.view, handle)
+    this.playEntry(entry, elapsed)
   }
   private unloaded = () => this.stop()
 
@@ -322,52 +344,78 @@ export class ViewAnimation implements PlaybackAnimation {
     const now = driver.now()
     const entries = entriesOf(this.view)
 
-    const tracks = plans.map(({ property, keyframes, transition, relative, path }) => {
-      const previous = entries.get(property)
+    const made = plans.map((plan) => {
+      const { property, keyframes, transition, relative, path, layer } = plan
+      const key = layer === undefined ? property : `${property}#${layer}`
+      const mixed = layer !== undefined || mixOf(this.view, property) !== undefined
+      const previous = entries.get(key)
       let current: number
       let velocity = 0
       if (previous) {
         const elapsed = elapsedOf(previous, now)
-        current = driver.presented(this.view, property) ?? previous.track.valueAt(elapsed)
+        current =
+          (mixed ? undefined : driver.presented(this.view, property)) ??
+          previous.track.valueAt(elapsed)
         velocity = previous.owner.paused ? 0 : previous.track.velocityAt(elapsed)
         release(previous, now, false)
+      } else if (mixed) {
+        current =
+          mixOf(this.view, property)?.rest(layer ?? BASE) ??
+          (layer === undefined ? readValue(this.view, property) : identity(property))
       } else {
         current =
           (isColorProperty(property)
             ? driver.presented(this.view, property)
             : undefined) ?? readValue(this.view, property)
       }
-      if (path)
-        return path.track(
-          property as PathProperty,
-          relative ? current : 0,
-          transition.delay,
+      const build = () => {
+        if (plan.track) return plan.track()
+        if (path)
+          return path.track(
+            property as PathProperty,
+            relative ? current : 0,
+            transition.delay,
+          )
+        return createTrack(
+          property,
+          keyframes.map((value) => {
+            if (value === null) return current
+            if (layer !== undefined || !relative || isColorProperty(property))
+              return value
+            return property === 'opacity' || property.startsWith('scale')
+              ? current * value
+              : current + value
+          }),
+          transition,
+          velocity,
         )
-      return createTrack(
-        property,
-        keyframes.map((value) => {
-          if (value === null) return current
-          if (!relative || isColorProperty(property)) return value
-          return property === 'opacity' || property.startsWith('scale')
-            ? current * value
-            : current + value
-        }),
-        transition,
-        velocity,
-      )
+      }
+      return { track: build(), key, layer }
     })
-
-    for (const track of tracks) writeValue(this.view, track.property, track.to)
+    const tracks = made.map(({ track }) => track)
+
+    for (const { track, layer } of made) {
+      const mix =
+        layer !== undefined
+          ? mixing(this.view, track.property)
+          : mixOf(this.view, track.property)
+      if (!mix) writeValue(this.view, track.property, track.to)
+      else if (track.end === 0) mix.setRest(layer ?? BASE, track.to)
+    }
     driver.sync?.(this.view)
 
-    for (const track of tracks) {
-      let tokens = revisions.get(this.view)
-      if (!tokens) revisions.set(this.view, (tokens = new Map()))
+    for (const { track, key, layer } of made) {
       const token = Symbol(track.property)
-      tokens.set(track.property, token)
+      if (layer === undefined) {
+        let tokens = revisions.get(this.view)
+        if (!tokens) revisions.set(this.view, (tokens = new Map()))
+        tokens.set(track.property, token)
+      }
       if (track.end === 0) continue
       const entry: Entry = {
         track,
+        key,
+        layer,
         startedAt: now,
         owner: this,
         handle: undefined,
@@ -376,7 +424,7 @@ export class ViewAnimation implements PlaybackAnimation {
         generation: 0,
         token,
       }
-      entries.set(track.property, entry)
+      entries.set(key, entry)
       this.entries.push(entry)
       this.pending++
     }
@@ -405,8 +453,8 @@ export class ViewAnimation implements PlaybackAnimation {
   }
 
   private waitForLoad(plans: readonly Plan[]) {
-    for (const { property, keyframes, relative } of plans) {
-      if (relative && !isColorProperty(property)) continue
+    for (const { property, keyframes, relative, layer } of plans) {
+      if (layer !== undefined || (relative && !isColorProperty(property))) continue
       const first = keyframes[0]
       if (first !== null && first !== undefined) writeValue(this.view, property, first)
     }
@@ -438,6 +486,8 @@ export class ViewAnimation implements PlaybackAnimation {
 
 /** Current native presentation when available, otherwise the active curve or model. */
 export function currentValue(view: View, property: Property): number {
+  const mix = mixOf(view, property)
+  if (mix) return mix.value()
   const entry = running.get(view)?.get(property)
   if (!entry) return readValue(view, property)
   const driver = getDriver()
@@ -465,19 +515,69 @@ export function captureValue(view: View, property: Property): () => number | und
   }
 }
 
-/** Stops whatever is animating these properties of the view, or all of them. */
+/** Stops whatever is animating these properties of the view, or all of them, layers included. */
 export function stopView(view: View, properties?: readonly Property[]) {
   const tokens = revisions.get(view)
   for (const property of properties ?? tokens?.keys() ?? [])
     tokens?.set(property, Symbol(property))
+  for (const mix of mixesOf(view))
+    if (!properties || properties.includes(mix.property)) mix.freeze()
   const entries = running.get(view)
   if (!entries) return
   const now = getDriver().now()
-  for (const [property, entry] of [...entries]) {
-    if (!properties || properties.includes(property)) release(entry, now, true)
+  for (const entry of [...entries.values()]) {
+    if (!properties || properties.includes(entry.track.property))
+      release(entry, now, true)
+  }
+}
+
+/** Stops the regular animations of these properties and leaves their layers running. */
+export function stopBase(view: View, properties: readonly Property[]) {
+  const tokens = revisions.get(view)
+  for (const property of properties) tokens?.set(property, Symbol(property))
+  const now = getDriver().now()
+  for (const property of properties) {
+    const entry = running.get(view)?.get(property)
+    if (entry) release(entry, now, true)
   }
 }
 
+/** Stops one layer and takes away what it adds, also after it finished. */
+export function stopLayer(view: View, layer: string, properties?: readonly Property[]) {
+  const now = getDriver().now()
+  for (const entry of [...(running.get(view)?.values() ?? [])])
+    if (
+      entry.layer === layer &&
+      (!properties || properties.includes(entry.track.property))
+    )
+      release(entry, now, true)
+  for (const mix of mixesOf(view))
+    if (!properties || properties.includes(mix.property))
+      mix.setRest(layer, identity(mix.property))
+}
+
+/** Writes a property's base value, under its layers when it has any. */
+export function setBase(view: View, property: Property, value: number) {
+  const mix = mixOf(view, property)
+  if (mix) mix.setRest(BASE, value)
+  else writeValue(view, property, value)
+}
+
+/** A property's base value, without what its layers add. */
+export function baseValue(view: View, property: Property): number {
+  return mixOf(view, property)?.rest(BASE) ?? readValue(view, property)
+}
+
+/** The property's mix, created on its first layer; a base playing natively moves into it. */
+function mixing(view: View, property: Property) {
+  const existing = mixOf(view, property)
+  if (existing) return existing
+  const mix = mixFor(view, property)
+  const base = running.get(view)?.get(property)
+  if (base) base.owner.rehome(base)
+  return mix
+}
+
 function entriesOf(view: View) {
   let entries = running.get(view)
   if (!entries) running.set(view, (entries = new Map()))
@@ -486,7 +586,7 @@ function entriesOf(view: View) {
 
 function forget(entry: Entry) {
   const entries = running.get(entry.owner.view)
-  if (entries?.get(entry.track.property) === entry) entries.delete(entry.track.property)
+  if (entries?.get(entry.key) === entry) entries.delete(entry.key)
 }
 
 function release(entry: Entry, now: number, commit: boolean) {
@@ -495,6 +595,11 @@ function release(entry: Entry, now: number, commit: boolean) {
   const { property } = entry.track
   entry.done = true
   forget(entry)
+  if (entry.handle instanceof MixHandle) {
+    entry.handle.mix.detach(entry.layer ?? BASE, commit)
+    entry.owner.ended(false)
+    return
+  }
   if (commit) {
     const value =
       driver.presented(view, property) ?? entry.track.valueAt(elapsedOf(entry, now))

package/src/gradient.ts

@@ -345,10 +345,16 @@ export function gradientPoints(
   const sin = Math.sin(radians)
   const cos = Math.cos(radians)
   if (type === 'linear') {
-    const length = Math.abs(width * sin) + Math.abs(height * cos)
-    const dx = width > 0 ? (sin * length) / (2 * width) : 0
-    const dy = height > 0 ? (-cos * length) / (2 * height) : 0
-    return { start: { x: 0.5 - dx, y: 0.5 - dy }, end: { x: 0.5 + dx, y: 0.5 + dy } }
+    // Core Animation keeps an axial gradient's bands square to its line in unit space, so
+    // on a box that isn't square the line leans to keep them square to `angle` on screen.
+    const ux = height > 0 ? sin / height : 0
+    const uy = width > 0 ? -cos / width : 0
+    const squared = ux * ux + uy * uy
+    const reach = squared > 0 ? (Math.abs(ux) + Math.abs(uy)) / (2 * squared) : 0
+    return {
+      start: { x: 0.5 - ux * reach, y: 0.5 - uy * reach },
+      end: { x: 0.5 + ux * reach, y: 0.5 + uy * reach },
+    }
   }
   const center = { x: frame.x, y: frame.y }
   const shorter = Math.min(width, height)

package/src/index.ts

@@ -1,11 +1,27 @@
 export { animate, decay, set, stop } from './animate.js'
+export { bind, motionValue, scrollValue } from './motion-value.js'
+export type {
+  Bindings,
+  DerivedColor,
+  DerivedValue,
+  MapOptions,
+  MotionValue,
+  ScrollValue,
+} from './motion-value.js'
 export { sequence } from './sequence.js'
 export type { Step, SequenceOptions, SequencePosition } from './sequence.js'
 export { press } from './press.js'
 export { interactionSurface } from './interaction-surface.js'
 export type { InteractionSurface } from './interaction-surface.js'
 export { drag } from './drag.js'
-export type { Drag, DragOptions, DragPoint, DragEvent, DragRelease } from './drag.js'
+export type {
+  Drag,
+  DragOptions,
+  DragValueOptions,
+  DragPoint,
+  DragEvent,
+  DragRelease,
+} from './drag.js'
 export { scrollLinked } from './scroll-linked.js'
 export type { ScrollLinkedOptions } from './scroll-linked.js'
 export { animateItems } from './items.js'
@@ -56,6 +72,7 @@ export type { Preset, PresetName, Presets } from './presets.js'
 export { origamiSpring, springs } from './transition.js'
 export type {
   OrigamiSpring,
+  RepeatDelayRange,
   Spring,
   SpringName,
   Timing,

package/src/keyboard.ts

@@ -1,7 +1,7 @@
 import { Application, Utils, isAndroid, isIOS, type View } from '@nativescript/core'
-import { stop, toView } from './animate.js'
+import { animate, stop, toView } from './animate.js'
 import type { EasingFunction, EasingName } from './easing.js'
-import type { Spring, Transition } from './transition.js'
+import type { Spring, Transition, Tween } from './transition.js'
 import type { Target } from './types.js'
 
 export interface KeyboardOptions {
@@ -30,6 +30,12 @@ const iosKeyboard: Spring = {
   damping: 2 * Math.sqrt(3000),
 }
 const iosCurves: readonly EasingName[] = ['easeInOut', 'easeIn', 'easeOut', 'linear']
+// Before Android 11 nothing reports the keyboard's timing. Measured on an Android 9 emulator,
+// its window fades and slides into place in about 150 ms, decelerating, and leaves as quickly.
+const LEGACY_DURATION = 150
+const legacyShow: Tween = { duration: LEGACY_DURATION, ease: 'quadOut' }
+const legacyHide: Tween = { duration: LEGACY_DURATION, ease: 'quadIn' }
+const legacy = () => isAndroid && android.os.Build.VERSION.SDK_INT < 30
 const hidden: KeyboardState = Object.freeze({
   visible: false,
   height: 0,
@@ -109,9 +115,11 @@ function watchIOS() {
 }
 
 function watchAndroid() {
-  if (android.os.Build.VERSION.SDK_INT < 30) return undefined
   const density = Utils.layout.getDisplayDensity()
-  let observer: org.rafaelaugusto.jolt.KeyboardObserver | undefined
+  let observer:
+    | org.rafaelaugusto.jolt.KeyboardObserver
+    | org.rafaelaugusto.jolt.KeyboardFrame
+    | undefined
   let stopped = false
   const attach = () => {
     Application.off(Application.launchEvent, attach)
@@ -121,19 +129,31 @@ function watchAndroid() {
     const root = activity?.getWindow()?.getDecorView()
     if (!root) return
     try {
-      observer = new org.rafaelaugusto.jolt.KeyboardObserver(
-        root,
-        new org.rafaelaugusto.jolt.KeyboardObserver.Listener({
-          onChange: (height, duration, curve) =>
-            update(
-              height / density,
-              duration,
-              duration
-                ? { duration, ease: curve ? sampled(curve) : 'linear' }
-                : { duration: 0 },
-            ),
-        }),
-      )
+      observer = legacy()
+        ? new org.rafaelaugusto.jolt.KeyboardFrame(
+            root,
+            new org.rafaelaugusto.jolt.KeyboardFrame.Listener({
+              onChange: (height) =>
+                update(
+                  height / density,
+                  LEGACY_DURATION,
+                  height ? legacyShow : legacyHide,
+                ),
+            }),
+          )
+        : new org.rafaelaugusto.jolt.KeyboardObserver(
+            root,
+            new org.rafaelaugusto.jolt.KeyboardObserver.Listener({
+              onChange: (height, duration, curve) =>
+                update(
+                  height / density,
+                  duration,
+                  duration
+                    ? { duration, ease: curve ? sampled(curve) : 'linear' }
+                    : { duration: 0 },
+                ),
+            }),
+          )
     } catch {
       // A JS-only update cannot install the native plugin.
       return
@@ -241,7 +261,7 @@ function followIOS(view: View, offset: number) {
 }
 
 function followAndroid(view: View, offset: number) {
-  if (android.os.Build.VERSION.SDK_INT < 30) return () => {}
+  if (legacy()) return followLegacy(view, offset)
   const density = Utils.layout.getDisplayDensity()
   let disposed = false
   let follower: org.rafaelaugusto.jolt.KeyboardFollower | undefined
@@ -283,6 +303,51 @@ function followAndroid(view: View, offset: number) {
   return cleanup
 }
 
+/** Android 7 to 10: no frame-by-frame progress, so the view animates with the keyboard's usual timing. */
+function followLegacy(view: View, offset: number) {
+  const density = Utils.layout.getDisplayDensity()
+  let disposed = false
+  let follower: org.rafaelaugusto.jolt.KeyboardFrameFollower | undefined
+  const attach = () => {
+    if (disposed || follower) return
+    const native = view.nativeViewProtected as android.view.View | undefined
+    if (!native) return
+    try {
+      follower = new org.rafaelaugusto.jolt.KeyboardFrameFollower(
+        native,
+        offset * density,
+        new org.rafaelaugusto.jolt.KeyboardFrameFollower.Listener({
+          onMove: (from, to, keyboard) => {
+            stop(view, ['y'])
+            view.translateY = from / density
+            animate(view, { y: to / density }, keyboard ? legacyShow : legacyHide)
+          },
+        }),
+      )
+    } catch {
+      // A JS-only update cannot install the native plugin. Leave the platform's resize in place.
+      return
+    }
+    follower.attach()
+  }
+  const cleanup = () => {
+    if (disposed) return
+    disposed = true
+    view.off('loaded', attach)
+    view.off('unloaded', cleanup)
+    if (follower) {
+      follower.detach()
+      follower = undefined
+      stop(view, ['y'])
+      view.translateY = 0
+    }
+  }
+  view.on('loaded', attach)
+  view.on('unloaded', cleanup)
+  if (view.isLoaded) attach()
+  return cleanup
+}
+
 /** The runtime hands NSNumber values over as plain numbers. */
 function numberIn(info: NSDictionary<unknown, unknown>, key: string): number {
   const value = info.objectForKey(key) as number | NSNumber | null | undefined