如何制作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】复制上一帧，同时最好也不要修改画框的大小，保持其比例。

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