关于我用Excalidraw制做手绘风ppt记录（四）

前景提要：

• 书接上回，因为没事想给自己整个活，所以打算用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，画关系图岂不是家常便饭！就跟平常使用的方法一样，既然要让两个元素建立关系，那直接用一个箭头把他们连接起来不就好了！诶，就是这么简单的方法，代码只要在解析每个画框数据的时候，顺便检查一下当前画框边缘有没有朝外箭头，如果有就优先使用箭头指向的画框，作为当前画框的前进目标即可。如此一来，咱们的制作版面就变成了，每个分页都是一个分组，在画布中则是单独一列。而不同的分页之间，只要用箭头工具相互连接起来即可。这样一来可读性也就得到了解决，毕竟每列的最后一个画框，必定包含这个分页的全部内容。
  • 说了这么多，大伙肯定好奇是个什么样的效果，让我直接看演示动图吧！
  • 
  • 诶嘿，今天的内容先写到这咯，剩下的修改咱们下次在介绍✌️....
  • （未完待续...）