显现
通过遮罩图案直接显现下一张图像、中间不经过纯色停留的转场
通过任意遮罩图案,将下一张图像覆盖到当前图像之上显现,这是不经过纯色保持的 A→B 直接切换。Reveal 是 Through Color 的直切版本,后者让相同的图案经过一段纯色保持
几何形状完全由图案决定,因此同一个 Mask 工厂方法只需改一个词就能在两种引擎之间切换
用法
import { Reveal, Mask } from "narraleaf-react";
// 柔边方向性擦除
image.char("image1.jpg", new Reveal({ duration: 800, pattern: Mask.wipe({ direction: "left" }) }));
// 从中心展开的柔边圈显
image.char("image1.jpg", new Reveal({ duration: 800, pattern: Mask.iris() }));
// 硬边擦除(零羽化)
image.char("image1.jpg", new Reveal({ duration: 800, pattern: Mask.wipe({ direction: "right", feather: 0 }) }));
// 百叶窗
image.char("image1.jpg", new Reveal({ duration: 800, pattern: Mask.blinds({ slats: 8 }) }));
// 时钟扫掠
image.char("image1.jpg", new Reveal({ duration: 1200, pattern: Mask.clock() }));公共方法
constructor
options: RevealOptionsduration: number- 过渡效果的持续时间,以毫秒为单位pattern: MaskPattern- 下一张图像显现所经过的覆盖几何形状。使用 Mask 上的静态工厂方法构建,或手写自定义图案easing?: TransformDefinitions.EasingDefinition- 缓动函数,参见TransformDefinitions.EasingDefinition