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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rafaelaugusto/jolt",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.5",
   "description": "Native animations for NativeScript: presets, springs, keyframes and stagger in one call.",
   "keywords": [
     "nativescript",

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

@@ -12,7 +12,7 @@ import java.lang.reflect.Method;
 /** ObjectAnimator target. All frame updates stay in native code. */
 public final class ColorTarget {
     private static final String BORDER = "org.nativescript.widgets.BorderDrawable";
-    private static final Field[] FIELDS = fields();
+    static final Field[] FIELDS = fields();
     private static final String SHADOW = "org.nativescript.widgets.BoxShadowDrawable";
     private static final Method UNWRAP = unwrapMethod();
     private final WeakReference<View> view;
@@ -49,7 +49,7 @@ public final class ColorTarget {
         }
     }
 
-    private Drawable background(View nativeView) {
+    static Drawable background(View nativeView) {
         Drawable drawable = nativeView.getBackground();
         // Avoid reflective method lookups and exceptions in the frame loop.
         if (drawable != null && drawable.getClass().getName().equals(SHADOW) && UNWRAP != null) {

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

@@ -0,0 +1,154 @@
+package org.rafaelaugusto.jolt;
+
+import android.animation.StateListAnimator;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.ColorDrawable;
+import android.view.View;
+import java.lang.ref.WeakReference;
+import java.lang.reflect.Constructor;
+import java.lang.reflect.Field;
+import java.util.WeakHashMap;
+
+/** ObjectAnimator's float target. No JavaScript enters the native frame loop. */
+public final class DecorationTarget {
+    private static final String BORDER = "org.nativescript.widgets.BorderDrawable";
+    private static final Field[][] FIELDS = fields();
+    private static final Constructor<?> CONSTRUCTOR = constructor();
+    private static final WeakHashMap<View, BackgroundLease> BACKGROUNDS = new WeakHashMap<>();
+    private static final WeakHashMap<View, Lease> LEASES = new WeakHashMap<>();
+    private final WeakReference<View> view;
+    private final int property;
+    private final int borderColor;
+    private float value;
+    private boolean acquired;
+
+    // 0 = uniform radius, 1 = uniform width, 2 = elevation, 3 = translationZ.
+    public DecorationTarget(View view, int property, float value, int borderColor) {
+        this.view = new WeakReference<>(view);
+        this.property = property;
+        this.value = value;
+        this.borderColor = borderColor;
+    }
+    private static Field[][] fields() {
+        try {
+            Class<?> type = Class.forName(BORDER);
+            String[][] names = {
+                {"borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"},
+                {"borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"}
+            };
+            Field[][] result = new Field[2][4];
+            for (int i = 0; i < 2; i++) for (int j = 0; j < 4; j++) {
+                result[i][j] = type.getDeclaredField(names[i][j]);
+                result[i][j].setAccessible(true);
+            }
+            return result;
+        } catch (ReflectiveOperationException | SecurityException exception) { return null; }
+    }
+    private static Constructor<?> constructor() {
+        try { return Class.forName(BORDER).getConstructor(float.class); }
+        catch (ReflectiveOperationException | SecurityException exception) { return null; }
+    }
+    public boolean isSupported() {
+        View nativeView = view.get();
+        if (nativeView == null) return false;
+        if (property >= 2) return true;
+        Drawable drawable = ColorTarget.background(nativeView);
+        return FIELDS != null && ((drawable != null && drawable.getClass().getName().equals(BORDER)) ||
+            ((drawable == null || drawable.getClass() == ColorDrawable.class) && CONSTRUCTOR != null && ColorTarget.FIELDS != null));
+    }
+    public float getValue() { return value; }
+    public void setValue(float next) {
+        View nativeView = view.get();
+        if (nativeView == null) return;
+        value = next;
+        if (property >= 2) suspendStateAnimator(nativeView);
+        if (property == 2) { nativeView.setElevation(next); return; }
+        if (property == 3) { nativeView.setTranslationZ(next); return; }
+        ensureBackground(nativeView);
+        Drawable drawable = ColorTarget.background(nativeView);
+        if (drawable == null || !drawable.getClass().getName().equals(BORDER) || FIELDS == null) return;
+        try {
+            // Core rebuilds the paths from these fields in draw() and getOutline().
+            // Keep its bitmap, gradient, color and all other state on the same drawable.
+            for (Field field : FIELDS[property]) field.setFloat(drawable, next);
+            drawable.invalidateSelf();
+            nativeView.invalidateOutline();
+        } catch (IllegalAccessException exception) { /* Keep Core's final model. */ }
+    }
+    public void acquire() {
+        View nativeView = view.get();
+        if (nativeView == null || acquired) return;
+        acquired = true;
+        if (property < 2) {
+            BackgroundLease lease = BACKGROUNDS.get(nativeView);
+            if (lease == null) { lease = new BackgroundLease(); BACKGROUNDS.put(nativeView, lease); }
+            lease.count++;
+            ensureBackground(nativeView);
+            return;
+        }
+        Lease lease = LEASES.get(nativeView);
+        if (lease == null) {
+            lease = new Lease(nativeView.getStateListAnimator());
+            LEASES.put(nativeView, lease);
+            nativeView.setStateListAnimator(null);
+        }
+        lease.count++;
+        suspendStateAnimator(nativeView);
+    }
+    public void release() {
+        View nativeView = view.get();
+        if (!acquired || nativeView == null) return;
+        acquired = false;
+        if (property < 2) {
+            BackgroundLease lease = BACKGROUNDS.get(nativeView);
+            if (lease != null && --lease.count == 0) {
+                BACKGROUNDS.remove(nativeView);
+                if (lease.drawable != null && nativeView.getBackground() == lease.drawable) nativeView.setBackground(lease.original);
+            }
+            return;
+        }
+        suspendStateAnimator(nativeView);
+        Lease lease = LEASES.get(nativeView);
+        if (lease != null && --lease.count == 0) {
+            LEASES.remove(nativeView);
+            if (nativeView.getStateListAnimator() == null) {
+                float elevation = nativeView.getElevation(), z = nativeView.getTranslationZ();
+                nativeView.setStateListAnimator(lease.animator);
+                if (lease.animator != null) lease.animator.jumpToCurrentState();
+                nativeView.setElevation(elevation);
+                nativeView.setTranslationZ(z);
+            }
+        }
+    }
+    private void ensureBackground(View nativeView) {
+        BackgroundLease lease = BACKGROUNDS.get(nativeView);
+        Drawable original = nativeView.getBackground();
+        if (lease == null || (original != null && original.getClass() != ColorDrawable.class) || CONSTRUCTOR == null || ColorTarget.FIELDS == null) return;
+        try {
+            Drawable drawable = (Drawable) CONSTRUCTOR.newInstance(nativeView.getResources().getDisplayMetrics().density);
+            ColorTarget.FIELDS[0].setInt(drawable, original == null ? 0 : ((ColorDrawable) original).getColor());
+            for (int i = 1; i < ColorTarget.FIELDS.length; i++) ColorTarget.FIELDS[i].setInt(drawable, borderColor);
+            lease.original = original;
+            lease.drawable = drawable;
+            nativeView.setBackground(drawable);
+        } catch (ReflectiveOperationException exception) { /* Unsupported Core. */ }
+    }
+    private static final class BackgroundLease {
+        Drawable original, drawable;
+        int count;
+    }
+    private static void suspendStateAnimator(View view) {
+        Lease lease = LEASES.get(view);
+        StateListAnimator current = view.getStateListAnimator();
+        if (lease != null && current != null) {
+            // A Core model write may have installed an updated state animator.
+            lease.animator = current;
+            view.setStateListAnimator(null);
+        }
+    }
+    private static final class Lease {
+        StateListAnimator animator;
+        int count;
+        Lease(StateListAnimator animator) { this.animator = animator; }
+    }
+}

package/platforms/android/proguard-rules.pro

@@ -4,3 +4,4 @@
 -keepclassmembers class org.nativescript.widgets.BoxShadowDrawable {
     public android.graphics.drawable.Drawable getWrappedDrawable();
 }
+-keep class org.rafaelaugusto.jolt.DecorationTarget { *; }

package/src/animate.ts

@@ -1,3 +1,10 @@
+import {
+  isDecorationProperty,
+  validateDecorationTarget,
+  validateDecorationFrames,
+} from './decoration.js'
+import { playbackGroup } from './playback-group.js'
+import type { PlaybackAnimation } from './playback.js'
 import { View } from '@nativescript/core'
 import {
   isColorProperty,
@@ -57,7 +64,7 @@ export function animate(
   target: Target | readonly Target[],
   animation: Keyframes | PresetName,
   options?: AnimateOptions | SpringName,
-): Animation {
+): PlaybackAnimation {
   const { keyframes, base, overrides, stagger, relative, haptic } = prepare(
     animation,
     options,
@@ -68,6 +75,7 @@ export function animate(
     const view = toView(target)
     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),
@@ -79,7 +87,8 @@ export function animate(
   for (const view of views)
     for (const property of Object.keys(keyframes))
       if (isColorProperty(property)) validateColorTarget(view, property)
-  return group(
+      else if (isDecorationProperty(property)) validateDecorationTarget(view, property)
+  return playbackGroup(
     views.map(
       (view, index) =>
         new ViewAnimation(
@@ -92,6 +101,7 @@ export function animate(
             relative,
           ),
           feedback,
+          true,
         ),
     ),
   )
@@ -102,7 +112,7 @@ export function decay(
   target: Target | readonly Target[],
   velocity: DecayVelocity,
   options: DecayOptions = {},
-): Animation {
+): PlaybackAnimation {
   const friction = options.friction ?? DEFAULT_FRICTION
   if (!Number.isFinite(friction) || friction <= 0 || friction >= 1) {
     throw new RangeError('Decay friction must be between 0 and 1 exclusively.')
@@ -164,8 +174,10 @@ export function decay(
     ]
   })
   const views = toViews(target)
-  if (plans.length === 0) return group([])
-  return group(views.map((view) => new ViewAnimation(view, plans)))
+  if (plans.length === 0) return playbackGroup([])
+  return playbackGroup(
+    views.map((view) => new ViewAnimation(view, plans, undefined, true)),
+  )
 }
 
 /** Stops all or selected properties at their current values. `scale` stops both axes. */
@@ -339,6 +351,7 @@ function toKeyframes(
   ) {
     throw new Error(`Invalid keyframes for "${property}": ${JSON.stringify(value)}.`)
   }
+  if (isDecorationProperty(property)) validateDecorationFrames(property, frames)
   return frames
 }
 

package/src/decoration.ts

@@ -0,0 +1,180 @@
+import { preserveZeroShadow } from './driver/ios-shadow.js'
+import { Color, Utils, isAndroid, type View } from '@nativescript/core'
+
+type Shadow = Exclude<View['boxShadow'], string>[number]
+export type DecorationProperty =
+  | 'borderRadius'
+  | 'borderWidth'
+  | 'shadowOpacity'
+  | 'shadowRadius'
+  | 'shadowOffsetX'
+  | 'shadowOffsetY'
+  | 'elevation'
+  | 'translationZ'
+
+export const decorationProperties: readonly DecorationProperty[] = [
+  'borderRadius',
+  'borderWidth',
+  'shadowOpacity',
+  'shadowRadius',
+  'shadowOffsetX',
+  'shadowOffsetY',
+  'elevation',
+  'translationZ',
+]
+export const radiusKeys = [
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomRightRadius',
+  'borderBottomLeftRadius',
+] as const
+export const widthKeys = [
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+] as const
+const writing = new WeakSet<View>()
+export const isWritingDecoration = (view: View) => writing.has(view)
+export const isDecorationProperty = (key: string): key is DecorationProperty =>
+  decorationProperties.includes(key as DecorationProperty)
+
+/** Core lengths may be numbers, px strings or parsed { value, unit } lengths. */
+export function dip(value: unknown): number {
+  if (value === undefined || value === null) return 0
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string') {
+    const match = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(dip|px)?$/.exec(value.trim())
+    if (match)
+      return Number(match[1]) / (match[2] === 'px' ? Utils.layout.getDisplayDensity() : 1)
+  }
+  if (typeof value === 'object' && 'value' in value && 'unit' in value) {
+    const length = value as { value: number; unit: string }
+    if (Number.isFinite(length.value) && (length.unit === 'dip' || length.unit === 'px'))
+      return length.value / (length.unit === 'px' ? Utils.layout.getDisplayDensity() : 1)
+  }
+  throw new TypeError('Decoration animations require finite DIP or px lengths.')
+}
+
+export function singleShadow(view: View): Shadow {
+  const shadows = view.boxShadow
+  if (!Array.isArray(shadows) || shadows.length !== 1 || shadows[0]!.inset)
+    throw new TypeError('Shadow animation requires one existing outer boxShadow.')
+  return shadows[0]!
+}
+
+export function validateDecorationTarget(view: View, property: DecorationProperty) {
+  const shadow = property.startsWith('shadow')
+  const z = property === 'elevation' || property === 'translationZ'
+  if ((shadow && isAndroid) || (z && !isAndroid))
+    throw new TypeError(`"${property}" is only supported on ${z ? 'Android' : 'iOS'}.`)
+  if (z) return
+  if (view.style.clipPath || view.style.cornerShape === 'squircle')
+    throw new TypeError(
+      'Decoration animations require circular corners without a clipPath.',
+    )
+  for (const keys of [radiusKeys, widthKeys]) {
+    const values = keys.map((key) => dip(view[key]))
+    if (values.some((value) => value !== values[0]))
+      throw new TypeError(
+        'Decoration animations require uniform border widths and radii.',
+      )
+  }
+  const colors = [
+    view.borderTopColor,
+    view.borderRightColor,
+    view.borderBottomColor,
+    view.borderLeftColor,
+  ].map((color) => color?.argb ?? 0)
+  if (colors.some((color) => color !== colors[0]))
+    throw new TypeError('Decoration animations require uniform border colors.')
+  if (shadow) {
+    const value = singleShadow(view)
+    for (const length of [
+      value.offsetX,
+      value.offsetY,
+      value.blurRadius,
+      value.spreadRadius,
+    ])
+      dip(length)
+  }
+  if (
+    property === 'borderRadius' &&
+    isAndroid &&
+    view.boxShadow &&
+    (!Array.isArray(view.boxShadow) || view.boxShadow.length)
+  )
+    throw new TypeError(
+      'Animate Android radius with elevation shadows; CSS boxShadow caches its shape.',
+    )
+}
+
+export function validateDecorationFrames(
+  property: DecorationProperty,
+  frames: readonly (number | null)[],
+) {
+  if (
+    frames.some((value) => value !== null && clampDecoration(property, value) !== value)
+  )
+    throw new RangeError(`Invalid keyframes for "${property}".`)
+}
+export function clampDecoration(property: DecorationProperty, value: number): number {
+  if (property === 'shadowOpacity') return Math.max(0, Math.min(1, value))
+  return property === 'borderRadius' ||
+    property === 'borderWidth' ||
+    property === 'shadowRadius' ||
+    property === 'elevation'
+    ? Math.max(0, value)
+    : value
+}
+
+export function readDecoration(view: View, property: DecorationProperty): number {
+  if (property === 'borderRadius') {
+    const radius = !isAndroid ? view.nativeViewProtected?.layer?.cornerRadius : undefined
+    return typeof radius === 'number' ? radius : dip(view.borderTopLeftRadius)
+  }
+  if (property === 'borderWidth') return dip(view.borderTopWidth)
+  if (property === 'elevation')
+    return view.nativeViewProtected?.getElevation
+      ? view.nativeViewProtected.getElevation() / Utils.layout.getDisplayDensity()
+      : view.androidElevation || 0
+  if (property === 'translationZ')
+    return (
+      view.nativeViewProtected?.getTranslationZ?.() / Utils.layout.getDisplayDensity() ||
+      0
+    )
+  const shadow = singleShadow(view)
+  if (property === 'shadowOpacity')
+    return ((shadow.color?.argb ?? 0xff000000) >>> 24) / 255
+  return property === 'shadowRadius'
+    ? dip(shadow.blurRadius) / 2
+    : dip(property === 'shadowOffsetX' ? shadow.offsetX : shadow.offsetY)
+}
+
+export function writeDecoration(view: View, property: DecorationProperty, raw: number) {
+  const value = clampDecoration(property, raw)
+  writing.add(view)
+  try {
+    if (property === 'borderRadius' || property === 'borderWidth') view[property] = value
+    else if (property === 'elevation') view.androidElevation = value
+    else if (property === 'translationZ')
+      view.nativeViewProtected?.setTranslationZ?.(
+        value * Utils.layout.getDisplayDensity(),
+      )
+    else {
+      const shadow = { ...singleShadow(view) }
+      if (property === 'shadowOpacity')
+        shadow.color = new Color(
+          ((Math.round(value * 255) << 24) | ((shadow.color?.argb ?? 0) & 0xffffff)) >>>
+            0,
+        )
+      else if (property === 'shadowRadius') shadow.blurRadius = value * 2
+      else if (property === 'shadowOffsetX') shadow.offsetX = value
+      else shadow.offsetY = value
+      view.boxShadow = [shadow]
+      if (!isAndroid) preserveZeroShadow(view)
+    }
+  } finally {
+    writing.delete(view)
+  }
+}

package/src/driver/android-color.ts

@@ -1,5 +1,7 @@
 import { type View } from '@nativescript/core'
 import { readColor, type ColorProperty } from '../color.js'
+import { androidPlayback, type AndroidPlayback } from './android-playback.js'
+import type { PlaybackCommand } from '../playback.js'
 import type { Track } from '../track.js'
 
 interface NativeTarget {
@@ -8,12 +10,18 @@ interface NativeTarget {
   isSupported(): boolean
 }
 interface ColorHandle {
+  control(elapsed: number, paused: boolean, command?: PlaybackCommand): void
   cancel(): void
   elapsed(): number
   target: NativeTarget
 }
 const playing = new WeakMap<View, Map<ColorProperty, ColorHandle>>()
 
+export function syncAndroidColor(view: View) {
+  for (const handle of playing.get(view)?.values() ?? [])
+    handle.target.setColor(handle.target.getColor())
+}
+
 export function presentedAndroidColor(view: View, property: ColorProperty): number {
   const active = playing.get(view)?.get(property)
   if (active) return active.target.getColor() >>> 0
@@ -62,6 +70,7 @@ export function playAndroidColor(
     onEnd(false)
     return {
       cancel() {},
+      control() {},
       elapsed: () => 0,
       target: {
         getColor: () => readColor(view, property),
@@ -98,7 +107,6 @@ export function playAndroidColor(
     )
   }
   let stopped = false,
-    started = false,
     queued = false
   const cleanup = () => {
     if (stopped) return
@@ -111,10 +119,11 @@ export function playAndroidColor(
     for (const name of changes) view.style.off(name, invalidate)
     if (playing.get(view)?.get(property) === handle) playing.get(view)?.delete(property)
   }
+  let player: AndroidPlayback | undefined
   const cancel = () => {
     if (stopped) return
     cleanup()
-    animator.cancel()
+    player?.cancel()
     onEnd(false)
   }
   const invalidate = () => {
@@ -127,30 +136,18 @@ export function playAndroidColor(
   }
   const handle: ColorHandle = {
     target,
-    elapsed: () => (started ? track.delay + animator.getCurrentPlayTime() : 0),
+    elapsed: () => player?.elapsed() ?? 0,
+    control(time, paused, command) {
+      player?.control(time, paused, command)
+    },
     cancel() {
       cleanup()
-      animator.cancel()
+      player?.cancel()
     },
   }
   let entries = playing.get(view)
   if (!entries) playing.set(view, (entries = new Map()))
   entries.set(property, handle)
-  animator.addListener(
-    new android.animation.Animator.AnimatorListener({
-      onAnimationStart() {
-        started = true
-      },
-      onAnimationRepeat() {},
-      onAnimationCancel() {},
-      onAnimationEnd() {
-        if (!stopped) {
-          cleanup()
-          onEnd()
-        }
-      },
-    }),
-  )
   view.on('unloaded', cancel)
   if (property === 'color') {
     view.on('textChange', invalidate)
@@ -159,7 +156,12 @@ export function playAndroidColor(
   for (const name of changes) view.style.on(name, invalidate)
   if (target.isSupported()) {
     target.setColor(track.values[0]! | 0)
-    animator.start()
+    player = androidPlayback(animator, track, () => {
+      if (!stopped) {
+        cleanup()
+        onEnd()
+      }
+    })
   } else {
     cleanup()
     onEnd(false)