diff --git a/__tests__/rAF/update.spec.ts b/__tests__/rAF/update.spec.ts index 51d6652..5b0ac35 100644 --- a/__tests__/rAF/update.spec.ts +++ b/__tests__/rAF/update.spec.ts @@ -102,6 +102,7 @@ describe('update', () => { const mockMoverState: Partial = { velocity: [2, 0], position: [5, 0], + acceleration: [-1.5, -2], }; const element: StatefulAnimatingElement< diff --git a/src/animation/gravity2D.ts b/src/animation/gravity2D.ts index 42d6e94..9b8f53c 100644 --- a/src/animation/gravity2D.ts +++ b/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, }); }; diff --git a/src/animation/types.ts b/src/animation/types.ts index f03d066..9853d19 100644 --- a/src/animation/types.ts +++ b/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; - velocity?: Vector; -}) => void; + velocity: Vector; + acceleration: Vector; +} + +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?: { diff --git a/src/hooks/shared.ts b/src/hooks/shared.ts index c535774..65af545 100644 --- a/src/hooks/shared.ts +++ b/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 { @@ -10,7 +15,7 @@ interface OnUpdateParams { ref: RefObject; i: number; cache: MutableRefObject; - onFrame?: (progress: number) => void; + onFrame?: HooksParams['onFrame']; } /** @@ -26,7 +31,11 @@ export const onUpdate = ({ i, cache, onFrame, -}: OnUpdateParams): VectorSetter => ({ position }) => { +}: OnUpdateParams): VectorSetter => ({ + position, + velocity, + acceleration, +}) => { interpolators.forEach(({ interpolator, property, values }) => { const value = interpolator({ range: [0, maxPosition], @@ -40,7 +49,7 @@ export const onUpdate = ({ if (onFrame) { const progress = position[0] / maxPosition; - onFrame(progress); + onFrame(progress, { position, velocity, acceleration }); } // Update the cache of derived animation values. diff --git a/src/hooks/useGravity2D.ts b/src/hooks/useGravity2D.ts index ab8e558..b044c38 100644 --- a/src/hooks/useGravity2D.ts +++ b/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 = ({ () => 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: () => { diff --git a/src/rAF/update.ts b/src/rAF/update.ts index 1dbf7f0..1f8ec50 100644 --- a/src/rAF/update.ts +++ b/src/rAF/update.ts @@ -66,6 +66,7 @@ export function update({ element.onUpdate({ velocity: element.state.mover.velocity, position: element.state.mover.position, + acceleration: element.state.mover.acceleration, }); } }