如何用 Python 开发一个类似何同学的文档动画 ?

先看看效果:

点击后滑动一波!

昨天小帅b看到b站的何同学整了个文档动画,他说里面的每个字符都是他一个一个敲的,真~够闲的。
我寻思这玩意用 Python 实现应该来得更爽一些,然后就简单写了个类似的,就刚刚你在头条看到的那玩意。
怎么实现的呢?
其实实现起来也不难,我主要用到了 str 的 format 方法。
首先定义一下你要显示字符:

这文档动画,怎么用 Python 实现的?

为了让它显示颜色,我把等会生成的字符拼接成了 HTML ,这样可以使用 color 标签来定义字体的颜色,先定义一下简单的 HTML,在 body 里面定义一下字体大小和 pre 来保留原有的格式,这样才不会把我们的空格给吞了:

这文档动画,怎么用 Python 实现的?

因为颜色的值是由 6 位 16 进制的数组成的,可以定义一个列表,然后通过 random 来获取随机颜色的值:

这文档动画,怎么用 Python 实现的?

这文档动画,怎么用 Python 实现的?

接着定义几个变量,等会来修改字符之间的间隙:

这文档动画,怎么用 Python 实现的?


接着循环了 1000 行
在 0–50 和 570–600 的区间直接拼接原始字符串:

这文档动画,怎么用 Python 实现的?

在 50-120/190-260/330-400 的区间主要是让它居中对其,而宽度的改变是每次都随着循环而 +1:

这文档动画,怎么用 Python 实现的?

在 120-190/260-330/400-470 的区间让它回来,spcing-=1 做反向操作,这样就能形成 “蛇皮走位” 了哈哈哈:

这文档动画,怎么用 Python 实现的?

接着我在 470-570 的区间让它的“腿”张开(坏笑),这里需要拆分一下字符串,一个向中间对齐,一个向左对齐,这里用了 right 和 left 来控制它们的间隙:

这文档动画,怎么用 Python 实现的?

在 520-570 的区间反向操作,完事了,就快把腿给我合上:

这文档动画,怎么用 Python 实现的?

最后想让它形成 “下雨” 的效果,可以使用 zip 将方向和 value 中的每个 char 结合起来,然后使用随机函数来控制 width:

这文档动画,怎么用 Python 实现的?

把所有字符串都拼接好之后,写入到 HTML 文件中:

这文档动画,怎么用 Python 实现的?

运行之后就生成了一个 HTML:

这文档动画,怎么用 Python 实现的?

用浏览器打开,酸爽!
我们下回见,Peace!

这文档动画,怎么用 Python 实现的?

扫一扫

学习 Python 没烦恼


这文档动画,怎么用 Python 实现的?

原文始发于微信公众号(学习python的正确姿势):这文档动画,怎么用 Python 实现的?

发表回复