【免费下载链接】dooryOpen source canva alternative项目地址https://gitcode.com/gh_mirrors/do/doory点击查看免费下载Doory 是一款开源的在线设计工具开源 Canva 替代品内置完整的动画系统27 种进出场动画、12 种强调动效和 16 种页面切换配合时间轴可以做出海报逐字浮现、PPT 级演示、甚至导出 MP4 动画视频的效果。本文是一份面向新手的 Doory 动画教程帮你 10 分钟掌握全部动效玩法。3 种动画槽位理解 Doory 动画的核心逻辑在 Doory 编辑器中选中任意元素打开左侧Animate动画面板你会看到 3 个动画槽位槽位英文名作用进入Enter元素如何登场例如从下方升起退场Exit元素如何离场本质是进入动画倒放强调Emphasis元素停留期间做什么例如心跳、摇摆 面板的源码位于 AnimatePanel.tsx每个动画效果都注册在 builtinInOut.ts 中一个效果就是一个从隐藏到静止的函数。27 种进出场动画完整清单所有预设按风格分为 4 组鼠标悬停即可实时预览效果 基础组Basic——8 种动画效果描述Fade 淡入最安全的默认选择平滑透明度过渡Rise 上升元素从下方升起适合标题登场Drop 下落从上方落下像物件被放下来Pop 弹出带弹簧曲线的小幅放大活泼俏皮Grow 放大从小尺寸放大到正常大小Zoom 缩放带轻微模糊的镜头式缩放Blur 模糊从虚化到清晰电影感拉满Focus 聚焦放大 模糊同步收敛像镜头对焦 运动组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 呼吸默认开启循环动效效果适合场景Pulse 脉冲规律放大缩小按钮、CTAWiggle 扭动快速小角度扭来扭去引导性图标Float 漂浮 上下轻柔悬浮可循环贴纸、装饰元素Shake 抖动快速左右震颤错误提示、强调Flash 闪烁透明度周期性闪烁价格、折扣标签Heartbeat 心跳模拟真实心跳节奏情人节、促销Tada 撒花放大 左右摇摆组合拳成功、庆祝Spin 旋转360° 原地转一圈加载感、趣味Hop 蹦跳连续原地跳跃吉祥物、角色Jello 果冻弹性形变衰减可爱风格Swing 秋千从顶点荡起的衰减摆动吊牌、标签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时长 Duration0.1 – 10 秒延迟 Delay0 – 60 秒做接力出场效果的关键缓动 EasingLinear、Ease in/out/in-out、Spring 弹簧过冲回弹、Bounce 弹跳落地反弹曲线实现见 easing.ts方向 DirectionSlide、Wipe、Whip 等可指定四方向强度 Strength控制位移距离、旋转角度等幅度重复 Loop强调动效可无限循环文字级动画与整页风格对文字元素还能指定动画粒度Animate text byAll at once整体Lines逐行Words逐词Letters逐字Typewriter 的默认粒度在Page标签下还可以一键整页动画页面内所有元素从上到下依次执行 Fade、Rise、Pop、Slide、Words、Typewriter、Wipe、Focus 八种页级风格做 PPT 式逐条登场特别好用。用时间轴编排专业级动效按快捷键或命令面板呼出Timeline时间轴即可像视频剪辑软件一样拖拽移动每条动画的起始时间拉伸调整动画时长Alt 方向键微调按播放键预览整页Space 暂停、Esc 停止还支持倍速播放当动画超出页面时长时可一键Fit page time自动扩展时间轴数学工具位于 timelineMath.ts。呈现模式与视频导出动画做完后有两种放映方式Present 演示模式带演讲者备注、计时、自动翻页、激光笔还能打开第二个窗口当提词器导出视频直接在浏览器里渲染导出MP4、WebM 或动图 GIF动画、音乐、音效全部合成在视频中新手 3 步速成选中元素 → 打开 Animate 面板 → 挑一个 Enter 预设悬停看效果点击即应用给标题加 Typewriter给贴纸加 Float 循环漂浮给价格标签加 Heartbeat切到 Page 标签设置整页风格 页面切换导出 MP4 完成 动画系统源码导览想深入了解实现可以从这些文件入手模块说明frontend/src/editor/animation/动画引擎目录预设、时间轴、渲染器、帧采样frontend/src/editor/animation/presets.ts预设注册表也支持插件扩展新动画frontend/src/editor/animation/model.ts动画数据模型与槽位定义frontend/src/editor/animation/frameRenderer.ts逐帧渲染器视频导出的核心frontend/src/editor/panels/AnimatePanel.tsx动画面板 UIfrontend/src/editor/animation/strings.ts全部动画名称与文案Doory 的动画全部在浏览器本地计算与渲染协作编辑时动画会以属性形式实时同步给协作者每一次调整包括拖动滑杆都只是一个可撤销步骤。打开任意一张海报模板试试吧赞分享【免费下载链接】dooryOpen source canva alternative项目地址https://gitcode.com/gh_mirrors/do/doory点击查看免费下载相关推荐AOS的12种内置动画效果从fade到zoom的视觉表现AOS的12种内置动画效果从fade到zoom的视觉表现 引言滚动动画的价值与AOS的定位 在现代Web设计中滚动触发动画Scroll Triggere前端UI组件7种震撼文字动画LTMorphingLabel让iOS界面瞬间灵动7种震撼文字动画LTMorphingLabel让iOS界面瞬间灵动 你还在为单调的UILabel发愁想让应用文字切换拥有苹果WWDC级别的丝滑过渡本文将带UI组件7种Font Awesome动画效果让界面瞬间变生动的实战指南7种Font Awesome动画效果让界面瞬间变生动的实战指南 你是否还在用静态图标堆砌界面用户点击按钮后毫无反馈本文将通过Font Awesome 7的前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考