Transition

In NarraLeaf-React, transitions animate a change on stage: a character sprite swap, a background change, or a scene jump.

A sprite or background transition plays across the image being replaced. A scene jump plays across the whole stage, with both scenes on screen for its duration. The same transitions are used for both.

Engines and Patterns

The transition API separates how the change plays from what shape it takes:

• Engines are transition classes. They are instantiated with new, and every engine takes a single options object: new Dissolve({ duration: 500 }).
• Patterns are geometry. They are built with the static factories on Mask and passed to a mask-driven engine's pattern option. Patterns are plain values: you never instantiate them with new.

A transition therefore reads as engine(animation): the engine decides how the pixels change, and the pattern is the animation it plays.

import { Reveal, ThroughColor, Mask } from "narraleaf-react";

// Reveal the next image directly through a clock sweep
image.char("image1.jpg", new Reveal({ duration: 1200, pattern: Mask.clock() }));

// The same geometry, but passing through a black hold
image.char("image1.jpg", new ThroughColor({ duration: 1800, pattern: Mask.clock() }));

Example

import { Dissolve } from "narraleaf-react";

image.char("image1.jpg", new Dissolve({ duration: 3000, easing: "linear" }));

Built-in Transitions

Image Transitions

• Dissolve - crossfade between the two images
• Fade In - fade in the next image, optionally travelling from a pixel offset
• Blur Dissolve - crossfade through a blur
• Push - slide the next image in while the current one slides out
• Darkness - bring the next image up out of black, or dim it into black
• Reveal - reveal the next image directly through any mask pattern
• Rule Reveal - reveal the next image in the order a grayscale rule image sets
• Through Color - cover with a colour, hold, then uncover on the next image
• Exposure - burn the frame out to white in stops, then bring the next image back down

Mask Patterns

• Mask - the pattern vocabulary shared by Reveal and Through Color: wipe, barn door, iris, clock, fan, blinds, and dots, plus Mask.invert and hand-written custom patterns