黑客帝国里字符流特效怎样实现?

[tiye]

那天分享了 @MaskRay 微博上 上一条微博, 发现于是安装了 cmatrix 命令 自己屏幕上这回看得仔细了一点, 就想模仿一个, 并且内容用中文替换 至于替换的内容, 我想用 txt 格式的 宋词 , 本来以为长度会比较合适 当天尝试了下, 发现 DOM 操作比较慢, 就放下没做了

下午细看了下, 原来其中的字符本身并不移动, 那 DOM 操作会稍微轻松一些.. 我希望是句子在输出时上下相邻字词如果本来相连, 可以保持; 而且每一条纵向的线上不能限定在同时只有一段数据在跑 我拿刚学会的 OO 的思路去套了, 还没写出来... 有没有人来试试?

[MaskRay]

On 28/12/12 at 10:52pm, 题叶 wrote:

那天分享了 @MaskRay 微博上 上一条微博, 发现于是安装了 cmatrix 命令 自己屏幕上这回看得仔细了一点, 就想模仿一个, 并且内容用中文替换 至于替换的内容, 我想用 txt 格式的 宋词 , 本来以为长度会比较合适 当天尝试了下, 发现 DOM 操作比较慢, 就放下没做了

下午细看了下, 原来其中的字符本身并不移动, 那 DOM 操作会稍微轻松一些.. 我希望是句子在输出时上下相邻字词如果本来相连, 可以保持; 而且每一条纵向的线上不能限定在同时只有一段数据在跑 我拿刚学会的 OO 的思路去套了, 还没写出来... 有没有人来试试?

---

Reply to this email directly or view it on GitHub: https://github.com/coffee-js/languages/issues/38

我想到的 OO 解決方案是：

Drop 表示一列文字，實現 Drop#draw 方法，下一幀它需要算出在屏幕上添加哪一個字符，擦除哪一個字符

使用 aggregator 的模式，不妨令 Rain 爲 Drop 的聚合，實現 Rain#drop，作用是調用所有 Drop 的 #drop 方法 需要性能的話， Rain 還可以實現每一列到 Drop 的映射，確定這一列是否可以新增 Drop

[tiye]

实现了一个版本, 性能不太好, 但勉强难看了 (Chrome).. http://jiyinyiyong.github.com/poet-matrix/page/

@MaskRay 模式到了我这儿全乱套了...

---

代码没写注释, 我把思路在这里理一遍好的

刚开始我打算用一个对象模拟一条线上的动作, 每次获取一段长度的文字, 然后运行 考虑遇到一个问题, 如果是调用方法, 因为同时有几个白色的线头, 一组文字是不够的 而多组文本的话, 对象上不好写, 就算用了数组, 多个数据之前处理会很麻烦 于是我感到对问题的抽象完全不够

再想了一段时间. 发现以每一个线头线尾来考虑思路会比较清晰 白色的线头经过, 就会刷新格子里的文字, 被调整自己和之前一个格子的颜色 而线尾经过, 必然是将文字隐藏 思路很清晰, 那么我按随机的时间在线条顶部间隔发这样的消息, 消息顺着标签逐个传递, 就不用太注意状态的问题

代码里先是 HTML 把格子生成好, 纵向每一条线属于一个线的标签 再用 setTimeout 的回调形成递归, 发送生成信号的消息. 中间一个变量共享明暗的状态 每个消息自身通过 setTimeout 递归调用自己, 直到到达终点为止

我的思路基本上是先找到目标运行的思路, 然后尝试用代码去模拟这种思路 换 OO 的思路先有再去套, 反而不知道从哪里下手 这里每一个行进的点有自己的闭包在维系, 对我而言很有意思 另外闭包和对象之间的关系上我又开始疑心有更底层的思路可以找....