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

package/platforms/ios/src/JoltPhotoZoom.m

@@ -0,0 +1,229 @@
+#import "JoltPhotoZoom.h"
+#import <QuartzCore/QuartzCore.h>
+
+static double JoltClamp(double v,double lo,double hi){return MAX(lo,MIN(hi,v));}
+static double JoltRubber(double v,double lo,double hi,double size){
+    double edge=JoltClamp(v,lo,hi),d=v-edge;
+    return edge+copysign(size*(1-1/(fabs(d)*.55/MAX(size,1)+1)),d);
+}
+
+@interface JoltPhotoZoom () <UIGestureRecognizerDelegate>
+@property(nonatomic,weak) UIImageView *image;
+@property(nonatomic,weak) UIView *viewport,*backdrop,*chrome;
+@property(nonatomic,strong) UIPinchGestureRecognizer *pinch;
+@property(nonatomic,strong) UIPanGestureRecognizer *pan;
+@property(nonatomic,strong) UITapGestureRecognizer *tap;
+@property(nonatomic,strong) CADisplayLink *clock;
+@property(nonatomic,copy) void (^onDismiss)(double,double,double,double,double);
+@property(nonatomic,copy) void (^onSettled)(double,double,double);
+@property(nonatomic) CGAffineTransform original;
+@property(nonatomic) BOOL originalInteraction,originalClip,reduced,active,disposed,dismiss,closing;
+@property(nonatomic) double minimum,maximum,doubleTap,backdropAlpha,chromeAlpha;
+@property(nonatomic,readwrite) double x,y,scale,dismissProgress;
+@property(nonatomic,readwrite) BOOL dismissPending;
+@property(nonatomic) CGPoint anchor,lastFocus,lastPan,initialTranslation;
+@property(nonatomic) CGPoint rawPan;
+@property(nonatomic) double pinchFloor;
+@property(nonatomic) CGRect content;
+@property(nonatomic) CGSize viewportSize,imageSize;
+@property(nonatomic) NSInteger mode,touches;
+@property(nonatomic) double vx,vy,startTime,startX,startY,startScale,startProgress,targetX,targetY,targetScale;
+@end
+
+@implementation JoltPhotoZoom
++ (instancetype)attachImage:(UIImageView *)image viewport:(UIView *)viewport
+                    minimum:(double)minimum maximum:(double)maximum doubleTap:(double)doubleTap
+                    dismiss:(BOOL)dismiss reduced:(BOOL)reduced backdrop:(UIView *)backdrop chrome:(UIView *)chrome
+                  onDismiss:(void (^)(double,double,double,double,double))onDismiss
+                  onSettled:(void (^)(double,double,double))onSettled {
+    JoltPhotoZoom *z=[JoltPhotoZoom new];
+    z.image=image;z.viewport=viewport;z.backdrop=backdrop;z.chrome=chrome;
+    z.minimum=minimum;z.maximum=maximum;z.doubleTap=doubleTap;z.dismiss=dismiss;z->_reduced=reduced;z.active=YES;
+    z.onDismiss=onDismiss;z.onSettled=onSettled;
+    z.original=image.transform;z.originalInteraction=viewport.userInteractionEnabled;z.originalClip=viewport.clipsToBounds;
+    z.backdropAlpha=backdrop?backdrop.alpha:1;z.chromeAlpha=chrome?chrome.alpha:1;z.scale=minimum;
+    z.pan=[[UIPanGestureRecognizer alloc] initWithTarget:z action:@selector(panned:)];
+    z.pinch=[[UIPinchGestureRecognizer alloc] initWithTarget:z action:@selector(pinched:)];
+    z.tap=[[UITapGestureRecognizer alloc] initWithTarget:z action:@selector(tapped:)];
+    z.tap.numberOfTapsRequired=2;z.pan.delegate=z;z.pinch.delegate=z;z.tap.delegate=z;
+    [viewport addGestureRecognizer:z.pan];[viewport addGestureRecognizer:z.pinch];[viewport addGestureRecognizer:z.tap];
+    viewport.userInteractionEnabled=YES;viewport.clipsToBounds=YES;
+    [z measure];[z apply];
+    return z;
+}
+- (void)measure {
+    self.viewportSize=self.viewport.bounds.size;self.imageSize=self.image.bounds.size;
+    CGSize intrinsic=self.image.image.size;
+    double iw=self.imageSize.width,ih=self.imageSize.height,dw=intrinsic.width,dh=intrinsic.height;
+    if(dw<=0 || dh<=0){dw=iw;dh=ih;}
+    UIViewContentMode fit=self.image.contentMode;
+    double factor=fit==UIViewContentModeScaleAspectFill?MAX(iw/dw,ih/dh):MIN(iw/dw,ih/dh);
+    if(fit==UIViewContentModeScaleToFill){dw=iw;dh=ih;}
+    else if(fit!=UIViewContentModeCenter && fit!=UIViewContentModeTopLeft){dw*=factor;dh*=factor;}
+    CGPoint pivot=CGPointMake(self.image.layer.anchorPoint.x*iw,self.image.layer.anchorPoint.y*ih);
+    self.anchor=CGPointMake(self.image.layer.position.x+self.original.tx,self.image.layer.position.y+self.original.ty);
+    double ox=fit==UIViewContentModeTopLeft?0:(iw-dw)/2,oy=fit==UIViewContentModeTopLeft?0:(ih-dh)/2;
+    double left=MAX(0,ox),top=MAX(0,oy),right=MIN(iw,ox+dw),bottom=MIN(ih,oy+dh);
+    self.content=CGRectMake((left-pivot.x)*self.original.a,(top-pivot.y)*self.original.d,(right-left)*self.original.a,(bottom-top)*self.original.d);
+}
+- (CGRect)boundsFor:(double)scale {
+    double loX=self.viewportSize.width-self.anchor.x-CGRectGetMaxX(self.content)*scale;
+    double hiX=-self.anchor.x-CGRectGetMinX(self.content)*scale;
+    double loY=self.viewportSize.height-self.anchor.y-CGRectGetMaxY(self.content)*scale;
+    double hiY=-self.anchor.y-CGRectGetMinY(self.content)*scale;
+    if(loX>hiX)loX=hiX=(loX+hiX)/2;
+    if(loY>hiY)loY=hiY=(loY+hiY)/2;
+    return CGRectMake(loX,loY,hiX-loX,hiY-loY);
+}
+- (void)apply {
+    self.image.transform=CGAffineTransformMake(self.original.a*self.scale,0,0,self.original.d*self.scale,self.original.tx+self.x,self.original.ty+self.y);
+    self.backdrop.alpha=self.backdropAlpha*(1-self.dismissProgress);
+    self.chrome.alpha=self.chromeAlpha*(1-self.dismissProgress);
+}
+- (void)zoom:(double)value focusX:(double)fx focusY:(double)fy animated:(BOOL)animated {
+    if(self.disposed || self.dismissPending)return;
+    [self cancelAnimation];double next=JoltClamp(value,self.minimum,self.maximum);
+    double x=fx-self.anchor.x-(fx-self.anchor.x-self.x)*next/self.scale;
+    double y=fy-self.anchor.y-(fy-self.anchor.y-self.y)*next/self.scale;
+    CGRect b=[self boundsFor:next];
+    [self springX:JoltClamp(x,CGRectGetMinX(b),CGRectGetMaxX(b)) y:JoltClamp(y,CGRectGetMinY(b),CGRectGetMaxY(b)) scale:next vx:0 vy:0 animated:animated close:NO];
+}
+- (void)reset:(BOOL)animated {
+    if(self.disposed)return;
+    self.dismissPending=NO;self.mode=0;CGRect b=[self boundsFor:self.minimum];
+    [self springX:JoltClamp(0,CGRectGetMinX(b),CGRectGetMaxX(b)) y:JoltClamp(0,CGRectGetMinY(b),CGRectGetMaxY(b)) scale:self.minimum vx:0 vy:0 animated:animated close:NO];
+}
+- (void)requestDismiss {
+    if(self.disposed || self.dismissPending || !self.dismiss)return;
+    CGRect b=[self boundsFor:self.minimum];
+    [self springX:JoltClamp(0,CGRectGetMinX(b),CGRectGetMaxX(b)) y:JoltClamp(0,CGRectGetMinY(b),CGRectGetMaxY(b)) scale:self.minimum vx:0 vy:0 animated:YES close:YES];
+}
+- (void)setReduced:(BOOL)reduced { _reduced=reduced;if(reduced){if(self.dismissPending)[self reset:NO];else [self settle:NO];} }
+- (void)setActive:(BOOL)active {
+    _active=active;self.pan.enabled=active;self.pinch.enabled=active;self.tap.enabled=active;
+    if(!active){[self cancelAnimation];self.dismissPending=NO;[self reset:NO];}
+}
+- (void)layout {
+    if(self.disposed)return;
+    if(CGSizeEqualToSize(self.viewportSize,self.viewport.bounds.size) && CGSizeEqualToSize(self.imageSize,self.image.bounds.size))return;
+    [self cancelAnimation];self.dismissPending=NO;[self measure];self.vx=0;self.vy=0;self.mode=0;[self settle:NO];
+}
+- (void)stop {
+    if(self.disposed)return;
+    self.disposed=YES;[self cancelAnimation];
+    [self.viewport removeGestureRecognizer:self.pan];[self.viewport removeGestureRecognizer:self.pinch];[self.viewport removeGestureRecognizer:self.tap];
+    self.viewport.userInteractionEnabled=self.originalInteraction;self.viewport.clipsToBounds=self.originalClip;
+    self.image.transform=self.original;self.backdrop.alpha=self.backdropAlpha;self.chrome.alpha=self.chromeAlpha;
+    self.onDismiss=nil;self.onSettled=nil;
+}
+- (void)cancelAnimation { [self.clock invalidate];self.clock=nil;self.closing=NO; }
+- (void)springX:(double)x y:(double)y scale:(double)scale vx:(double)vx vy:(double)vy animated:(BOOL)animated close:(BOOL)close {
+    [self cancelAnimation];
+    if(!animated || self.reduced){
+        self.x=x;self.y=y;self.scale=scale;self.dismissProgress=0;[self apply];
+        if(close)[self emitDismiss:0];else if(self.onSettled)self.onSettled(x,y,scale);
+        return;
+    }
+    self.startX=self.x;self.startY=self.y;self.startScale=self.scale;self.startProgress=self.dismissProgress;
+    self.targetX=x;self.targetY=y;self.targetScale=scale;self.vx=vx;self.vy=vy;self.closing=close;
+    self.startTime=CACurrentMediaTime();self.clock=[CADisplayLink displayLinkWithTarget:self selector:@selector(tick:)];
+    self.clock.preferredFramesPerSecond=MIN(120,self.viewport.window.screen.maximumFramesPerSecond);
+    [self.clock addToRunLoop:NSRunLoop.mainRunLoop forMode:NSRunLoopCommonModes];
+}
+- (void)tick:(CADisplayLink *)clock {
+    double t=MIN(.55,MAX(0,CACurrentMediaTime()-self.startTime)),decay=exp(-16*t);
+    self.x=self.targetX+((self.startX-self.targetX)+(self.vx+16*(self.startX-self.targetX))*t)*decay;
+    self.y=self.targetY+((self.startY-self.targetY)+(self.vy+16*(self.startY-self.targetY))*t)*decay;
+    self.scale=self.targetScale+(self.startScale-self.targetScale)*(1+16*t)*decay;
+    self.dismissProgress=self.startProgress*(1+16*t)*decay;
+    if(t>=.55){self.x=self.targetX;self.y=self.targetY;self.scale=self.targetScale;self.dismissProgress=0;}
+    [self apply];
+    if(t>=.55){BOOL close=self.closing;[self cancelAnimation];if(close)[self emitDismiss:0];else if(self.onSettled)self.onSettled(self.x,self.y,self.scale);}
+}
+- (void)settle:(BOOL)animated {
+    if(self.disposed)return;
+    double s=JoltClamp(self.scale,self.minimum,self.maximum);CGRect b=[self boundsFor:s];
+    double x=JoltClamp(self.x+self.vx*.12,CGRectGetMinX(b),CGRectGetMaxX(b));
+    double y=JoltClamp(self.y+self.vy*.12,CGRectGetMinY(b),CGRectGetMaxY(b));
+    if(self.mode==2){s=self.minimum;b=[self boundsFor:s];x=JoltClamp(0,CGRectGetMinX(b),CGRectGetMaxX(b));y=JoltClamp(0,CGRectGetMinY(b),CGRectGetMaxY(b));}
+    [self springX:x y:y scale:s vx:self.vx vy:self.vy animated:animated close:NO];
+}
+- (void)emitDismiss:(double)velocity {
+    if(self.disposed || self.dismissPending)return;
+    self.dismissPending=YES;
+    if(self.onDismiss)self.onDismiss(self.x,self.y,self.scale,velocity,self.dismissProgress);
+}
+- (void)pinched:(UIPinchGestureRecognizer *)gesture {
+    if(self.disposed || self.dismissPending)return;
+    CGPoint focus=[gesture locationInView:self.viewport];
+    if(gesture.state==UIGestureRecognizerStateBegan){
+        [self cancelAnimation];self.mode=1;self.pinchFloor=MIN(self.minimum,self.scale);self.lastFocus=focus;gesture.scale=1;
+    } else if(gesture.state==UIGestureRecognizerStateChanged){
+        double next=JoltClamp(self.scale*gesture.scale,self.pinchFloor,self.maximum);
+        self.x=focus.x-self.anchor.x-(self.lastFocus.x-self.anchor.x-self.x)*next/self.scale;
+        self.y=focus.y-self.anchor.y-(self.lastFocus.y-self.anchor.y-self.y)*next/self.scale;
+        self.scale=next;self.lastFocus=focus;gesture.scale=1;
+        self.dismissProgress=JoltClamp((self.minimum-self.scale)/(self.minimum*.15),0,1);
+        [self rebasePan];[self apply];
+    } else if(gesture.state==UIGestureRecognizerStateEnded || gesture.state==UIGestureRecognizerStateCancelled){
+        self.lastPan=[self.pan translationInView:self.viewport];self.touches=self.pan.numberOfTouches;
+        self.vx=0;self.vy=0;
+        if(self.pan.state!=UIGestureRecognizerStateChanged && self.pan.state!=UIGestureRecognizerStateBegan)[self settle:YES];
+    }
+}
+- (void)panned:(UIPanGestureRecognizer *)gesture {
+    if(self.disposed || self.dismissPending)return;
+    CGPoint translation=[gesture translationInView:self.viewport];
+    if(gesture.state==UIGestureRecognizerStateBegan){
+        [self cancelAnimation];self.vx=0;self.vy=0;self.lastPan=CGPointZero;self.touches=gesture.numberOfTouches;
+        [self rebasePan];
+        self.mode=self.scale<=self.minimum+.001 && self.pinch.state!=UIGestureRecognizerStateBegan && self.pinch.state!=UIGestureRecognizerStateChanged?2:1;
+    }
+    if(gesture.state==UIGestureRecognizerStateBegan || gesture.state==UIGestureRecognizerStateChanged){
+        if(self.pinch.state==UIGestureRecognizerStateBegan || self.pinch.state==UIGestureRecognizerStateChanged || self.touches!=gesture.numberOfTouches){
+            self.lastPan=translation;self.touches=gesture.numberOfTouches;[self rebasePan];return;
+        }
+        double dx=translation.x-self.lastPan.x,dy=translation.y-self.lastPan.y;
+        self.lastPan=translation;
+        if(self.mode==2){
+            self.x+=dx*.4;self.y+=dy;self.dismissProgress=JoltClamp(fabs(self.y)/MAX(self.viewportSize.height*.5,1),0,1);
+            self.scale=self.minimum*(1-self.dismissProgress*.15);
+        }else{
+            CGRect b=[self boundsFor:self.scale];
+            self.rawPan=CGPointMake(self.rawPan.x+dx,self.rawPan.y+dy);
+            self.x=JoltRubber(self.rawPan.x,CGRectGetMinX(b),CGRectGetMaxX(b),self.viewportSize.width);
+            self.y=JoltRubber(self.rawPan.y,CGRectGetMinY(b),CGRectGetMaxY(b),self.viewportSize.height);
+        }
+        [self apply];
+    }else if(gesture.state==UIGestureRecognizerStateEnded || gesture.state==UIGestureRecognizerStateCancelled || gesture.state==UIGestureRecognizerStateFailed){
+        CGPoint velocity=[gesture velocityInView:self.viewport];self.vx=velocity.x;self.vy=velocity.y;
+        BOOL commit=gesture.state==UIGestureRecognizerStateEnded && self.mode==2 &&
+            (self.dismissProgress>.35 || (fabs(velocity.y)>1000 && velocity.y*self.y>0));
+        if(commit)[self emitDismiss:velocity.y];
+        else if(self.pinch.state!=UIGestureRecognizerStateChanged && self.pinch.state!=UIGestureRecognizerStateBegan)[self settle:YES];
+    }
+}
+- (void)tapped:(UITapGestureRecognizer *)gesture {
+    if(gesture.state!=UIGestureRecognizerStateEnded || self.dismissPending)return;
+    CGPoint point=[gesture locationInView:self.viewport];
+    [self zoom:self.scale>self.minimum+.01?self.minimum:MIN(self.maximum,self.doubleTap) focusX:point.x focusY:point.y animated:YES];
+}
+- (void)rebasePan {
+    CGRect b=[self boundsFor:self.scale];
+    double ex=JoltClamp(self.x,CGRectGetMinX(b),CGRectGetMaxX(b)),ey=JoltClamp(self.y,CGRectGetMinY(b),CGRectGetMaxY(b));
+    double dx=self.x-ex,dy=self.y-ey;
+    self.rawPan=CGPointMake(ex+dx/(.55*MAX(.001,1-fabs(dx)/MAX(1,self.viewportSize.width))),
+                           ey+dy/(.55*MAX(.001,1-fabs(dy)/MAX(1,self.viewportSize.height))));
+}
+- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gesture {
+    if(self.disposed || !self.active || self.dismissPending)return NO;
+    if(gesture==self.pan && self.scale<=self.minimum+.001){
+        CGPoint velocity=[self.pan velocityInView:self.viewport];
+        return self.dismiss && fabs(velocity.y)>fabs(velocity.x)*1.2;
+    }
+    return YES;
+}
+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)one shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)other {
+    return (one==self.pan && other==self.pinch)||(one==self.pinch && other==self.pan);
+}
+@end

package/platforms/ios/src/module.modulemap

@@ -0,0 +1,5 @@
+module JoltMotion {
+    header "JoltImageEffect.h"
+    header "JoltPhotoZoom.h"
+    export *
+}

package/src/android-plugin.d.ts

@@ -0,0 +1,142 @@
+declare namespace org.rafaelaugusto.jolt {
+  class PhotoZoom {
+    constructor(
+      image: android.widget.ImageView,
+      viewport: android.view.View,
+      bitmapWidth: number,
+      bitmapHeight: number,
+      minimum: number,
+      maximum: number,
+      doubleTap: number,
+      dismiss: boolean,
+      reduced: boolean,
+      backdrop: android.view.View | null,
+      chrome: android.view.View | null,
+      previousTouch: android.view.View.OnTouchListener | null,
+      previousImageTouch: android.view.View.OnTouchListener | null,
+      listener: PhotoZoom.Listener,
+    )
+    getX(): number
+    getY(): number
+    getScale(): number
+    getDismissProgress(): number
+    isDismissPending(): boolean
+    zoom(scale: number, x: number, y: number, animated: boolean): void
+    reset(animated: boolean): void
+    requestDismiss(): void
+    setReduced(value: boolean): void
+    setActive(value: boolean): void
+    stop(): void
+  }
+  namespace PhotoZoom {
+    class Listener {
+      constructor(implementation: {
+        onDismiss(
+          x: number,
+          y: number,
+          scale: number,
+          velocity: number,
+          progress: number,
+        ): void
+        onSettled(x: number, y: number, scale: number): void
+      })
+    }
+  }
+  class ImageEffect {
+    constructor(
+      image: android.widget.ImageView,
+      source: android.graphics.Bitmap | null,
+      destination: android.graphics.Bitmap | null,
+      geometry: androidNative.Array<number>,
+      mode: number,
+      x: number,
+      y: number,
+      amplitude: number,
+      radius: number,
+      duration: number,
+      seed: number,
+      previousTouch: android.view.View.OnTouchListener | null,
+      listener: ImageEffect.Listener,
+    )
+    isSupported(): boolean
+    getFailureReason(): string
+    getProgress(): number
+    getFrames(): number
+    getTextureBytes(): number
+    getLongestFrameNanos(): number
+    play(endpoint: number): void
+    pause(): void
+    resume(): void
+    seek(progress: number): void
+    finish(endpoint: number): void
+    stop(): void
+    stopPreservingImage(): void
+  }
+  namespace ImageEffect {
+    class Listener {
+      constructor(implementation: { onEnd(completed: boolean, progress: number): void })
+    }
+  }
+  class KeyboardFollower {
+    constructor(
+      view: android.view.View,
+      offset: number,
+      listener: KeyboardFollower.Listener,
+    )
+    attach(): void
+    detach(): void
+  }
+  namespace KeyboardFollower {
+    class Listener {
+      constructor(implementation: {
+        onStart(): void
+        onSettled(translation: number): void
+      })
+    }
+  }
+  class TextReveal {
+    constructor(
+      view: android.widget.TextView,
+      byWord: boolean,
+      duration: number,
+      stagger: number,
+      delay: number,
+      offset: number,
+      callback: TextReveal.Callback,
+    )
+    isSupported(): boolean
+    start(): void
+    cancel(): void
+  }
+  namespace TextReveal {
+    class Callback {
+      constructor(implementation: { onEnd(finished: boolean): void })
+    }
+  }
+  class NumberRoll {
+    constructor(
+      view: android.widget.TextView,
+      starts: androidNative.Array<number>,
+      ends: androidNative.Array<number>,
+      previous: androidNative.Array<string>,
+      direction: number,
+      times: androidNative.Array<number>,
+      values: androidNative.Array<number>,
+      duration: number,
+      delay: number,
+      stagger: number,
+      shift: number,
+      fade: number,
+      tabular: boolean,
+      callback: NumberRoll.Callback,
+    )
+    isSupported(): boolean
+    start(): void
+    cancel(): void
+  }
+  namespace NumberRoll {
+    class Callback {
+      constructor(implementation: { onEnd(finished: boolean): void })
+    }
+  }
+}

package/src/animate.ts

@@ -5,6 +5,7 @@ import {
 } from './decoration.js'
 import { playbackGroup } from './playback-group.js'
 import type { PlaybackAnimation } from './playback.js'
+import { preparePath, type PreparedPath } from './path.js'
 import { View } from '@nativescript/core'
 import {
   isColorProperty,
@@ -38,13 +39,14 @@ import type {
   DecayVelocity,
   Keyframes,
   KeyframeValue,
+  KeyframeProperty,
   Stagger,
   Target,
 } from './types.js'
 
 interface Options {
   base: Transition
-  overrides: Partial<Record<keyof Keyframes, Transition>>
+  overrides: Partial<Record<KeyframeProperty | 'path', Transition>>
   stagger: number | Stagger | undefined
   relative: boolean | undefined
   haptic: Haptic | undefined
@@ -65,7 +67,7 @@ export function animate(
   animation: Keyframes | PresetName,
   options?: AnimateOptions | SpringName,
 ): PlaybackAnimation {
-  const { keyframes, base, overrides, stagger, relative, haptic } = prepare(
+  const { keyframes, base, overrides, stagger, relative, haptic, path } = prepare(
     animation,
     options,
   )
@@ -78,7 +80,7 @@ export function animate(
       else if (isDecorationProperty(property)) validateDecorationTarget(view, property)
     return new ViewAnimation(
       view,
-      plan(keyframes, base, overrides, 0, relative),
+      plan(keyframes, base, overrides, 0, relative, path),
       feedback,
     )
   }
@@ -88,23 +90,19 @@ export function animate(
     for (const property of Object.keys(keyframes))
       if (isColorProperty(property)) validateColorTarget(view, property)
       else if (isDecorationProperty(property)) validateDecorationTarget(view, property)
-  return playbackGroup(
-    views.map(
-      (view, index) =>
-        new ViewAnimation(
-          view,
-          plan(
-            keyframes,
-            base,
-            overrides,
-            staggerDelay(stagger, index, views.length),
-            relative,
-          ),
-          feedback,
-          true,
-        ),
+  const plans = views.map((_, index) =>
+    plan(
+      keyframes,
+      base,
+      overrides,
+      staggerDelay(stagger, index, views.length),
+      relative,
+      path,
     ),
   )
+  return playbackGroup(
+    views.map((view, index) => new ViewAnimation(view, plans[index]!, feedback, true)),
+  )
 }
 
 /** Starts at the current translation and slows down from a velocity in DIPs per second. */
@@ -183,7 +181,7 @@ export function decay(
 /** Stops all or selected properties at their current values. `scale` stops both axes. */
 export function stop(
   target: Target | readonly Target[],
-  properties?: readonly (keyof Keyframes)[],
+  properties?: readonly KeyframeProperty[],
 ) {
   const expanded = properties?.flatMap<Property>((property) =>
     property === 'scale' ? ['scaleX', 'scaleY'] : [property],
@@ -225,6 +223,17 @@ function isList<T>(target: T | readonly T[]): target is readonly T[] {
 function prepare(
   animation: Keyframes | PresetName,
   options?: AnimateOptions | SpringName,
+) {
+  const prepared = resolveAnimation(animation, options)
+  return {
+    ...prepared,
+    path: preparePath(prepared.keyframes, prepared.base, prepared.overrides),
+  }
+}
+
+function resolveAnimation(
+  animation: Keyframes | PresetName,
+  options?: AnimateOptions | SpringName,
 ) {
   const user = normalize(options)
   if (typeof animation !== 'string') return { keyframes: animation, ...user }
@@ -271,7 +280,7 @@ function normalize(options: AnimateOptions | SpringName | undefined): Options {
     if (key === 'stagger') stagger = value as Options['stagger']
     else if (key === 'relative') relative = value as Options['relative']
     else if (key === 'haptic') haptic = value as Options['haptic']
-    else if (key === 'scale' || isProperty(key)) {
+    else if (key === 'path' || key === 'scale' || isProperty(key)) {
       overrides[key] = typeof value === 'string' ? spring(value as SpringName) : value
     } else base[key] = value
   }
@@ -284,8 +293,25 @@ function plan(
   overrides: Options['overrides'],
   offset: number,
   relative = false,
+  path?: PreparedPath,
 ): Plan[] {
-  return expand(keyframes).map(([property, frames]) => {
+  return expand(keyframes, path).map(([property, frames]) => {
+    if (path?.properties.includes(property as 'x' | 'y' | 'rotate')) {
+      if (
+        !Number.isFinite(path.transition.delay + offset) ||
+        path.transition.delay + offset < 0
+      )
+        throw new RangeError(
+          'Path delays, including stagger, must be finite and nonnegative.',
+        )
+      return {
+        property,
+        keyframes: frames,
+        transition: { ...path.transition, delay: path.transition.delay + offset },
+        relative,
+        path,
+      }
+    }
     const override =
       overrides[property] ?? (property.startsWith('scale') ? overrides.scale : undefined)
     const transition = resolveTransition(
@@ -303,31 +329,55 @@ export function startingValues(
   animation: Keyframes | PresetName,
   options?: AnimateOptions | SpringName,
 ) {
-  const { keyframes, relative } = prepare(animation, options)
+  const { keyframes, relative, path } = prepare(animation, options)
   if (!keyframes) throw new Error(`Unknown preset "${animation}".`)
   return new Map(
-    expand(keyframes).map(([property, [first]]) => [
+    expand(keyframes, path).map(([property, [first]]) => [
       property,
       relative && !isColorProperty(property) ? null : first!,
     ]),
   )
 }
 
-function expand(keyframes: Keyframes): [Property, (number | null)[]][] {
+/** Each property the animation touches, with the value it leaves behind when that is known up front. */
+export function endingValues(
+  animation: Keyframes | PresetName,
+  options?: AnimateOptions | SpringName,
+) {
+  const { keyframes, base, overrides, relative, path } = prepare(animation, options)
+  return new Map(
+    plan(keyframes, base, overrides, 0, relative, path).map(
+      ({ property, keyframes: frames, transition, path: owned }) => {
+        const finite = Number.isFinite(transition.repeat)
+        const backwards = transition.reverse && finite && transition.repeat % 2 === 1
+        const unknown = owned !== undefined || (relative && !isColorProperty(property))
+        const frame = !finite || backwards ? frames[0] : frames.at(-1)
+        return [property, unknown ? null : frame!]
+      },
+    ),
+  )
+}
+
+function expand(
+  keyframes: Keyframes,
+  path?: PreparedPath,
+): [Property, (number | null)[]][] {
   const expanded: [Property, (number | null)[]][] = []
-  for (const [key, value] of Object.entries(keyframes) as [
-    keyof Keyframes,
-    KeyframeValue | ColorKeyframes | undefined,
-  ][]) {
-    if (value === undefined) continue
+  for (const [key, value] of Object.entries(keyframes)) {
+    if (value === undefined || key === 'path' || key === 'orient') continue
     if (key !== 'scale' && !isProperty(key)) throw new Error(`Can't animate "${key}".`)
 
     const properties: Property[] = key === 'scale' ? ['scaleX', 'scaleY'] : [key]
     for (const property of properties) {
       if (key === 'scale' && keyframes[property] !== undefined) continue
-      expanded.push([property, toKeyframes(property, value)])
+      expanded.push([
+        property,
+        toKeyframes(property, value as KeyframeValue | ColorKeyframes),
+      ])
     }
   }
+  for (const [property, value] of path?.starts ?? [])
+    expanded.push([property, [value, value]])
   return expanded
 }
 

package/src/config.ts

@@ -0,0 +1,46 @@
+import { getDriver } from './driver/index.js'
+
+export interface JoltConfig {
+  /** Playback speed for every engine animation. `0.2` plays everything five times slower. */
+  timeScale?: number
+  /**
+   * When transforms, paths, decorations and decay jump to their end instead of animating.
+   * `user` follows the platform setting. Opacity and colors still animate.
+   */
+  reducedMotion?: 'user' | 'always' | 'never'
+}
+
+const settings: Required<JoltConfig> = { timeScale: 1, reducedMotion: 'user' }
+const preferences: readonly JoltConfig['reducedMotion'][] = ['user', 'always', 'never']
+
+/**
+ * Global settings, applied to animations that start after the call.
+ *
+ * ```ts
+ * configure({ timeScale: 0.2 }) // tune a spring in slow motion
+ * configure({ reducedMotion: 'always' }) // check the reduced layout
+ * ```
+ */
+export function configure(options: JoltConfig): void {
+  if (options === null || typeof options !== 'object')
+    throw new TypeError('configure() takes an options object.')
+  const { timeScale, reducedMotion } = options
+  if (timeScale !== undefined && (!Number.isFinite(timeScale) || timeScale <= 0))
+    throw new RangeError(`Time scale must be a positive finite number, got ${timeScale}.`)
+  if (reducedMotion !== undefined && !preferences.includes(reducedMotion))
+    throw new TypeError(
+      `Reduced motion must be 'user', 'always' or 'never', got ${String(reducedMotion)}.`,
+    )
+  if (timeScale !== undefined) settings.timeScale = timeScale
+  if (reducedMotion !== undefined) settings.reducedMotion = reducedMotion
+}
+
+export function timeScale(): number {
+  return settings.timeScale
+}
+
+/** Whether motion is reduced right now. `user` asks the platform each time. */
+export function reducedMotion(): boolean {
+  if (settings.reducedMotion === 'user') return getDriver().reducedMotion?.() ?? false
+  return settings.reducedMotion === 'always'
+}

package/src/driver/android.ts

@@ -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

@@ -34,6 +34,8 @@ export interface Driver {
   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

@@ -203,7 +203,6 @@ export function playIOSColor(
     )
     animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
     animation.duration = Math.max(track.duration, 1) / 1000
-    timing.configure(animation, layer)
     if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
       const maximum = Math.min(
         120,
@@ -220,6 +219,7 @@ 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 (!timing.paused && track.repeat !== Infinity)
       CATransaction.setCompletionBlock(() => {