recharts/types/animation/AnimationHandle.d.ts

React charts

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<T, E> {
    /**
     * 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<number, EasingFunction> {
    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<string, NamedBezier> {
    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 {};