揭秘Vue3官方教材动画制作过程,一文教会大家做代码演示GIF!

·  阅读 4845
揭秘Vue3官方教材动画制作过程,一文教会大家做代码演示GIF!

前段时间模仿探探的文章收获了不少赞(感谢掘友的鼓励与支持🌹🌹🌹),这里有一份杨村长使用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给自己做过一段介绍动画,在此分享一小段内容,和大家共勉!在学会本文的内容后,大家也可以想想看,这是由哪几个动画组合实现的呢?


关注大帅搞全栈

近期文章(感谢掘友的鼓励与支持🌹🌹🌹)

分类:
前端
标签:
分类:
前端
标签: