231 lines
7.1 KiB
TypeScript
231 lines
7.1 KiB
TypeScript
import { AnimationPlaybackControls, TransformProperties, AnimationPlaybackOptions, Transition, UnresolvedValueKeyframe, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, GroupPlaybackControls } from 'motion-dom';
|
|
|
|
/**
|
|
* @public
|
|
*/
|
|
type Subscriber<T> = (v: T) => void;
|
|
interface MotionValueEventCallbacks<V> {
|
|
animationStart: () => void;
|
|
animationComplete: () => void;
|
|
animationCancel: () => void;
|
|
change: (latestValue: V) => void;
|
|
renderRequest: () => void;
|
|
}
|
|
interface ResolvedValues {
|
|
[key: string]: string | number;
|
|
}
|
|
interface Owner {
|
|
current: HTMLElement | unknown;
|
|
getProps: () => {
|
|
onUpdate?: (latest: ResolvedValues) => void;
|
|
transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
|
|
};
|
|
}
|
|
/**
|
|
* `MotionValue` is used to track the state and velocity of motion values.
|
|
*
|
|
* @public
|
|
*/
|
|
declare class MotionValue<V = any> {
|
|
/**
|
|
* This will be replaced by the build step with the latest version number.
|
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
*/
|
|
version: string;
|
|
/**
|
|
* If a MotionValue has an owner, it was created internally within Motion
|
|
* and therefore has no external listeners. It is therefore safe to animate via WAAPI.
|
|
*/
|
|
owner?: Owner;
|
|
/**
|
|
* The current state of the `MotionValue`.
|
|
*/
|
|
private current;
|
|
/**
|
|
* The previous state of the `MotionValue`.
|
|
*/
|
|
private prev;
|
|
/**
|
|
* The previous state of the `MotionValue` at the end of the previous frame.
|
|
*/
|
|
private prevFrameValue;
|
|
/**
|
|
* The last time the `MotionValue` was updated.
|
|
*/
|
|
updatedAt: number;
|
|
/**
|
|
* The time `prevFrameValue` was updated.
|
|
*/
|
|
prevUpdatedAt: number | undefined;
|
|
private stopPassiveEffect?;
|
|
/**
|
|
* A reference to the currently-controlling animation.
|
|
*/
|
|
animation?: AnimationPlaybackControls;
|
|
setCurrent(current: V): void;
|
|
setPrevFrameValue(prevFrameValue?: V | undefined): void;
|
|
/**
|
|
* Adds a function that will be notified when the `MotionValue` is updated.
|
|
*
|
|
* It returns a function that, when called, will cancel the subscription.
|
|
*
|
|
* When calling `onChange` inside a React component, it should be wrapped with the
|
|
* `useEffect` hook. As it returns an unsubscribe function, this should be returned
|
|
* from the `useEffect` function to ensure you don't add duplicate subscribers..
|
|
*
|
|
* ```jsx
|
|
* export const MyComponent = () => {
|
|
* const x = useMotionValue(0)
|
|
* const y = useMotionValue(0)
|
|
* const opacity = useMotionValue(1)
|
|
*
|
|
* useEffect(() => {
|
|
* function updateOpacity() {
|
|
* const maxXY = Math.max(x.get(), y.get())
|
|
* const newOpacity = transform(maxXY, [0, 100], [1, 0])
|
|
* opacity.set(newOpacity)
|
|
* }
|
|
*
|
|
* const unsubscribeX = x.on("change", updateOpacity)
|
|
* const unsubscribeY = y.on("change", updateOpacity)
|
|
*
|
|
* return () => {
|
|
* unsubscribeX()
|
|
* unsubscribeY()
|
|
* }
|
|
* }, [])
|
|
*
|
|
* return <motion.div style={{ x }} />
|
|
* }
|
|
* ```
|
|
*
|
|
* @param subscriber - A function that receives the latest value.
|
|
* @returns A function that, when called, will cancel this subscription.
|
|
*
|
|
* @deprecated
|
|
*/
|
|
onChange(subscription: Subscriber<V>): () => void;
|
|
/**
|
|
* An object containing a SubscriptionManager for each active event.
|
|
*/
|
|
private events;
|
|
on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
|
|
clearListeners(): void;
|
|
/**
|
|
* Sets the state of the `MotionValue`.
|
|
*
|
|
* @remarks
|
|
*
|
|
* ```jsx
|
|
* const x = useMotionValue(0)
|
|
* x.set(10)
|
|
* ```
|
|
*
|
|
* @param latest - Latest value to set.
|
|
* @param render - Whether to notify render subscribers. Defaults to `true`
|
|
*
|
|
* @public
|
|
*/
|
|
set(v: V, render?: boolean): void;
|
|
setWithVelocity(prev: V, current: V, delta: number): void;
|
|
/**
|
|
* Set the state of the `MotionValue`, stopping any active animations,
|
|
* effects, and resets velocity to `0`.
|
|
*/
|
|
jump(v: V, endAnimation?: boolean): void;
|
|
updateAndNotify: (v: V, render?: boolean) => void;
|
|
/**
|
|
* Returns the latest state of `MotionValue`
|
|
*
|
|
* @returns - The latest state of `MotionValue`
|
|
*
|
|
* @public
|
|
*/
|
|
get(): NonNullable<V>;
|
|
/**
|
|
* @public
|
|
*/
|
|
getPrevious(): V | undefined;
|
|
/**
|
|
* Returns the latest velocity of `MotionValue`
|
|
*
|
|
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
|
|
*
|
|
* @public
|
|
*/
|
|
getVelocity(): number;
|
|
hasAnimated: boolean;
|
|
/**
|
|
* Stop the currently active animation.
|
|
*
|
|
* @public
|
|
*/
|
|
stop(): void;
|
|
/**
|
|
* Returns `true` if this value is currently animating.
|
|
*
|
|
* @public
|
|
*/
|
|
isAnimating(): boolean;
|
|
private clearAnimation;
|
|
/**
|
|
* Destroy and clean up subscribers to this `MotionValue`.
|
|
*
|
|
* The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
|
|
* handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
|
|
* created a `MotionValue` via the `motionValue` function.
|
|
*
|
|
* @public
|
|
*/
|
|
destroy(): void;
|
|
}
|
|
|
|
type GenericKeyframesTarget<V> = V[] | Array<null | V>;
|
|
|
|
type ObjectTarget<O> = {
|
|
[K in keyof O]?: O[K] | GenericKeyframesTarget<O[K]>;
|
|
};
|
|
type SequenceTime = number | "<" | `+${number}` | `-${number}` | `${string}`;
|
|
type SequenceLabel = string;
|
|
interface SequenceLabelWithTime {
|
|
name: SequenceLabel;
|
|
at: SequenceTime;
|
|
}
|
|
interface At {
|
|
at?: SequenceTime;
|
|
}
|
|
type MotionValueSegment = [
|
|
MotionValue,
|
|
UnresolvedValueKeyframe | UnresolvedValueKeyframe[]
|
|
];
|
|
type MotionValueSegmentWithTransition = [
|
|
MotionValue,
|
|
UnresolvedValueKeyframe | UnresolvedValueKeyframe[],
|
|
Transition & At
|
|
];
|
|
type DOMSegment = [ElementOrSelector, DOMKeyframesDefinition];
|
|
type DOMSegmentWithTransition = [
|
|
ElementOrSelector,
|
|
DOMKeyframesDefinition,
|
|
AnimationOptions & At
|
|
];
|
|
type ObjectSegment<O extends {} = {}> = [O, ObjectTarget<O>];
|
|
type ObjectSegmentWithTransition<O extends {} = {}> = [
|
|
O,
|
|
ObjectTarget<O>,
|
|
AnimationOptions & At
|
|
];
|
|
type Segment = ObjectSegment | ObjectSegmentWithTransition | SequenceLabel | SequenceLabelWithTime | MotionValueSegment | MotionValueSegmentWithTransition | DOMSegment | DOMSegmentWithTransition;
|
|
type AnimationSequence = Segment[];
|
|
interface SequenceOptions extends AnimationPlaybackOptions {
|
|
delay?: number;
|
|
duration?: number;
|
|
defaultTransition?: Transition;
|
|
}
|
|
|
|
declare function animateSequence(definition: AnimationSequence, options?: SequenceOptions): GroupPlaybackControls;
|
|
|
|
declare const animateMini: (elementOrSelector: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: AnimationOptions) => AnimationPlaybackControls;
|
|
|
|
export { animateMini as animate, animateSequence };
|