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

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

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
tan180°6 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
wuk9987 小时前
基于MATLAB编制的锂离子电池伪二维模型
linux·windows·github
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
优创学社27 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博