130 lines
5.3 KiB
TypeScript
130 lines
5.3 KiB
TypeScript
export interface CountUpOptions {
|
|
/** Number to start at @default 0 */
|
|
startVal?: number;
|
|
/** Number of decimal places @default 0 */
|
|
decimalPlaces?: number;
|
|
/** Animation duration in seconds @default 2 */
|
|
duration?: number;
|
|
/** Example: 1,000 vs 1000 @default true */
|
|
useGrouping?: boolean;
|
|
/** Example: 1,00,000 vs 100,000 @default false */
|
|
useIndianSeparators?: boolean;
|
|
/** Ease animation @default true */
|
|
useEasing?: boolean;
|
|
/** Smooth easing for large numbers above this if useEasing @default 999 */
|
|
smartEasingThreshold?: number;
|
|
/** Amount to be eased for numbers above threshold @default 333 */
|
|
smartEasingAmount?: number;
|
|
/** Grouping separator @default ',' */
|
|
separator?: string;
|
|
/** Decimal character @default '.' */
|
|
decimal?: string;
|
|
/** Easing function for animation @default easeOutExpo */
|
|
easingFn?: (t: number, b: number, c: number, d: number) => number;
|
|
/** Custom function to format the result */
|
|
formattingFn?: (n: number) => string;
|
|
/** Text prepended to result */
|
|
prefix?: string;
|
|
/** Text appended to result */
|
|
suffix?: string;
|
|
/** Numeral glyph substitution */
|
|
numerals?: string[];
|
|
/** Callback called when animation completes */
|
|
onCompleteCallback?: () => any;
|
|
/** Callback called when animation starts */
|
|
onStartCallback?: () => any;
|
|
/** Plugin for alternate animations */
|
|
plugin?: CountUpPlugin;
|
|
/** Trigger animation when target becomes visible @default false */
|
|
autoAnimate?: boolean;
|
|
/** Animation delay in ms after auto-animate triggers @default 200 */
|
|
autoAnimateDelay?: number;
|
|
/** Run animation only once for auto-animate triggers @default false */
|
|
autoAnimateOnce?: boolean;
|
|
/** @deprecated Please use autoAnimate instead */
|
|
enableScrollSpy?: boolean;
|
|
/** @deprecated Please use autoAnimateDelay instead */
|
|
scrollSpyDelay?: number;
|
|
/** @deprecated Please use autoAnimateOnce instead */
|
|
scrollSpyOnce?: boolean;
|
|
}
|
|
export declare interface CountUpPlugin {
|
|
render(elem: HTMLElement, formatted: string): void;
|
|
}
|
|
/**
|
|
* Animates a number by counting to it.
|
|
* playground: stackblitz.com/edit/countup-typescript
|
|
*
|
|
* @param target - id of html element, input, svg text element, or DOM element reference where counting occurs.
|
|
* @param endVal - the value you want to arrive at.
|
|
* @param options - optional configuration object for fine-grain control
|
|
*/
|
|
export declare class CountUp {
|
|
private endVal?;
|
|
options?: CountUpOptions;
|
|
version: string;
|
|
private static observedElements;
|
|
private defaults;
|
|
private rAF;
|
|
private autoAnimateTimeout;
|
|
private startTime;
|
|
private remaining;
|
|
private finalEndVal;
|
|
private useEasing;
|
|
private countDown;
|
|
private observer;
|
|
el: HTMLElement | HTMLInputElement;
|
|
formattingFn: (num: number) => string;
|
|
easingFn?: (t: number, b: number, c: number, d: number) => number;
|
|
error: string;
|
|
startVal: number;
|
|
duration: number;
|
|
paused: boolean;
|
|
frameVal: number;
|
|
once: boolean;
|
|
constructor(target: string | HTMLElement | HTMLInputElement, endVal?: number | null, options?: CountUpOptions);
|
|
/** Set up an IntersectionObserver to auto-animate when the target element appears. */
|
|
private setupObserver;
|
|
/** Disconnect the IntersectionObserver and stop watching this element. */
|
|
unobserve(): void;
|
|
/** Teardown: cancel animation, disconnect observer, clear callbacks. */
|
|
onDestroy(): void;
|
|
/**
|
|
* Smart easing works by breaking the animation into 2 parts, the second part being the
|
|
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
|
|
* by disabling easing for the first part and enabling it on the second part. It is used if
|
|
* useEasing is true and the total animation amount exceeds the smartEasingThreshold.
|
|
*/
|
|
private determineDirectionAndSmartEasing;
|
|
/** Start the animation. Optionally pass a callback that fires on completion. */
|
|
start(callback?: (args?: any) => any): void;
|
|
/** Toggle pause/resume on the animation. */
|
|
pauseResume(): void;
|
|
/** Reset to startVal so the animation can be run again. */
|
|
reset(): void;
|
|
/** Pass a new endVal and start the animation. */
|
|
update(newEndVal: string | number): void;
|
|
/** Animation frame callback — advances the value each frame. */
|
|
count: (timestamp: number) => void;
|
|
/** Format and render the given value to the target element. */
|
|
printValue(val: number): void;
|
|
/** Return true if the value is a finite number. */
|
|
ensureNumber(n: any): boolean;
|
|
/** Validate and convert a value to a number, setting an error if invalid. */
|
|
validateValue(value: string | number): number;
|
|
/** Reset startTime, duration, and remaining to their initial values. */
|
|
private resetDuration;
|
|
/** Default number formatter with grouping, decimals, prefix/suffix, and numeral substitution. */
|
|
formatNumber: (num: number) => string;
|
|
/**
|
|
* Default easing function (easeOutExpo).
|
|
* @param t current time
|
|
* @param b beginning value
|
|
* @param c change in value
|
|
* @param d duration
|
|
*/
|
|
easeOutExpo: (t: number, b: number, c: number, d: number) => number;
|
|
/** Parse a formatted string back to a number using the current separator/decimal options. */
|
|
parse(number: string): number;
|
|
}
|