Doory 是一款开源的在线设计工具（开源 Canva 替代品），内置完整的动画系统：27 种进出场动画、12 种强调动效和 16 种页面切换，配合时间轴可以做出海报逐字浮现、PPT 级演示、甚至导出 MP4 动画视频的效果。本文是一份面向新手的 Doory 动画教程，帮你 10 分钟掌握全部动效玩法。

3 种动画槽位：理解 Doory 动画的核心逻辑

在 Doory 编辑器中选中任意元素，打开左侧Animate（动画）面板，你会看到 3 个动画槽位：

💡 面板的源码位于 AnimatePanel.tsx，每个动画效果都注册在 builtinInOut.ts 中，一个效果就是一个"从隐藏到静止"的函数。

27 种进出场动画完整清单

所有预设按风格分为 4 组，鼠标悬停即可实时预览效果：

🔹 基础组（Basic）——8 种

🔸 运动组（Motion）——6 种

• Slide 滑动：可从四方向滑入
• Drift 漂移：缓慢飘入，时长更长，适合氛围元素
• Bounce 弹跳：带反弹曲线的高空落下
• Roll 翻滚：边滚边移入，像滚轮滚动
• Whip 甩入：快速甩入 + 运动模糊 + 倾斜，速度感最强
• Tumble 翻滚落入：旋转着落下，适合贴纸、徽章

🔷 揭示组（Reveal）——7 种

• Wipe 擦除：从一侧擦开显现
• Curtain 幕布：从中间向两侧展开
• Iris 光圈：从中心圆形扩散，复古胶片感
• Unfold 展开：像纸片向上翻折展开
• Typewriter 打字机：文字逐字符出现（默认逐字，可改为逐词/逐行）
• Baseline 基线：文字逐行从自己的基线下方升起
• Neon 霓虹闪烁：像霓虹灯管"啪啪"点亮 ⚡

🔶 强调组（Bold）——6 种

• Spin 旋转入场：旋转 270° 同时放大
• Flip 翻牌：3D 翻转展开
• Swing 钟摆：从上方悬挂荡入
• Elastic 弹性：横向拉伸后弹回
• Stomp 砸入：大而模糊地"砸"下来，视觉冲击最强
• Glitch 故障：赛博朋克风格的抖动错位显现

12 种强调动效清单

强调动效的特点是首尾都在静止状态，所以可以无缝循环播放（如 Float 漂浮、Breathe 呼吸默认开启循环）：

这 12 种预设定义在 builtinEmphasis.ts 中。

16 种页面切换（Page Transitions）

切换到面板顶部的Page标签页，可以设置演示或导出视频时页面如何切换：

None、Fade、Dip to black（淡入黑场）、Dissolve 溶解、Blur 模糊、Slide 滑动、Push 推入、Cover 覆盖、Uncover 揭开、Zoom in / Zoom out、Wipe 擦除、Circle reveal 圆形揭示、Flip 翻转、Spin 旋转、Blinds 百叶窗。

还支持Apply to all pages一键应用所有页面，以及方向（来自左/右/上/下）和 0.2–3 秒的时长调节。切换预设注册在 builtinTransitions.ts。

动画参数精调指南：时长、缓动与方向

点击已选中的动画预设，下方会展开设置区（AnimateSettings.tsx）：

• 时长 Duration：0.1 – 10 秒
• 延迟 Delay：0 – 60 秒，做"接力出场"效果的关键
• 缓动 Easing：Linear、Ease in/out/in-out、Spring 弹簧（过冲回弹）、Bounce 弹跳（落地反弹），曲线实现见 easing.ts
• 方向 Direction：Slide、Wipe、Whip 等可指定四方向
• 强度 Strength：控制位移距离、旋转角度等幅度
• 重复 Loop：强调动效可无限循环

文字级动画与整页风格

对文字元素，还能指定动画粒度（Animate text by）：

• All at once整体
• Lines逐行
• Words逐词
• Letters逐字（Typewriter 的默认粒度）

在Page标签下还可以一键"整页动画"：页面内所有元素从上到下依次执行 Fade、Rise、Pop、Slide、Words、Typewriter、Wipe、Focus 八种页级风格，做 PPT 式逐条登场特别好用。

用时间轴编排专业级动效

按快捷键或命令面板呼出Timeline（时间轴），即可像视频剪辑软件一样：

1. 拖拽移动每条动画的起始时间
2. 拉伸调整动画时长（Alt + 方向键微调）
3. 按播放键预览整页，Space 暂停、Esc 停止，还支持倍速播放
4. 当动画超出页面时长时，可一键"Fit page time"自动扩展

时间轴数学工具位于 timelineMath.ts。

呈现模式与视频导出

动画做完后有两种"放映"方式：

• Present 演示模式：带演讲者备注、计时、自动翻页、激光笔，还能打开第二个窗口当提词器
• 导出视频：直接在浏览器里渲染导出MP4、WebM 或动图 GIF，动画、音乐、音效全部合成在视频中

新手 3 步速成

1. 选中元素 → 打开 Animate 面板 → 挑一个 Enter 预设，悬停看效果，点击即应用
2. 给标题加 Typewriter，给贴纸加 Float 循环漂浮，给价格标签加 Heartbeat
3. 切到 Page 标签设置整页风格 + 页面切换，导出 MP4 完成 🎬

动画系统源码导览

想深入了解实现，可以从这些文件入手：

Doory 的动画全部在浏览器本地计算与渲染，协作编辑时动画会以属性形式实时同步给协作者，每一次调整（包括拖动滑杆）都只是一个可撤销步骤。打开任意一张海报模板，试试吧！