基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素，一般我们在网页上都是展示的静态文字，但是就效果来说，还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用，如果有某些关键的文字，可以通过这种动态的效果来提醒用户阅读。代码总共一百来行，比较简单，前面说过我的英文字母是用矢量绘制的，用矢量绘制图形的好处非常多，比如图片缩放不会失真，这样在不同的 Retina 显示屏上我也不需要提供不同尺寸的图片；还有就是用 JSON 的方式来描述矢量，格式比较简洁等等。接下来绘制这些矢量图片：

绘制矢量图形是通过 JSON 格式来书写的，主要的参数有三个：width、height 以及 comps。这三个参数都必须要写上，其中 width 为矢量图形的宽度，height 为矢量图形的高度，comps 里面是一个 Array 数组，数组中是一个个独立的对象，可以对这个对象设置一些预定义参数，也可设置一些可选的参数信息。这里我将所有的文本信息存储在一个数组中，方便调用：

第一个 label 对象为矢量图形的名称，第二个 image 对象我们设置的是 json 格式的图片，但是实际上可以为 img、canvas 对象或图片 url 或 base64 字符串。

创建节点对象的图片已经生成，接下来就是创建对象了，这里英文字母总共 8 个，那么我们创建 8 个节点对象：

关于上面的 ht.Node 节点的生成，其实这个只是 HT 封装好的类，这个类上面有很多很方便的 API。然后将这个生成的节点添加进数据容器 dm 中，这个数据容器又是整个拓扑图 gv 的数据容器。

拓扑图生成实际上 HT 的原理就是在一个 div 中的 canvas 上绘制图形，也就是说这个 gv 就是一个 canvas。然后通过 getView 获取这个 canvas 的底层 div，这样我们就能将这个 div 添加到 html 页面的任何地方了，addToDOM 的定义如下：

要想让节点显示，肯定是需要设置节点的大小为我们肉眼可视的范围才会出现，但是我的目的不仅是从无到有，也是从小到大，这个能够一气呵成么？感觉好像代码内容简单，但是代码量却不小的一个任务，我定义了一个函数用来将节点从无到有，从小到大：

现在我们需要给不同的字母设置不同的出现和消失时间，一般比较简单的方法就是设置一个固定的值，然后乘以对应节点专属的 index：

可是如果我直接在 for 循环中设置 setTimeout 的时间为动态变化的，那么这个动态变化的值肯定是只取 for 循环的最后一个值，所以我将 setTimeout 的方法抽取出来作为一个单独的函数：

节点淡出动画也是类似的方法，只是需要循环调用这些动画函数，这样才能做到无限循环字母的大小控制。