如何制作Excalidraw流程图动画

前言

今天将一步步教大家如何通过Excalidraw Smart Presentation这个工具制作Excalidraw动画

Excalidraw相信大家都不陌生,其独特的手绘风格以及本身开源带来的社区、生态吸引了非常多的用户,在Github上面已经有近100K star了,这是非常恐怖的数量!

使用Excalidraw绘制静态图像是非常容易的,但是,想要将其动起来,就相对困难了,而今天介绍的这个工具Excalidraw Smart Presentation就是来解决这个问题的,其本身也是开源的

工具地址可以在本站找到,本站Turbo0.om收集了非常多类似的视频动画制作工具,是一个面向内容创者/影响者的工具/资源站,欢迎大家探索~

工具地址: Excalidraw Smart Presentation

步骤速览

  1. 创建帧:
    • 使用 帧工具 (f 键、工具栏或命令面板)。
    • 每个帧代表一张幻灯片。
  2. 定义幻灯片顺序:
    • 帧的顺序基于它们的 y 轴位置 。
  3. 动画:
    • 从一个幻灯片到另一个幻灯片重复的元素在幻灯片过渡时通过插值其属性的变化进行动画处理。
    • 此行为可以自定义(见下文)。
  4. 演示您的幻灯片:
    • 点击 "演示" ,然后使用 → / ←(箭头键)进行导航。

完整演示

首先我们打开Excalidraw Smart Presentation,然后按【F】键新建一个画框,你可以把每一个画框理解为PPT中的每一个页面,也就是动画中的每一帧。新建画框之后,我们在其中绘制一些我们想要演示的流程图,想这样:

此时,我们已经绘制了第一帧,接下来,我按照同样的方式绘制第二帧,不过,这里我们需要先选中前面的画框,然后【Command/Strl+Shift+D】复制画框,然后在复制出来的部分进行修改。

然后,我们就可以按照同样的方式,每次【Command/Strl+Shift+D】复制最后一帧,然后进行修改,这里我简单制作了几帧:

最终,我们选中第一帧的内容,点然后击右下角的【Present】即可演示,演示效果如下(按左右箭头进行切换):

最后

一定要使用【Command/Ctrl + Shift + D】复制上一帧,同时最好也不要修改画框的大小,保持其比例。

好了,本次的教程演示到这里也就结束了,基本此,可以完成许多有意思的架构流程图的演示动画,比如,官网的演示动画是这样的:

相关推荐
Yingyingyingyyy3 分钟前
GitHub 开源热榜项目-周榜(2026-11-02)
人工智能·开源·github
程序员梅雨4 分钟前
【从零开始学习数据仓库 | 第三篇】: Flume——数据采集基石
java·大数据·数据仓库·后端·学习·flume
Sailing9 分钟前
🚀🚀【封闭结束7】Agent 为什么总是“失忆”?从长期记忆到上下文工程的生产实践
前端·人工智能·agent
OpenTiny社区16 分钟前
AI 生成的 Vue 代码,终于能直接用了!
前端·vue.js·github
Jack_hsfs21 分钟前
第6章Spring 管理的是对象,还是对象的说明书?
java·后端·spring
小小张说故事30 分钟前
Python 的 0.1 + 0.2 为什么不等于 0.3?拆开 IEEE 754 与那串死循环小数
后端·python
饭后一颗花生米35 分钟前
GitHub Actions 自动化:5 个真实运维提效案例
运维·自动化·github
打工仔折腾 AI37 分钟前
鸿蒙移动端直连 Windows 远程桌面配置与性能调优实践
人工智能·windows·后端·python·华为·性能优化·harmonyos
Ramble_Naylor1 小时前
Rust深度解读:高性能 Web 网关与 Axum 架构剖析
前端·架构·rust