前段时间模仿探探的文章收获了不少赞（感谢掘友的鼓励与支持🌹🌹🌹），这里有一份杨村长使用Vue3开发的实战视频教程。请大家用香喷喷的小手来一波三连吧~ www.bilibili.com/video/BV11p…
下面进入正文
Salute to VueMastery
VueMastery是Vue官方推荐的视频课程平台。VueMastery的视频课程讲解非常透彻，PPT也是制作精良，恰当的动画能帮我们更快速的理解视频中的知识点。要用动画把知识点讲清楚，这其中需要花费大量的时间精力去进行原创设计，排版。瑞思拜~
原版视频中的PPT，我用肉眼对照视频，一帧帧的仿制出来了
眼睛快对瞎了👀~朋友们点个赞👍好不好？
大家以后看到什么动画制作精良的技术类PPT，也可以回复到这篇文章的评论里，我来帮大家仿制。顺便问问大家怎么看待仿制PPT这件事，如果大家觉得仿制后再分享有不妥，那我以后就不分享了，请大家在评论区告诉我你的看法。
最终完成了，一共26页，并且已经翻译成了中文，有需要的朋友们前往微信搜索：ezfullstack，关注后回复：reactivity 获取下载链接。
当然一时半会儿也没法教会大家做设计，所以本文主要教大家如何快速的利用Keynote制作代码演示动画，并生成高质量的GIF文件。
动画的执行场景
演示文稿中动画的使用场景分为构件出现，构件消失，动作，页间转场。不同的场景下，可选择的预制动画是不同的。
该
图片来自网络，这些基础的动画效果就不多说了，大家自己去尝试一下
我重点讲讲和代码有关的动画制作技巧
代码出现
咱们做代码类的讲稿，最常用的一种预制动画就是
键盘。这是一种打字机的效果...
花括号展开
我们希望让这个代码的括号可以展开，用于我们后续的动画插入代码块。
步骤稍微有点复杂，但理解后就不难，大家跟我一起来
1. 复制一页一样的内容
复制完成后，大家记得在新页面里去掉动画。缩略图下面没有 “...” 就是没有动画了。
2. 调整行距
注意光标位置，默认的行距是
1.5，我们根据要插入代码的行数调整为1.5的倍数即可。比如插入一行代码，我们就设置为3
3. 神奇移动
完成步骤2之后，我们回到第一页。在空白处点击鼠标，也就是不选择任何元素的状态。
然后进入动画效果，选择 “神奇移动”，神奇移动属于页和页之间的一种转场效果，但它其实就是自动补间动画。
前端开发者是不是非常熟悉这个词呀
应用神奇移动效果后，我们可以看到括号真的神奇的展开了！！
插入代码
大家注意，这里不应该在原来代码所在文本框中去增加内容，一但内容变化，神奇移动就会失效，这是因为
神奇移动是通过内容来判断是否是相同元素，这也是上一步中我们用的是调整行距，而不能直接添加回车的原因。
大家看，这是两个元素
再次应用键盘的预制动画，我们就得到预期的效果了。
导出GIF
通过菜单“导出”，选择动画GIF，然后输入要导出的页的范围。分辨率就不解释了，大家都懂。帧速率这选项的值越低，生成的动画文件越小，但是动画丢帧越严重，看上去不流畅。
总结
动画的确能很大程度的提升阅读的体验，讲稿的观感。但制作动画是一个细致活儿，需要不断去尝试各种组合，并进行调优。至于花费的时间是否值得，要看讲稿的用途以及你是否重视动画带来的观感提升了。
BTW
我曾用Keynote给自己做过一段介绍动画，在此分享一小段内容，和大家共勉！在学会本文的内容后，大家也可以想想看，这是由哪几个动画组合实现的呢？
关注大帅搞全栈
近期文章（感谢掘友的鼓励与支持🌹🌹🌹）
