import { EasingFunction, NamedBezier } from './easing'; declare const INIT: "init"; declare const PENDING: "pending"; declare const ACTIVE: "active"; declare const COMPLETED: "completed"; export type AnimationState = typeof INIT | typeof PENDING | typeof ACTIVE | typeof COMPLETED; type AnimationStateCallback = () => void; declare abstract class RechartsAnimation { /** * Returns the absolute time after the animationBegin delay has been completed, * and when the animationDuration started ticking. */ getAnimationStartedTime(): number | undefined; /** * Returns the absolute time of when the animation began - now it will wait for {animationBegin} ms before the transition starts */ getBeginStartedTime(): number | undefined; private readonly onAnimationEnd; private progress; private animationStartedTime; private beginStartedTime; protected readonly animationDuration: number; private readonly animationBegin; private readonly from; private readonly to; protected readonly easing: E; private readonly animationId; constructor(param: { animationId: string; onAnimationStart: undefined | AnimationStateCallback; onAnimationEnd: undefined | AnimationStateCallback; animationDuration: number; animationBegin: number; from: T; to: T; easing: E; }); private state; /** * Returns the state machine current state * - `init`: animation had just been created. It immediately calls `onAnimationStart` * - `pending`: animation is now paused for `animationBegin` milliseconds until the transition begins * - `active`: animation is transitioning items on screen * - `completed`: animation has completed its transition and executed `onAnimationEnd`. * This state is final and the animation is no longer allowed to transition to other states. */ getState(): AnimationState; /** * Returns the easing input or function */ getEasing(): E; /** * Returns the configuration - the duration of the transition. * Does not change in time, does not change when state changes, this is a static value. */ getAnimationDuration(): number; /** * Sets the current time of the animation. The animation sets its internal state and progress accordingly. * This is current, absolute time; not additive! * This allows you to essentially "travel back in time" based on the value you pass in here. * * Returns the (relative) time remaining until the current activity is over. * Meaning: if the state is in a middle of a delay, returns the time left until the delay is finished. * If the state is in the middle of a transition, returns time left until that transition is complete. * This is useful because it's the same number you can take and put into setTimeout(fn, X) * as that's how much time we need to wait until the next state transition happens. */ tick(now: number): number; private setProgress; /** * Returns an abstract "progress" which is number between 0 and 1 which shows the distance of transition. * This progress depends on the animation state: * - `init`: 0 * - `pending`: 0 * - `active`: transitioning between [0, 1] based on the time elapsed * - `completed`: 1 * * The progress is hard-capped to be between 0 and 1 (inclusive) to avoid overshooting caused by coarse timers. * For this reason, the easing function must be applied _after_ this animation state, * so that one has a chance to construct dynamic "overshoot" animations. * * The progress is linear with time. * If you wish for easing, use `getInterpolated()` instead. */ getProgress(): number; /** * Completes the animation. Completed animation: * - cannot be manipulated anymore * - its progress is set to 1 * - tick function doesn't do anything * - getState() always returns 'completed' */ complete(): void; /** * Returns the starting value of the animation. * Does not include progress, easing, interpolation, none of that - just the static starting value */ getFrom(): T; /** * Returns the end value of the animation. * Does not include progress, easing, interpolation, none of that - just the static end value */ getTo(): T; /** * Unique identifier of an animation */ getAnimationId(): string; /** * Returns the configuration - the duration of delay in between animation initialization, and transition. * Does not change in time, does not change when state changes, this is a static value. */ getAnimationBegin(): number; /** * Returns value of the transition at the current time. * The exact details differ based on the animation type */ abstract getInterpolated(): T; /** * Returns the duration of time of when the controller should ask for the next update */ protected abstract nextAnimationUpdate(timeElapsed: number): number; } /** * Animation handle representing a Javascript-based animation. * This animation requires one render cycle for each frame, and it calls setTimeout as quickly as possible * * @since 3.9 */ export declare class JavascriptAnimation extends RechartsAnimation { protected nextAnimationUpdate(): number; /** * Returns value of the animation after its easing function had been applied. * This value, unlike getProgress(), can escape the [0..1] range * because this is entirely within the easing function control. Spring typically does this. */ getInterpolated(): number; } /** * Animation handle representing a CSS transition. * This animation requires only one render, and the actual transition is then handled by the browser. * * @since 3.9 */ export declare class CSSTransitionAnimation extends RechartsAnimation { protected nextAnimationUpdate(timeElapsed: number): number; /** * Returns the final value of the animation (the `to`). * * CSS transitions leave both interpolation and easing to the browser, * so all we need to do here is return the final state * and let browser handle the rest. */ getInterpolated(): string; } /** * Recharts animation state machine. * * Possible transitions are: * - `init`: starting state - `onAnimationStart` executes * - `init` to `pending` - `animationBegin` duration begins * - `pending` to `active` - `animationDuration` duration begins, timer ticks decide the progress * - `active` to `completed` - `onAnimationEnd` executes * * The state always moves in this direction, cannot move backwards. * * The animation queue is static and consists of four elements: * - `onAnimationStart`: function that is called when the animation is created * - `animationBegin`: delay between `onAnimationStart` and the transition * - the transition itself, takes `animationDuration` ms to finish * - `onAnimationEnd`: function that is called when the animation is moving from `active` to `completed` * * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide} * * @since 3.9 */ export type AnimationHandle = JavascriptAnimation | CSSTransitionAnimation; export {};