关于我用Excalidraw制做手绘风ppt记录(四)
📝2633 个字
 | ⌛要看完怎么也得7分钟吧
链接汇总
Excalidraw官网:https://excalidraw.com/
Excalidraw官方开源仓库:https://github.com/excalidraw/excalidraw
Excalidraw Animate官网:https://dai-shi.github.io/excalidraw-animate/
Excalidraw Animate官方开源仓库:https://github.com/dai-shi/excalidraw-animate
Excalidraw Smart Presentation官网:https://excalidraw-smart-presentation.github.io/
Excalidraw Smart Presentation官方开源仓库:https://github.com/excalidraw-smart-presentation/excalidraw-smart-presentation.github.io
本人魔改版Smart Presentation:https://excalippt.fantasydm.top
本人魔改版Smart Presentation开源仓库:https://github.com/Fantasy-Dm/excalidraw-smart-presentation
前景提要:
- 书接上回,因为没事想给自己整个活,所以打算用Excalidraw整一份手绘风的ppt。同时也花了一些篇幅,给大伙介绍了一下Excalidraw的强大。但是为了实现制作ppt这个核心目标,光是Excalidraw肯定是不够的,还是需要借助一下插件的力量。也是非常幸运,在社区里面找到了两个有类似功能的插件。因为使用起来非常有意思,所以又分别花了一些篇幅,给大伙简单介绍了一下这俩插件。他们分别是,非常适合用来做动画的Excalidraw Animate,以及非常接近原生ppt操作体验的Excalidraw Smart Presentation。
- Excalidraw Animate是个基于svg动画的插件,所以拥有十分强大的动画演绎能力。只要把已绘制的Excalidraw白板内容,导入到Excalidraw Animate后,即可自动编排并生成动画。可惜导出的格式受限,也不具备良好的可读性,因此用来制作ppt还是有点勉为其难。
- Excalidraw Smart Presentation插件通过利用Excalidraw里面的画框元素,成功把一张理论上无限尺寸的画板,划分成了若干份的“ppt”。同时搭配自动算法,无需任何配置,即可实现不同分页的自动过渡。但毕竟专业不是动画,所以自动生成的动画,相比Excalidraw Animate要逊色不少。同时因为免费插件体量问题,使用过程还是存在一些难受强迫症的设计。尤其是对动画细节要求如果比较高的话,相对而言整体的制作成本也会随之增加💦。
- 但其实相比Excalidraw Animate,Excalidraw Smart Presentation至少已经让“使用Excalidraw制作ppt”,不再停留于纸上谈兵。如果没有插入一些视频或者Gif动图需求的话,已经能够轻松获得一份,拥有简单的自动动画,以及手绘风格的版面的ppt。所以到此为止,这个系列也应该进入完结撒花的环节🎉。那今天再写这份小作文,又是想表达个怎样的核心思想呢?总不能就只是来发表个完结感言吧?(其实也不是不行,谁还不是个懒屁股呢😆)
- 没错,新的风暴已经出现,怎么能够停滞不前!(穿越时空!竭尽全力....💃)既然遇到了困难,碰巧我也有小有实力,那稍微改几句代码,岂不是信手拈来✨。万一一不小心被我改好了,那岂不是不仅很爽还很酷😎。
- 诶嘿,所以本次小作文的目的,当然不是来给大伙完结感言的。既然都已经有前辈设计了Excalidraw Smart Presentation,那就应该继续发扬光大一下。这次就是要突破Excalidraw和Excalidraw Smart Presentation的限制,继续整一份手绘风的ppt💪!
文字和自由绘制元素动画调整:
- 作为一个手绘风ppt,如果全是淡入淡出,那只能算是留住了手绘风的表面,最关键的灵魂被抛弃了。所以至少得让文字和自由绘制元素的动画,更加贴合手绘这一主题。
-
调整文字动画:
- 其实Excalidraw Smart Presentation本身对文字动画的生成,存在两种类型。一个是完全从0到1,一个是从1到2。可能有点抽象,但我整了两个gif,可以让大家更清楚的看到两者的区别。


- 可以看出来,如果新的分页中出现了一个之前并不存在的文字时,Excalidraw Smart Presentation生成的动画是淡入动画。而当新的分页中的文字,在之前的分页中也存在,那生成的动画就更接近于手绘的感jio(我是这么觉得啊,可能也有人觉得淡入更好看,那可以跳过这部分修改咯😜)。
- 所以目标很明确了,对我来说,文字动画这次主要的修改内容,就是不管是否存在已有元素,都能保持使用第二种动画。具体的代码修改内容这里不单独展示了,相信不会有人喜欢看代码的(嘛,我自己是挺喜欢看的反正🙈)。直接看结果吧,怎么样是不是有那味咯😆。

-
调整自由绘制元素动画:
- Excalidraw Smart Presentation对自由绘制元素生成的动画,并不像文字元素那样存在两种类型,只有淡入一种动画展现形式。因此这一部分的动画,没得捷径可以走,只能自己从零开始捏。但好在Excalidraw Animate生成的动画,已经非常具备手绘的风格。但毕竟Excalidraw Animate是基于svg实现的,和Excalidraw Smart Presentation的实现方式并不相同。所以剩下的就只需要考虑,怎么在Excalidraw Smart Presentation里面,通过代码的方式实现类似的效果。
- 通过一段时间的研究,发现其实自由绘制元素,在代码里面是通过记录所有拐点位置,最后自动生成的。也就是说,如果要模拟绘制的过程,其实需要做的,就是根据当前的动画进度,自动计算出合适的拐点位置和长度。但毕竟动画是连续的,而拐点不是连续的,所以会存在当前进度,处于两个不同拐点之间的情况。不过好在,不同的拐点之间如果没有其他拐点,说明这是一条直线,所以只需要计算出符合当前动画进度的长度,即可获得当前进度所处的拐点位置。(简单的数学计算,应该不需要我再展开讲解吧🙈)
- 有了思路之后,写起代码来自然就很快。还是跟之前一样,咱们直接看看修改前后的效果差异。


- 可以明显感觉到,自由元素有了动画后,手绘风的灵魂瞬间也有了✨!
动画与分页流程控制调整:
-
动画控制调整:
- 解决了动画缺少灵魂的问题,当务之急就是还需要解决动画控制问题。由于为了控制动画的播放顺序,让整体动画更有层次感,需要把一页“ppt”拆分成若干份,使用多个画框,分别表示中间状态。但是带来的问题,自然就是放映过程需要给我的鼠标疯狂上强度。虽然我相信鼠标的质量,还是能够经得住我糟蹋的,但毕竟还是要上台演讲的,还是得讲究个优雅🤣。所以核心诉求,就是能够像普通ppt那样,只需要一次点击,就能自动播放到这页动画结束。
- 其实要解决这个问题也算简单,只要让代码知道现在这个画框只是个中间状态,然后在动画播放结束前,自动帮我前进到下一个画框就行。但问题的关键,其实就出在怎么让代码知道,当前这个画框是不是中间状态。不过好在Excalidraw本身的功能非常强大,哪怕只是一个画框元素,也可以给这个画框增加一些额外的配置,其中就包括编组功能。诶,对咯,关键就是这个编组功能。如果我把所有属于同一页“ppt”的画框,通过编组的形式合并成同一组,那么同一组的所有画框里面,除了处于最靠下位置的画框,其他自然就都是中间状态,也就意味着能够通过代码,自动前进到最终的位置。
- 经过一段时间的代码实践
和bug修复,诶嘿,就跟我预想的一样,成功自动播放所有中间状态画框的动画,并停在最终想要的画框上。让我们直接看看,最终修改的效果吧🌟。 
-
分页流程控制调整:
- 解决了动画的自动播放问题,现在还留着一个刺需要拔除。那就是因为Excalidraw Smart Presentation判断画框的先后顺序,靠的是每个画框的位置坐标。所以在画框数量非常大量的情况下,最终画布会变得非常的细长,且可读性差,无法一眼定位到当前分页的最终画框。所以既然现在每个分页,在画布中都是用一个组表示,那么能不能不通过坐标的方式,直接告诉代码下一个分组的第一个画框位置在哪?
- 那还用说,当然有办法!这可是在用Excalidraw,画关系图岂不是家常便饭!就跟平常使用的方法一样,既然要让两个元素建立关系,那直接用一个箭头把他们连接起来不就好了!诶,就是这么简单的方法,代码只要在解析每个画框数据的时候,顺便检查一下当前画框边缘有没有朝外箭头,如果有就优先使用箭头指向的画框,作为当前画框的前进目标即可。如此一来,咱们的制作版面就变成了,每个分页都是一个分组,在画布中则是单独一列。而不同的分页之间,只要用箭头工具相互连接起来即可。这样一来可读性也就得到了解决,毕竟每列的最后一个画框,必定包含这个分页的全部内容。
- 说了这么多,大伙肯定好奇是个什么样的效果,让我直接看演示动图吧!

- 诶嘿,今天的内容先写到这咯,剩下的修改咱们下次在介绍✌️....
- (未完待续...)