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，然后输入要导出的页的范围。分辨率就不解释了，大家都懂。帧速率这选项的值越低，生成的动画文件越小，但是动画丢帧越严重，看上去不流畅。

总结

动画的确能很大程度的提升阅读的体验，讲稿的观感。但制作动画是一个细致活儿，需要不断去尝试各种组合，并进行调优。至于花费的时间是否值得，要看讲稿的用途以及你是否重视动画带来的观感提升了。