anitimejs/timejs/animate.d.ts

Thư viện xử lý chuỗi số và thời gian trong JavaScript/Typescript

interface AnimationConfig {
    targets: string | HTMLElement | HTMLElement[] | Record<string, any> | NodeList;
    props: Record<string, number | string | Record<string, any>>;
    duration: number;
    delay?: number | ((el: any, i: number, total: number) => number);
    endDelay?: number;
    easing?: ((t: number) => number) | keyof typeof easingFunctions;
    round?: number | boolean;
    loop?: number | boolean;
    direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
    update?: (currentState: any, progress: {
        completed: number;
        remaining: number;
    }) => void;
    begin?: () => void;
    complete?: () => void;
    autoplay?: boolean;
}
interface TimelineConfig {
    autoplay?: boolean;
    direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
    loop?: number | boolean;
    update?: (progress: {
        completed: number;
        remaining: number;
    }) => void;
    complete?: () => void;
}
interface Animation {
    play: () => Animation;
    pause: () => Animation;
    restart: () => Animation;
    seek: (progress: number) => Animation;
    reverse: () => Animation;
    completed: Promise<void>;
    progress: number;
    cancel: () => void;
}
interface Timeline {
    add: (animationConfig: AnimationConfig, timePosition?: string | number) => Timeline;
    play: () => Timeline;
    pause: () => Timeline;
    restart: () => Timeline;
    seek: (progress: number) => Timeline;
    reverse: () => Timeline;
    cancel: () => void;
    completed: Promise<void>;
}
export declare const easingFunctions: {
    linear: (t: number) => number;
    easeInQuad: (t: number) => number;
    easeOutQuad: (t: number) => number;
    easeInOutQuad: (t: number) => number;
    easeInCubic: (t: number) => number;
    easeOutCubic: (t: number) => number;
    easeInOutCubic: (t: number) => number;
    easeInQuart: (t: number) => number;
    easeOutQuart: (t: number) => number;
    easeInOutQuart: (t: number) => number;
    easeInExpo: (t: number) => number;
    easeOutExpo: (t: number) => number;
    easeInOutExpo: (t: number) => number;
    easeOutBounce: (t: number) => number;
    easeInBounce: (t: number) => number;
    easeInOutBounce: (t: number) => number;
    easeInElastic: (t: number) => number;
    easeOutElastic: (t: number) => number;
    easeInOutElastic: (t: number) => number;
    spring: (t: number) => number;
};
/**
 * Enhanced animate function
 */
export declare const animate: (config: AnimationConfig) => Animation;
/**
 * Timeline for sequencing animations
 */
export declare const timeline: (config?: TimelineConfig) => Timeline;
/**
 * Helper function to create staggered animations
 */
export declare const stagger: (value: number, options?: {
    start?: number;
    from?: number | "center" | "edges" | "first" | "last";
    direction?: "normal" | "reverse";
    grid?: [rows: number, cols: number];
    axis?: "x" | "y";
    easing?: (t: number) => number;
}) => (el: any, i: number, total: number) => number;
/**
 * Spring animation helper
 */
export declare const spring: (config?: {
    mass?: number;
    stiffness?: number;
    damping?: number;
    velocity?: number;
}) => (t: number) => number;
/**
 * Create a physics-based animation
 */
export declare const physics: (config: AnimationConfig & {
    physics?: {
        mass?: number;
        stiffness?: number;
        damping?: number;
        velocity?: number;
    };
}) => Animation;
/**
 * Utility to create a sequence of animations
 */
export declare const sequence: (animations: AnimationConfig[]) => Timeline;
/**
 * Create transform string from individual transform properties
 */
export declare const createTransform: (transforms: Record<string, number | string>) => string;
/**
 * Quick one-shot animations for common use cases
 */
export declare const effects: {
    fadeIn: (targets: any, duration?: number, options?: {}) => Animation;
    fadeOut: (targets: any, duration?: number, options?: {}) => Animation;
    slideIn: (targets: any, direction?: string, distance?: string, duration?: number, options?: {}) => Animation;
    slideOut: (targets: any, direction?: string, distance?: string, duration?: number, options?: {}) => Animation;
    zoom: (targets: any, start?: number, end?: number, duration?: number, options?: {}) => Animation;
    pulse: (targets: any, scale?: number, duration?: number, options?: {}) => Animation;
    shake: (targets: any, intensity?: number, duration?: number, options?: {}) => Animation;
    flipIn: (targets: any, axis?: string, duration?: number, options?: {}) => Animation;
    bounce: (targets: any, height?: string, duration?: number, options?: {}) => Animation;
};
export {};