feat: pass physics values to onFrame callback

__tests__/rAF/update.spec.ts

@@ -102,6 +102,7 @@ describe('update', () => {
     const mockMoverState: Partial<Entity> = {
       velocity: [2, 0],
       position: [5, 0],
+      acceleration: [-1.5, -2],
     };
 
     const element: StatefulAnimatingElement<

src/animation/gravity2D.ts

@@ -23,7 +23,6 @@ export interface Gravity2DParams extends AnimationParams {
     };
     G?: number;
   };
-  onUpdate: VectorSetter;
 }
 
 export interface Gravity2DController extends Controller {
@@ -112,6 +111,7 @@ export function gravity2D({
     onUpdate({
       position: state.mover.position,
       velocity: state.mover.velocity,
+      acceleration: state.mover.acceleration,
     });
   };
 

src/animation/types.ts

@@ -3,10 +3,13 @@ import type { CSSProperties, RefObject } from 'react';
 import type { vector as Vector } from '../core';
 import type { entity as Entity } from '../forces';
 
-export type VectorSetter = (values: {
+interface MotionVectors {
   position: Vector<number>;
-  velocity?: Vector<number>;
-}) => void;
+  velocity: Vector<number>;
+  acceleration: Vector<number>;
+}
+
+export type VectorSetter = (motionVectors: MotionVectors) => void;
 
 export type Listener = (
   timestamp: DOMHighResTimeStamp,
@@ -30,7 +33,7 @@ export interface HooksParams {
   pause?: boolean;
   delay?: number;
   repeat?: number;
-  onFrame?: (progress: number) => void;
+  onFrame?: (progress: number, motionVectors: MotionVectors) => void;
   onAnimationComplete?: () => void;
   disableHardwareAcceleration?: boolean;
   reducedMotion?: {

src/hooks/shared.ts

@@ -1,6 +1,11 @@
 import type { RefObject, MutableRefObject, CSSProperties } from 'react';
 
-import { AnimationCache, PlayState, VectorSetter } from '../animation';
+import {
+  AnimationCache,
+  HooksParams,
+  PlayState,
+  VectorSetter,
+} from '../animation';
 import type { CSSPairs, InterpolatedResult } from '../parsers';
 
 interface OnUpdateParams<E extends HTMLElement | SVGElement> {
@@ -10,7 +15,7 @@ interface OnUpdateParams<E extends HTMLElement | SVGElement> {
   ref: RefObject<E>;
   i: number;
   cache: MutableRefObject<AnimationCache>;
-  onFrame?: (progress: number) => void;
+  onFrame?: HooksParams['onFrame'];
 }
 
 /**
@@ -26,7 +31,11 @@ export const onUpdate = <E extends HTMLElement | SVGElement>({
   i,
   cache,
   onFrame,
-}: OnUpdateParams<E>): VectorSetter => ({ position }) => {
+}: OnUpdateParams<E>): VectorSetter => ({
+  position,
+  velocity,
+  acceleration,
+}) => {
   interpolators.forEach(({ interpolator, property, values }) => {
     const value = interpolator({
       range: [0, maxPosition],
@@ -40,7 +49,7 @@ export const onUpdate = <E extends HTMLElement | SVGElement>({
 
     if (onFrame) {
       const progress = position[0] / maxPosition;
-      onFrame(progress);
+      onFrame(progress, { position, velocity, acceleration });
     }
 
     // Update the cache of derived animation values.

src/hooks/useGravity2D.ts

@@ -6,13 +6,14 @@ import {
   Controller,
   Gravity2DController,
   gravity2DDefaultConfig,
+  VectorSetter,
 } from '../animation';
 
 type UseGravity2DArgs = {
   config?: Gravity2DParams['config'];
   pause?: boolean;
   delay?: number;
-  onFrame?: () => void;
+  onFrame?: VectorSetter;
   onAnimationComplete?: () => void;
   disableHardwareAcceleration?: boolean;
 };
@@ -40,14 +41,16 @@ export const useGravity2D = <E extends HTMLElement | SVGElement = any>({
     () =>
       gravity2D({
         config,
-        onUpdate: ({ position: [x, y] }) => {
+        onUpdate: ({ position, velocity, acceleration }) => {
           moverRef.current &&
-            (moverRef.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)${
+            (moverRef.current.style.transform = `translate(${position[0]}px, ${
+              position[1]
+            }px) translate(-50%, -50%)${
               disableHardwareAcceleration ? '' : ' translateZ(0)'
             }`);
 
           if (onFrame) {
-            onFrame();
+            onFrame({ position, velocity, acceleration });
           }
         },
         onComplete: () => {

src/rAF/update.ts

@@ -66,6 +66,7 @@ export function update<C>({
         element.onUpdate({
           velocity: element.state.mover.velocity,
           position: element.state.mover.position,
+          acceleration: element.state.mover.acceleration,
         });
       }
     }