过渡

在 NarraLeaf-React 中，过渡用于为舞台上的切换播放动画：角色立绘切换、背景更换或场景跳转

立绘或背景的过渡作用于被替换的那张图像。场景跳转的过渡跨整个舞台播放，期间两个场景同时在屏幕上。两者使用同一批过渡

转场方式与图案

过渡 API 把切换如何播放与切换呈现什么形状分离开：

• **转场方式（引擎）**是过渡类，使用 new 实例化，且每个引擎只接受一个选项对象：new Dissolve({ duration: 500 })
• 图案是几何形状，由 Mask 上的静态工厂方法构建，并通过遮罩类引擎的 pattern 选项传入。图案是普通值，不会用 new 实例化

因此，一个过渡读作"转场方式（转场动画）"：引擎决定像素如何变化，图案就是它播放的动画

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

// 通过时钟扫掠直接显现下一张图像
image.char("image1.jpg", new Reveal({ duration: 1200, pattern: Mask.clock() }));

// 相同的几何形状，但经过黑场保持
image.char("image1.jpg", new ThroughColor({ duration: 1800, pattern: Mask.clock() }));

示例

import { Dissolve } from "narraleaf-react";

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

内置过渡

图像过渡

• Dissolve - 两张图像交叉淡化
• Fade In - 淡入下一张图像，可附带像素偏移的位移
• Blur Dissolve - 经过模糊的交叉淡化
• Push - 下一张图像滑入，当前图像滑出
• Darkness - 让下一张图像从黑场中亮起，或暗入黑场
• Reveal - 通过任意遮罩图案直接显现下一张图像
• Rule Reveal - 按一张灰度规则图指定的顺序显现下一张图像
• Through Color - 用纯色覆盖、保持，再揭开下一张图像
• Exposure - 按曝光量把画面烧到白，再让下一张图像回落

遮罩图案

• Mask - Reveal 与 Through Color 共享的图案词汇：擦除、对开门、圈显、时钟、风车、百叶窗和圆点，以及 Mask.invert 和手写自定义图案