代码雨教程简单代码;代码雨怎么编写 收藏 0

《黑客帝国》中炫酷的代码雨特效，用PPT也能做

当年的《黑客帝国》系列电影中有一幕非常吸引人眼球，那就是众所周知的“代码雨”效果。甚至于这种效果风靡设计圈，有很多大神在用Photoshop、AfterEffects、Illustrator等软件复刻。

据说当年拍摄制作这一系列电影时，虽然那时的电脑CG技术不如现在，但也花费了大量的金钱、人力和时间成本，整体拍摄成本达到了6000万美金。

今天的内容是我们外网教程的第3篇，我们来看看不用那么高的人力和技术成本，仅用PPT，如何制作当年《黑客帝国》中炫酷的代码雨效果。

老规矩，看一下用PPT复刻出来的效果图：

OK，下面开始我们的复刻过程。过程的最后，有该效果实现的原理说明。

1、将幻灯片页面背景填充为黑色：

2、页面中插入文本框，输入相关字符，字符颜色为白色。我插入的是横排文本框，在每个字符后按回车使之变为细长条的矩形。这里很多字符不是用键盘能够输入的，我是用“插入”标签页中的“符号”按钮，选择对应字体后，插入的这些字符。

3、字符输入之后，对齐，如下图红框：

4、用OK插件的“全屏矩形”插入一个矩形，并将其放置在刚插入的文本框下方：

5、先选中插入的全屏矩形，再点击文本框，选择布尔运算中的“剪除”，将全屏矩形中间镂空。此镂空的全屏矩形可以在“选择”面板中（Alt+F10调出）命名为“code”。

6、镂空之后，由于背景色我们设置为了黑色，所以现在镂空的文字看上去是黑色的：

如果我们把背景色改为白色，则这些镂空文字看上去就是白色的：

7、页面中间插入一个新的矩形，宽度略大于镂空文字的宽度，并设置为比较亮的绿色，在“选择”面板中命名为“green”：

再把此矩形放置在全屏矩形下方（请注意两张图红框中上下位置的变化）：

8、将此细长的矩形按下图做渐变填充：

左侧第一个渐变光圈：位置0%，亮绿色，透明度100%；

中间第二个渐变光圈：位置85%，亮绿色，透明度不变；

右侧第三个渐变光圈：位置100%，白色，透明度不变。

9、选中镂空的全屏矩形，填充改为黑色：

10、调节细长矩形的位置，将其上端和全屏矩形下端重合，并设置居中：

11，为细长矩形添加“飞入”动画，按下图设置参数：

12、上述的步骤结束，我们其中一个动画效果就制作完毕了。但源效果有很多字符在滚动，所以我们需要多设置几次。

多插入几个竖直的文本框，输入好文字，文本框位置要有所变动，不要全部对齐：

13、和刚才同样的方式，把新插入的文本框和全屏矩形进行布尔运算，使全屏矩形出现更多的镂空。同时把亮绿色矩形多复制几次（为方便理解，我把全屏矩形调为白色）：

14、此时复制好的亮绿色矩形的动画是同时开始的，为了更好的效果，应该让它们开始的时间有一定延迟，所以在动画面板中调节它们的延迟：

这样设置好之后，播放页面，就会出现本文开头的那种效果了。

OK，整体步骤就是这些啦，下面解释下它的逻辑，请看下图：

本效果有上述三层构成：

最上层是黑色的镂空文字层，中间是亮绿色矩形层，底层是黑色的背景层。

本动画中唯一运动的元素是中间的亮绿色矩形，最上层的镂空文字层不动。亮绿色矩形经过上面镂空字符时，就表现出对应的颜色（绿或白）。经过某个字符后，镂空字符会显出最下面背景层的颜色。但由于背景层同样是黑色，所以看上去就好像消失了一样。而效果中字符会显出白色，就来源于亮绿色矩形下端的白色区域。

该动画的原理就是这样啦。

这个效果和之前的效果一样，看着很复杂，操作居然要有十好几步，但实际上都是很简单的单步操作。这种动画如果说“难”，可能就难在对单步操作的综合性运用上。

好啦，整个动画的设置步骤和原理逻辑就是这些了，大家都“学废”了吗？

还和之前一样，我准备好了源文件，请大家按下述步骤get：

END

————壹分钟了解@斜杠前线————

Far more than PPT， 始于PPT，不止于Power Point，我是斜杠前线。

如果喜欢我的文章，记得关注我哟，一个有知识、有情趣、不会让你失望的头条干货主讲人~

不懂编程？不会写代码？也能制作《黑客帝国》风格的网页数字雨

如果你曾看过电影《黑客帝国》，你一定对其中的“数字雨”效果印象深刻：大量绿色的字符在屏幕上从上而下地快速下落，仿佛进入了一个数字化的世界。

数字雨效果

数字雨效果

今天，我们将学习如何在网页中使用 JavaScript 和 HTML5 <canvas> 元素实现类似的数字雨效果。即便你是编程一无所知的小白，也能通过这篇教程轻松掌握。

鼠标右键新建文本文档

重命名新建的文档为 \”数字雨.html \”

鼠标右键选择在记事本中编辑

记事本中编辑

复制以下代码在\”数字雨.html\”文件中保存，重新打开就能看到数字雨的效果了

下面是具体代码解析~ 不感兴趣的朋友到此可以结束了 !

首先，我们需要在HTML中创建一个<canvas>元素。这个<canvas>将是我们绘制数字雨效果的地方。

在这个HTML文件中，我们创建了一个 <canvas> 元素，指定了 id=\”myCanvas\”，同时为页面设置了背景为黑色，隐藏溢出内容，确保画布能够覆盖整个页面。

接下来，我们需要用 JavaScript 来编写动画效果。将以下代码放入 script.js 文件中：

让我们一步步解析上面的 JavaScript 代码，帮助你理解数字雨是如何实现的。

• 首先，我们通过 getElementById(\”myCanvas\”) 获取到 <canvas> 元素，并设置其宽度和高度为屏幕的可用宽度和高度（screen.availWidth 和 screen.availHeight）。这样，画布会覆盖整个屏幕。
• getContext(\”2d\”) 用于获取 2d 绘图上下文对象，它提供了绘制各种图形和文本的能力。

• arr 数组用于存储每一列字符的当前Y坐标，初始时每列都从 0 开始。数组的长度是屏幕宽度除以10，表示每列的初始位置。
• str 是一个字符集，包括大写字母和数字。我们将从这个字符集中随机选择字符来显示。

• ctx.fillStyle = \”rgba(0,0,0,0.05)\” 设置了背景色的透明度，让上一帧的内容逐渐淡出，产生了流畅的数字雨效果。
• ctx.fillText() 用于绘制文本。每一列字符会根据随机选择的字符从 str 中显示出来。index * 10 确定了每列字符的位置，value + 10 控制了字符在Y轴上的下落位置。
• arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10; 这一行代码判断每列字符是否已经超出画布的底部。如果是，则将该列字符重置为顶部（Y坐标为0），否则字符继续下落。

• setInterval(rain, 30) 每隔 30 毫秒调用一次 rain() 函数，创建出连续不断的下落效果。

运行这段代码后，你会看到浏览器中呈现出类似《黑客帝国》中的数字雨效果，绿色的字符在屏幕上不断下落，产生出一种动态的、视觉冲击力十足的效果。

• 改变字符样式：你可以修改 fillStyle 来更改字符的颜色，例如 ctx.fillStyle = \”#00ff00\”。
• 控制字符速度：通过调整 value + 10 和 setInterval(rain, 30) 的值，你可以控制字符下落的速度。
• 增加字符集：你可以修改 str 数组，添加更多的字符或者其他符号，使得数字雨效果更加丰富。

虽然这只是一个简单的动画效果，但它向你展示了如何利用 canvas 的绘图功能和 JavaScript 的定时器实现流畅的动态效果。

欢迎在评论区留言！

装作黑客高手第一步：制作代码雨

看过《黑客帝国》的朋友应该都会留意到那些自行运作的绿色数字，给人神秘感觉的同时，也让人深陷于网络世界。

想要自己制作代码雨，假装自己是一名黑客，成为基努里维斯，那我来告诉你们，一切怎么开始。

首先，我们要在桌面新建一个文本文档，并修改文件后缀为bat。

接着，鼠标右键点击刚刚新建的文本文档，然后选择编辑，在打开的窗口中输入图示代码

这里也给懒得打字的朋友具体的代码复制粘贴。

@echooff

color02

:start

echo%random% %random% %random% %rangom% %random% %random% %rangom%%random% %random% %rangom%

gotostart

最后我们关闭窗口，保存好文件。再重新打开文本文档，这时候我们就可以发现，新打开的窗口是一个会自动无限循环的绿色数字窗口。

当我们离开座位的时候，“不小心”打开运行这个文件，瞬间拉满。回到座位时，好好享受同事们崇拜的眼光吧。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com