蝴蝶效应与 emacs 动画

animate.el 提供了 animate-initialize 这个函数来打散字符串。它接受一个字符串和两个整数作为参数，并返回包括打散字符信息的表。它的第二参数和第三参数分别是字符串首字符的垂直位置和水平位置。字符串中的首字符的最终位置就是 (VPOS,HPOS)，它后面的字符就是 (VPOS, HPOS + 1)，后面依次水平坐标加一。至于它们的初始位置则由随机函数得到，这个位置与窗口的大小有关。

具体的实现代码如下：

(defun animate-initialize (string vpos hpos)
  (let ((characters nil))
    (dotimes (i (length string))
      (setq characters
	    (cons (list (aref string i)
			;; Random starting positions.
			(random (window-height))
			(random (1- (window-width)))
			;; All the chars should end up
			;; on the specified line.
			vpos
			;; The Ith character in the string
			;; needs to end up I positions later.
			(+ hpos i))
		  characters)))
    characters))

可以看到，原字符串中的字符对应于返回值表中的一个表元素，表首元素是字符值，随后的四个元素是初始垂直位置，初始水平位置，最后垂直位置，最后水平位置。举例来说的话，我要将 "hello" 放在第 1 行第 2 列，得到的返回值如下：

(reverse
 (cl-loop
  for a in (animate-initialize "hello" 1 2)
  collect (-let (((a0 a1 a2 a3 a4) a))
	    (format "%c (%s,%s) -> (%s,%s)" a0 a1 a2 a3 a4))))
("h (10,5) -> (1,2)"
 "e (11,46) -> (1,3)"
 "l (7,107) -> (1,4)"
 "l (16,93) -> (1,5)"
 "o (4,56) -> (1,6)")

上面的第一个坐标就是随机生成的初始位置，第二个坐标就是最终位置。在返回值中字符顺序与原字符串是相反的。

既然获得了字符的坐标，那么我们就要把它画出来。这个工作可以通过 animate-place-char 来完成，它接受字符、垂直位置和水平位置三个参数，并把字符放到当前 buffer 对应的位置。

通过随机函数，我们就得到了各字符的起始坐标和终止坐标，接下来就要将字符从初始位置移动到终止位置。移动的方式是多种多样的，animate.el 选择了最简单的方式，即沿直线从一端到另一端。要体现出移动过程的话，就需要在直线上多次绘制字符，直到到达目的地为止。若有两点 \(x1, y1 \) 和 \(x2, y2 \) ，那么我们可以用中间点到初始点的距离与线段长的比来表示它在线段上的为止。若用 \(\alpha \) 表示比例，则有：

\((x, y) = \alpha(x2 - x1, y2 - y1) + (x1, y1) = ((1 - \alpha)x1 + \alpha x2, (1 - \alpha) y1 + \alpha y2) \)

通过以上公式可以算出中间点的位置。 animate-step 接受一个字符位置序列和一个比值，比值就是中间点的比例值，它为 0 则说明在初始点，为 1 则说明在终点，为 0 到 1 之间的值则在线段中。

(defun animate-step (characters fraction)
  (let ((remains (- 1 fraction)))
    (dolist (item characters)
      (let ((vpos (+ (* remains (nth 1 item))
		     (* fraction (nth 3 item))))
	    (hpos (+ (* remains (nth 2 item))
		     (* fraction (nth 4 item)))))
	(animate-place-char (car item) vpos hpos)))))

既然动画是图片序列形成的，那么每张图片之间需要有一个较短的时间间隔，而且还需要确定图片的数量，图片的张数乘以图片之间的时间间隔就是动画的总时长。在 animate.el 中给出了一个 option 来控制从起始点到终点的移动步数，它的默认值是 10。

利用上面的这些函数就足够我们写出从零散字符到通顺字符串的动画效果了，比如这样：

(let ((buf (get-buffer-create "*yy*")))
  (switch-to-buffer buf)
  (erase-buffer)
  (let* ((steps 10)
	 (chars (append (animate-initialize "静夜思" 1 5)
			(animate-initialize "李白" 2 7)
			(animate-initialize "床前明月光" 3 3)
			(animate-initialize "疑是地上霜" 4 3)
			(animate-initialize "举头望明月" 5 3)
			(animate-initialize "低头思故乡" 6 3)))
	 (blanks (mapcar (lambda (x) (cons ?   (cdr x))) chars)))

    (dotimes (i steps)
      (animate-step chars (/ i 1.0 steps))
      (sit-for 0.5)
      (animate-step blanks (/ i 1.0 steps)))
    (animate-step chars 1)))

上面代码的思路非常简单，那就是在 buffer 上逐步打印从起始点到终点的字符，并使用位置相同的空字符擦除先前的字符。但是这样的代码是存在问题的，如果你在你的 emacs 中尝试一下就会发现存在没有被擦除的汉字。这是因为汉字的宽度是 2，它在 buffer 中要占两列，使用英文空格清除会出现问题。即使你把英文空格更改为全角空格 ?\u3000 貌似也会出问题。

animate.el 中的 animate-string 函数巧妙地避免了这个问题，在输出一次后，它通过撤销上一次输出而不是使用空白字符覆盖来达到清屏的目的。由于它的代码稍长，这里只列出撤销动作的实现：

(dotimes (i animate-n-steps)
      ;; Bind buffer-undo-list so it will be unchanged when we are done.
      ;; (We're going to undo all our changes anyway.)
      (let (buffer-undo-list
	    list-to-undo)
       ;;....... do some draw
       (sit-for .05) ;; pause 0.05s
       (setq list-to-undo buffer-undo-list)
	(while list-to-undo
	  (let ((undo-in-progress t))
	    (setq list-to-undo (primitive-undo 1 list-to-undo))))))

上面使用变量 buffer-undo-list 记录下撤销信息，在某次绘制完成后的间隔，通过 undo 命令将绘制的字符全部撤销掉，以此完成清屏。

按照这个思路，我们可以对上面的《静夜思》进行修正：

(let ((buf (get-buffer-create "*yy*")))
  (switch-to-buffer buf)
  (erase-buffer)
  (let* ((steps 10)
	 (chars (append (animate-initialize "静夜思" 1 5)
			(animate-initialize "李白" 2 7)
			(animate-initialize "床前明月光" 3 3)
			(animate-initialize "疑似地上霜" 4 3)
			(animate-initialize "举头望明月" 5 3)
			(animate-initialize "低头思故乡" 6 3))))
    (let (buffer-undo-list
	  list-to-undo)
      (dotimes (i steps)
	(animate-step chars (/ i 1.0 steps))
	(sit-for 0.01)
	(setq list-to-undo buffer-undo-list)
	(while list-to-undo
	  (let ((undo-in-progress t))
	  (setq list-to-undo (primitive-undo 1 list-to-undo))))))
    (animate-step chars 1)))

得到的效果图如下：

除了 animate-string ，还有一个叫做 anmiate-sequence 的函数，它接受一个字符串表和一个表示字符串间空行数的整数，若第二参数为 0，则字符串表中的字符串空行数为 0。它将字符串表中的字符串逐串打印到buffer 中，若 animation-buffer-name 的值为 nil，则默认打印到 *Animation* buffer 中。下面我们使用一个 ascii 艺术作为例子演示 animate-sequence 的使用：

(setq a
      '(
	"[bug]     /\"*._         _"
	"      .-*'`    `*-.._.-'/"
	"    < * ))     ,       ("
	"      `*-._`._(__.--*\"`.\\"
	))
;;https://www.asciiart.eu/animals/fish
(animate-sequence a 0)

本来我想使用 touhou 相关的 ascii 艺术，但是它们大多使用了日语，在 emacs 的显示效果非常奇怪，想想还是算了。

使用 animate-sequence 虽然可以方便地显示多个字符串，但是它内部调用的是 animate-string ，所以它的动画是由每个字符串的单独动画组成的，只有一个字符串的动画完成后才会进行下一个字符串的动画显示。这个函数是没有办法达到我上面的《静夜思》一下子显示所有字符的显示效果的。同时， animate-string 的间隔时间固定是 50 毫秒，它没有办法通过函数参数来变更。针对这两个问题，我们可以通过添加新的高级函数来解决。以下是我编写的几个辅助函数，它们包括：

• 变量 animate-dtime ，控制每幅图像间的时间间隔
• (animate-init* S1 &rest S) ，它接受多个字符信息，并生成包含每个字符的初末位置信息的表，是对 animate-initialize 的强化
• (animate-initn SN VPOS HPOS) ，它接受单个字符串，字符串中间的换行符作为不同字符串的分隔。最后得到串中每个字符的初末位置信息表
• (animate-chars CHARS) ，接受一个字符信息表，生成它们的动画
• (animate-str* LS &optional VPOS HPOS) ，接受多个字符串信息，并使它们同时进行动画
• (animate-strn S VPOS &optional HPOS) ，接受单个字符串，使用 '\n' 来判断字符串是否换行

它们解决的问题是：

• 一次可以显示多行字符串的动画
• 可以对间隔时间进行控制

以下是实现代码：

(defvar animate-dtime 0.05)

(defun animate-init* (s1 &rest s)
  (let ((al (or (and s (cons s1 s))
		(list s1))))
    (apply 'append
	   (cl-mapcar (lambda (x)
			(animate-initialize
			 (car x) (cadr x) (caddr x)))
		      al))))


(defun animate-initn (sn vpos hpos)
  (let ((lsn (split-string sn "\n")))
    (apply 'animate-init*
	   (seq-map-indexed
	    (lambda (el id) (list el (+ id vpos) hpos))
	    lsn))))

(cl-defun animate-chars (chars)
  (let ((show-trailing-whitespace nil)
	(indent-tabs-mode nil))
    (dotimes (i animate-n-steps)
      (let (buffer-undo-list
	    list-to-undo)
	(animate-step chars (/ i 1.0 animate-n-steps))
	(set-window-start nil 1)
	(sit-for animate-dtime)
	(setq list-to-undo buffer-undo-list)
	(while list-to-undo
	  (let ((undo-in-progress t))
	    (setq list-to-undo (primitive-undo 1 list-to-undo))))))
    (animate-step chars 1)
    (end-of-line)
    (sit-for 0)
    (undo-boundary)))

(cl-defun animate-str* (s &optional vpos hpos)
  (switch-to-buffer (get-buffer-create
                     (or animation-buffer-name
                         "*Animation*")))
  (erase-buffer)
  (sit-for 0)
  (animate-chars
   (apply 'animate-init*
	  (mapcar (lambda (x) (list (car x)
				    (+ (cadr x) (or vpos 0))
				    (+ (caddr x) (or hpos 0))))
		  s))))

(defun animate-strn (str vpos &optional hpos)
  (switch-to-buffer (get-buffer-create
		     (or animation-buffer-name
			 "*Animation*")))
  (erase-buffer)
  (sit-for 0)
  (animate-chars
   (animate-initn str vpos (or hpos 0))))

使用这些函数可以更加容易地画出上面的《静夜思》和 bug 鱼：

(animate-strn
 "[bug]     /\"*._         _
      .-*'`    `*-.._.-'/
    < * ))     ,       (
      `*-._`._(__.--*\"`.\\"
 15 20)

(animate-str*
 '(("静夜思" 1 5)
   ("李白" 2 7)
   ("床前明月光" 3 3)
   ("疑是地上霜" 4 3)
   ("举头望明月" 5 3)
   ("低头思故乡" 6 3))
15 20)