显示图片
创建 Image 元素，在舞台上显示与隐藏它，并用过渡为透明度变化添加动画
要显示图片，你需要使用 Image 元素
定义图片
你可以通过提供 IImageUserConfig 对象来构建图片
import { Image } from "narraleaf-react";const character1Happy = new Image({
src: "https://你的图片链接",
zoom: 0.5, // 图片的缩放比例
position: {
yalign: 0.3, // 图片的垂直对齐方式
xalign: 0.5, // 图片的水平对齐方式
},
});图片初始位于屏幕中央，缩放为 0.5。执行 show() 前不会显示
显示图片
你可以通过向场景添加动作来显示图片
scene1.action([
character1Happy.show(),
]);图片将立即显示在屏幕上
显示时可以让透明度平滑变化：
scene1.action([
character1Happy.show({
ease: "easeInOut",
duration: 1000,
}),
]);隐藏图片
你可以通过向场景添加动作来隐藏图片
scene1.action([
character1Happy.hide(),
]);图片将立即从屏幕上隐藏
隐藏时使用相同的参数：
scene1.action([
character1Happy.hide({
ease: "easeInOut",
duration: 1000,
}),
]);更改图片
基于 Src 的图片
你可以通过更新图片源来更改图片
scene1.action([
character1Happy.char("https://新图片链接"),
]);或者使用 transition
import {Dissolve} from "narraleaf-react";scene1.action([
character1Happy.char("https://新图片链接", new Dissolve({ duration: 300 })),
]);基于标签的图片
每个外观都已经合成为单张图片时，可以使用标签组
注意：基于标签的图片是一项功能，允许你通过提供标签来更改图片外观
你不能将基于标签的图片配置与普通图片配置混合使用 普通图片配置的
src属性为字符串
import {Image} from "narraleaf-react";const image = new Image({
src: {
groups: [
["happy", "sad", "angry"], // 组 1
["shirt", "jacket", "t-shirt"], // 组 2
["trousers", "skirt", "shorts"], // 组 3
],
defaults: ["happy", "shirt", "trousers"], // 默认外观
resolve: (emotion, top, bottom) => `https://你的/图片/路径/${emotion}_${top}_${bottom}.png`,
} as const,
});
// 默认图片将是 `https://你的/图片/路径/happy_shirt_trousers.png`
scene1.action([
image.show(),
image.char(["angry", "shorts"], new Dissolve({ duration: 1000 })), // 将图片更改为 `https://你的/图片/路径/angry_shirt_shorts.png`
]);层叠图片
素材按部件分别导出时，使用 layers。NarraLeaf 按数组顺序从下到上叠放图片。3 种表情、3 种上衣和 3 种下装只需 9 张图，不需要准备 27 种合成结果
const image = new Image({
src: {
// 从下到上
layers: [
"body.png",
{trousers: "trousers.png", skirt: "skirt.png", shorts: "shorts.png"},
{shirt: "shirt.png", jacket: "jacket.png", tshirt: "t-shirt.png"},
{happy: "happy.png", sad: "sad.png", angry: "angry.png"},
{noHat: null, hat: "hat.png"},
(tags) => tags.has("sad") ? "tears.png" : null,
],
defaults: ["trousers", "shirt", "happy", "noHat"],
},
});
scene1.action([
image.show(),
image.char(["angry", "shorts", "hat"], new Dissolve({ duration: 1000 })),
]);每个标签只替换自己所在的变体层，其他层保持不变。标签会从配置中自动推断，拼写错误会被 TypeScript 拒绝
常量层和变体层会自动预加载。函数层的返回值无法静态分析，需要手动注册所有可能返回的 URL：
scene1.preloadImage("tears.png");null 图层、函数图层、附着图片、遮罩和预加载规则见 Image
动画化图片
你可以使用 Transform 对图片进行动画处理
import { Transform } from "narraleaf-react";// 将图片移动到屏幕右侧
scene1.action([
character1Happy.transform(
Transform.create()
.position("right")
.commit({ duration: 120, ease: "easeOut" })
),
]);
// 或者
scene1.action([
character1Happy.transform(Transform.right(120, "easeOut")),
]);图片会在 120 毫秒内以缓出曲线移动到右侧
其他图片过渡
NarraLeaf 0.30 内置 Dissolve、FadeIn、BlurDissolve、Push、Darkness、Reveal、RuleReveal、ThroughColor 和 Exposure 这些转场方式，以及供 Reveal 和 ThroughColor 播放的 Mask 图案词汇（擦除、对开门、圈显、时钟、风车、百叶窗、圆点）。这些过渡都支持普通图片、标签图片和层叠图片
有关 Transform 的更多信息，请查看 Transform 文档