@drincs/pixi-vn/dist/functions/canvas/canvas-transition.d.ts

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

import { UPDATE_PRIORITY } from 'pixi.js';
import { ImageSpriteOptions, ImageContainerOptions } from '../../interface/canvas/canvas-options.js';
import CanvasBaseItem from '../../classes/canvas/CanvasBaseItem.js';
import { MoveInOutProps, PushInOutProps, ShowWithDissolveTransitionProps, ShowWithFadeTransitionProps, ZoomInOutProps } from '../../interface/canvas/transition-props.js';
import '../../classes/canvas/AdditionalPositions.js';
import '../../classes/canvas/AnchorExtension.js';
import '../../types/ContainerChild.js';
import '../../interface/canvas/memory/CanvasBaseItemMemory.js';
import '../../types/ticker/FadeAlphaTickerProps.js';
import '../../interface/TickerProgrationType.js';
import '../../types/ticker/MoveTickerProps.js';
import '../../types/ticker/ZoomTickerProps.js';

type TComponent = CanvasBaseItem<any> | string | string[] | {
    value: string;
    options: ImageSpriteOptions;
} | {
    value: string[];
    options: ImageContainerOptions;
};
/**
 * Show a image in the canvas with a disolve effect.
 * Disolve effect is a effect that the image is shown with a fade in.
 * If exist a image with the same alias, then the image is replaced and the first image is removed after the effect is done.
 * This transition is done with a {@link FadeAlphaTicker} effect.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
 * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
 * If you don't provide the component, then the alias is used as the url.
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
 */
declare function showWithDissolve(alias: string, component?: TComponent, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
/**
 * Remove a image from the canvas with a disolve effect.
 * Disolve effect is a effect that the image is removed with a fade out.
 * This transition is done with a {@link FadeAlphaTicker} effect.
 * This function is equivalent to {@link removeWithFade}.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns The ids of the tickers that are used in the effect.
 */
declare function removeWithDissolve(alias: string | string[], props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY): string[] | undefined;
/**
 * Show a image in the canvas with a fade effect.
 * Fade effect is a effect that the image is shown with a fade in.
 * If exist a image with the same alias, the existing image is removed with a fade transition, and after the effect is done, the new image is shown with a fade transition.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
 * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
 * If you don't provide the component, then the alias is used as the url.
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
 */
declare function showWithFade(alias: string, component?: TComponent, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
/**
 * Remove a image from the canvas with a fade effect.
 * Fade effect is a effect that the image is removed with a fade out.
 * This transition is done with a {@link FadeAlphaTicker} effect.
 * This function is equivalent to {@link removeWithDissolve}.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns The ids of the tickers that are used in the effect.
 */
declare function removeWithFade(alias: string | string[], props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY): string[] | undefined;
/**
 * Show a image in the canvas with a move effect. The image is moved from outside the canvas to the x and y position of the image.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
 * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
 * If you don't provide the component, then the alias is used as the url.
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
 */
declare function moveIn(alias: string, component?: TComponent, props?: MoveInOutProps & {
    /**
     * If true, then the old component is removed with a move out, after the new image is moved in.
     * @default false
     */
    removeOldComponentWithMoveOut?: boolean;
}, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
/**
 * Remove a image from the canvas with a move effect. The image is moved from the x and y position of the image to outside the canvas.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns The ids of the tickers that are used in the effect.
 */
declare function moveOut(alias: string, props?: MoveInOutProps, priority?: UPDATE_PRIORITY): string[] | undefined;
/**
 * Show a image in the canvas with a zoom effect. The image is zoomed in from the center of the canvas.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
 * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
 * If you don't provide the component, then the alias is used as the url.
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
 */
declare function zoomIn(alias: string, component?: TComponent, props?: ZoomInOutProps & {
    /**
     * If true, then the old component is removed with a zoom out, after the new image is zoomed in.
     * @default false
     */
    removeOldComponentWithZoomOut?: boolean;
}, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
/**
 * Remove a image from the canvas with a zoom effect. The image is zoomed out to the center of the canvas.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns The ids of the tickers that are used in the effect.
 */
declare function zoomOut(alias: string, props?: ZoomInOutProps, priority?: UPDATE_PRIORITY): string[] | undefined;
/**
 * Show a image in the canvas with a push effect. The new image is pushed in from the inside of the canvas and the old image is pushed out to the outside of the canvas.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas.
 * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas.
 * If you don't provide the component, then the alias is used as the url.
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded.
 */
declare function pushIn(alias: string, component?: TComponent, props?: PushInOutProps, priority?: UPDATE_PRIORITY): Promise<string[] | undefined>;
/**
 * Remove a image from the canvas with a push effect. The image is pushed out to the outside of the canvas.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias The unique alias of the image. You can use this alias to refer to this image
 * @param props The properties of the effect
 * @param priority The priority of the effect
 * @returns The ids of the tickers that are used in the effect.
 */
declare function pushOut(alias: string, props?: PushInOutProps, priority?: UPDATE_PRIORITY): string[] | undefined;

export { moveIn, moveOut, pushIn, pushOut, removeWithDissolve, removeWithFade, showWithDissolve, showWithFade, zoomIn, zoomOut };