Vanilla Disintegratev1.0.0
ZH
本页内容

每个内置名称都是一个效果对:删除动画与逻辑匹配的恢复动画。恢复阶段独立实现,并不是简单地倒放删除时间线。

四种效果

名称删除恢复
dust元素化为向上飘散的尘埃。尘埃在元素最终几何位置聚合。
vapor图像柔化并蒸发。蒸汽凝结成可见元素。
scatter粒子向外爆散。粒子从外部汇聚。
wind气流把粒子带向一侧。同一方向的气流把粒子送回。
effects.remove(card, { effect: 'dust' });
effects.restore(card, { effect: 'dust' });

effects.remove(card, { effect: 'vapor' });
effects.restore(card, { effect: 'vapor' });

effects.remove(card, { effect: 'scatter' });
effects.restore(card, { effect: 'scatter' });

effects.remove(card, { effect: 'wind' });
effects.restore(card, { effect: 'wind' });

默认效果

const effects = new Disintegrator({ effect: 'vapor' });

effects.remove(firstElement); // vapor
effects.remove(secondElement, { effect: 'scatter' });
effects.restore(insertedElement, { effect: 'wind' });

使用记住的效果对

const removal = effects.remove(card, {
  effect: 'wind',
  retain: true,
});

await removal.finished;
const retained = effects.take(removal.removalId!);

if (retained) {
  list.prepend(retained);
  await effects.restore(retained).finished; // wind 恢复
}

只有明确需要不同动画时,才在 restore() 中覆盖 effect

声音槽位

每个阶段都有独立声音槽。目前 dust.removewind.remove 带有音频,其余六个槽位在素材加入前保持 null。声音需显式开启:sound: true 为实例或单次调用启用内置音频,sound: false 保持关闭且不改变动画。

在 GitHub 上编辑此页