Transition

In NarraLeaf-React, transitions can be used on elements and scene background. For example, you can use image transitions to transition images.

image.setSrc("image1.png", new Dissolve(3000))

Here is a list of transition types:

1. ImageTransition
2. TextTransition

You can only apply specific transitions to specific elements. For example, you can only apply IImageTransition to Image elements

There are some built-in transitions in NarraLeaf-React. If you want to custom your own transition, please see Advanced Transition.

Built-in Image Transitions

Dissolve

The current image will fade out, and the next image will fade in at the same time

constructor(duration?: number, easing?: TransformDefinitions.EasingDefinition);

See TransformDefinitions.EasingDefinition

Fade

The current image will fade out, and the next image will fade in

constructor(duration?: number, ease?: TransformDefinitions.EasingDefinition);

See TransformDefinitions.EasingDefinition

FadeIn

The next image will fade-in in a direction

/**
 * @param direction The direction the image will move from
 * @param offset The distance the image will move (in pixels)
 * @param duration The duration of the transition
 * @param easing The easing function
 */
constructor(direction: "left" | "right" | "top" | "bottom", offset: number, duration?: number, easing?: TransformDefinitions.EasingDefinition);

See TransformDefinitions.EasingDefinition

Next Steps

If you want to custom your own transition, please see Advanced Transition.