如何制作代码与终端打字动画视频

根据我们对 280,000+ 位用户 制作的 100 万+ 个视频 的研究

作者:Yao Ming, Founder阅读约 4 分钟
简短回答

制作代码打字动画,先准备一段短代码或几行指令,决定是编辑器窗口还是终端画面。让文字以稳定的速度逐字打出,光标在最后闪烁,打完后把重点那一行标亮或放大。最后加上键盘音效和一句说明字卡,就完成了。

这种视频适合谁

程序教学创作者、软件初创公司、做开发者工具的团队都会用到。一段「打出指令、按下 Enter、结果出现」的动画,比截图更能让观众感受到操作有多简单。

整段画面都是动态图形做出来的,不需要真的录屏,所以字永远清楚,也不会出现打错字或通知跳出来的问题。

适合用在哪里

打字动画最常出现在这几种视频里:

  • 程序教学短视频,一条视频只教一个指令或一个小技巧
  • 开发者工具的新功能介绍,展示「打一行就完成」的感觉
  • 产品发布视频中的技术段落,让工程感更强
  • 工程团队的招募和品牌视频,展现团队在做的事

Videotto 的用户遍布 190 个国家,代码是少数全世界都看得懂的语言,配上中文说明字卡,这类视频很容易跨国传播。

决定风格的六件事

元素建议做法
版面一个窗口置中,四周留白,竖版视频字要放大
字体等宽字体,一行不超过 30 个字符
颜色深色底配语法颜色,重点行用一个亮色框起来
动态逐字打出,光标闪烁,打完后镜头轻推到重点行
节奏打字速度稳定,关键指令前停半秒
声音轻柔的键盘声,按下 Enter 时一声确认音

三种常见风格

同一种视频可以有很多种样子,先选一个方向,再写进指令里。

  • 深色编辑器. 最常见的样子,深色底配语法颜色,专业又好读。
  • 复古终端. 黑底绿字加扫描线,适合做成有个性的开场或彩蛋。
  • 浅色演示文稿风. 白底大字,代码只留几行,适合放在发布视频或教学演示文稿里。

一步步做出来

  1. 挑出最短的代码. 只留让观众看懂重点的几行,其他用注释或省略号带过。
  2. 选画面类型. 代码用编辑器窗口,指令用终端画面,两者可以先后出现。
  3. 设置打字速度. 太快看不清,太慢会无聊。重点行可以打慢一点。
  4. 加上结果. 指令打完后显示执行结果,例如「完成」或一个数字,让故事有结尾。
  5. 补一句说明. 在窗口上方或下方加一行中文字卡,说明这段代码在做什么。

贴到 Otto 的指令

贴上你自己的代码或指令。

粘贴到 Otto
制作一条 9:16 竖版的代码打字动画,约 15 秒。
深色编辑器窗口置中,等宽字体,字要大到手机看得清楚。
以下代码一个字一个字打出来,光标在最后闪烁:
[贴上代码]
打完后把第 [3] 行用亮蓝色框起来,镜头轻轻推近。
接着切到终端画面,打出 [执行指令],按下 Enter 后显示「完成」。
加上轻柔的键盘音效,上方放一行简体中文说明:[这段程序在做什么]。

更短的写法

  • 「打字再慢一点,第二行停一下。」
  • 「改成浅色主题。」
  • 「把指令和结果并排放在两个窗口。」
  • 「结尾放上我的产品名称和一句标语。」
  • 「同一段代码做成 16:9 横版,放在 YouTube 教学视频开头。」
  • 「打错一个字再删掉重打,看起来更像真人在操作。」

常见错误

  • 代码太长. 一整个文件塞进画面,手机上只剩一堆小字。只留重点几行。
  • 字太小. 横版画面的字放到竖版就看不见了。竖版视频字要明显放大。
  • 没有重点. 每行都一样亮,观众不知道该看哪里。标出一行就好。
  • 没有结果. 打完就结束,少了「然后呢」。加上执行结果或一句结论。

常见问题

需要录屏吗?

不需要。整段画面都由 Otto 用动态图形做出来,你只要提供代码或指令文字。

代码的颜色会正确吗?

你可以指定语言,请它用常见的语法配色。如果有品牌色,也可以直接说要用哪几个颜色。

可以搭配我的讲解视频吗?

可以。上传你的讲解视频,请 Otto 在你讲到某段程序时插入打字动画。

适合多长?

单一段代码 10 到 20 秒就够,完整教学可以拆成几段,每段一个重点。

代码里的注释可以改成中文吗?

可以。在指令里说明注释用简体中文,代码本身维持原样,观众看得懂又不会出错。

用你自己的视频试试

用 Otto 做你的下一个视频

用一句话告诉 Otto 你想要什么。它会帮你剪辑、加字幕、加上动态效果。