@drincs/pixi-vn/dist/motion.d.ts

Pixi'VN is a npm package that provides various features for creating visual novels.

import { CommonTickerProps, CanvasBaseInterface } from '@drincs/pixi-vn/canvas';
import { AnimationOptions as AnimationOptions$1, ObjectTarget, At, SequenceOptions as SequenceOptions$1, AnimationPlaybackControlsWithThen, ObjectSegment as ObjectSegment$1 } from 'motion';
export { At } from 'motion';
import { UPDATE_PRIORITY, Ticker } from '@drincs/pixi-vn/pixi.js';

interface MotionComponentExtension {
    pivot?: number;
    pivotX?: number;
    pivotY?: number;
    scale?: number;
    scaleX?: number;
    scaleY?: number;
}

type AnimationOptionsCommon = Omit<AnimationOptions$1, "onComplete" | "onPlay" | "onStop" | "onUpdate" | "onRepeat">;

type AnimationOptions = AnimationOptionsCommon & Omit<CommonTickerProps, "startOnlyIfHaveTexture">;

type KeyframesType<T> = ObjectTarget<T> & MotionComponentExtension;
type AnimationSequenceOptions = Omit<AnimationOptions$1, "onComplete" | "onPlay" | "onStop" | "onUpdate" | "onRepeat">;
type SequenceOptions = SequenceOptions$1 & Omit<CommonTickerProps, "startOnlyIfHaveTexture">;
type ObjectSegment<O extends CanvasBaseInterface<any>> = [ObjectTarget<O> & MotionComponentExtension];
type ObjectSegmentWithTransition$1<O extends CanvasBaseInterface<any>> = [
    ObjectTarget<O> & MotionComponentExtension,
    AnimationOptions & At
];

declare namespace motion {
    /**
     * Animate a canvas element.
     * @param components The canvas element(s) or their alias(es) to animate.
     * @param keyframes The keyframes to animate to.
     * @param options The animation options.
     * @param priority The update priority of the ticker.
     * @returns The id of the ticker, or `undefined` if the ticker was not added.
     * @throws {PixiError} when `keyframes` or `options` contain functions or class instances that cannot be serialized to JSON.
     */
    function animate<T extends CanvasBaseInterface<any>>(components: T | string | (string | T)[], keyframes: KeyframesType<T>, options?: AnimationOptions, priority?: UPDATE_PRIORITY): string | undefined;
    /**
     * Animate a canvas element using a sequence.
     * @param components The canvas element(s) or their alias(es) to animate.
     * @param sequence The sequence of animation segments.
     * @param options The sequence options.
     * @param priority The update priority of the ticker.
     * @returns The id of the ticker, or `undefined` if the ticker was not added.
     * @throws {PixiError} when `sequence` or `options` contain functions or class instances that cannot be serialized to JSON.
     */
    function animate<T extends CanvasBaseInterface<any>>(components: T | string, sequence: (ObjectSegment<T> | ObjectSegmentWithTransition$1<T>)[], options?: SequenceOptions, priority?: UPDATE_PRIORITY): string | undefined;
}

type SegmentOptions = AnimationOptions$1 & At;
type ObjectSegmentWithTransition<O extends {} = {}> = [O, ObjectTarget<O>, SegmentOptions];
/**
 * Create a motion driver that integrates with the PixiJS ticker. This driver will allow you to use motion's animation capabilities while ensuring that animations are synchronized with the PixiJS rendering loop.
 * @param ticker - The PixiJS ticker to integrate with. If not provided, a new ticker will be created.
 * @returns An object that implements the motion driver interface, allowing you to start, stop, and control animations using the PixiJS ticker.
 * @example
 * const ticker = new PIXI.Ticker();
 * const driver = motionDriver(ticker);
 * const animation = animate(mySprite, { x: 100 }, { duration: 1, driver });
 * animation.start();
 */
declare const motionDriver: (ticker: Ticker) => AnimationOptions$1["driver"];
/**
 * Animate a PixiJS component or components using [motion's animate](https://motion.dev/docs/animate) function.
 * This function integrates with the PixiJS ticker to ensure smooth animations.
 *
 * Pixi’VN will **not** keep track of the animation state of this function (This feature is intended for animating PixiJS components used for UI.).
 * @param components - The PixiJS component(s) to animate.
 * @param keyframes - The keyframes to animate the component(s) with.
 * @param options - Additional options for the animation, including duration, easing, and ticker.
 * @returns An animation playback control object that can be used to start, stop, or control the animation.
 * @template T - The type of PixiJS component(s) being animated.
 */
declare function animate<T extends {}>(components: T | T[], keyframes: ObjectTarget<T>, options?: AnimationOptions$1 & {
    ticker?: Ticker;
}): AnimationPlaybackControlsWithThen;
/**
 * Animate a sequence of PixiJS components with transitions using [motion's animate](https://motion.dev/docs/animate) function.
 * This function allows for complex animations involving multiple components and transitions.
 * It integrates with the PixiJS ticker to ensure smooth animations.
 * This function is intended for animating PixiJS components used for UI.
 *
 * Pixi’VN will **not** keep track of the animation state of this function (This feature is intended for animating PixiJS components used for UI.).
 *
 * @param sequence An array of segments to animate, where each segment is an array containing:
 * - The PixiJS component to animate.
 * - The keyframes to animate the component with.
 * - An options object that can include animation options and a ticker.
 * @param options Additional options for the sequence, such as duration and repeat count.
 * @returns An animation playback control object that can be used to start, stop, or control the animation.
 * @template T - The type of PixiJS component(s) being animated.
 */
declare function animate<T extends {}>(sequence: (ObjectSegment$1<T> | ObjectSegmentWithTransition<T>)[], options?: SequenceOptions$1 & {
    ticker?: Ticker;
    driver?: any;
}): AnimationPlaybackControlsWithThen;
/**
 * Create a timeline for running a sequence of functions with transitions. Each function will be called with the provided arguments and will run for the specified duration.
 * @example
 * timeline([
 *     { duration: 10, onComplete: () => console.log("First step completed") },
 *     { duration: 5, onComplete: () => console.log("Second step completed") },
 * ]);
 * @param times
 * @param options
 * @returns
 */
declare function timeline(times: SegmentOptions[], options?: SequenceOptions$1 & {
    ticker?: Ticker;
    driver?: any;
}): AnimationPlaybackControlsWithThen;

export { type AnimationOptions, type AnimationOptionsCommon, type AnimationSequenceOptions, type KeyframesType, type ObjectSegment, type ObjectSegmentWithTransition$1 as ObjectSegmentWithTransition, type SegmentOptions, type SequenceOptions, animate, motion, motionDriver, timeline };