前言文字是网页中最基本的元素。一般我们在网页上展示静态文字，但是从效果上来说，还是比较乏味的。文字淡入淡出的动画效果在项目中非常实用。如果有一些重点文字，可以使用这种动态效果来提醒用户阅读。动态效果图http://www.hightopo.com/demo/...这个Demo是反复设置文字的大小和透明度。这些英文字母也是我自己用HT向量画出来的。总的来说，效果还是不错的。代码实现代码总共100行左右，比较简单。正如我之前所说，我的英文字母是用矢量绘制的。用矢量图绘制图形有很多好处。比如图片缩放不会失真，这样我就不需要提供不同尺寸的图片；还有一种用JSON描述向量的方式，格式比较简洁等等。矢量图片接下来绘制这些矢量图片（这里只拿出第一个H来说明）：{"width":10,//设置矢量的宽度"height":10,//设置矢量的高度"comps":[//矢量图形组件数组，每个数组对象是一个独立的组件类型，数组的顺序就是组件绘制的顺序{"type":"text",//texttype"text":"H",//文本内容"color":"rgb(69,69,69)",//文本颜色"align":"center",//文本在向量中的对齐方式"opacity":{//texttransparency"func":"attr@text.opacity",//设置业务属性，对texttransparency进行数据绑定"value":1//如果func中的值为空或未定义，则直接使用该值},"clipDirection":"bottom",//裁剪方向为"从上到下""rect":[//指定vector中绘制的组件的矩形边界0,//表示左上角坐标x0,//表示左上角y的坐标10,//表示组件的宽度10//表示组件的高度]}]}绘制矢量图是用json格式写的，主要有三个参数：宽度，高度和补偿。这三个参数是必须要写的，其中width是矢量图的宽度，height是矢量图的高度，comps是一个Array数组，每个数组都是一个独立的对象，可以为这个对象设置一些预定义的参数，还可以设置一些可选的参数信息。这里我把所有的文本信息存储在一个数组中，方便调用：arr=[{label:'H',image:'symbols/H.json'},{label:'T',image:'symbols/T.json'},{label:'f',image:'symbols/f.json'},{label:'o',image:'symbols/o.json'},{label:'r',image:'符号/r.json'},{label:'W',image:'symbols/W.json'},{label:'e',image:'symbols/e.json'},{label:'b',image:'symbols/b.json'},];第一个label对象是矢量图的名称，第二个image对象我们设置的是json格式的图片，但实际上可以是img、canvas对象或者Imageurl或者base64字符串。创建节点对象对象的图像已经生成，接下来就是创建对象了。这里有8个英文字母，所以我们创建8个节点对象：vars=80;arr.forEach(function(obj,index){vartext=obj.label;name='t'+text;window[name]=createNode(obj.image,100+s*index,100);});函数createNode(image,x,y){//节点对象声明varnode=newht.Node();//这个类是ht中定义的节点node.setSize(0,0);//设置节点大小if(image)node.setImage(image);//设置节点图像if(x&&y)node.setPosition(x,y);//设置节点的位置dm.add(node);//添加节点到datacontainerreturnnode;}关于上面的ht.Node节点，其实这只是HT封装的一个类，这个类上有很多方便的API。然后将这个生成的节点添加到数据容器dm中，dm是整个拓扑图gv的数据容器。拓扑图生成下面看看如何生成这个拓扑图：dm=newht.DataModel();//数据容器gv=newht.graph.GraphView(dm);//可以通过gv.getView()获取拓扑图这个拓扑图的底层divgv.addToDOM();//将gv添加到body中。其实HT的原理就是在一个div里面画一个canvas上的图形，也就是说这个gv就是一个canvas。然后通过getView获取画布底层的div，这样我们就可以把这个div添加到html页面的任何地方。addToDOM的定义如下：addToDOM=function(){varself=this,view=self.getView(),//获取底层divstyle=view.style;document.body.appendChild(视图);//将底层div添加到bodystyle.left='0';//因为HT默认将组件的position设置为absolute来设置positionstyle.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);//窗口大小变化触发事件，调用最外层组件的invalidate(即iv)函数更新。现在刷新页面，你会看到一片空白，为什么？因为之前设置了节点大小为0，怎么显示这个demo的效果是从无到有，从无到无。那么让我们看看如何“从头开始”。文字动画就像我刚才说的。如果要显示节点，则必须将节点的大小设置为我们肉眼可以看到的范围。但我的目的不仅仅是从零开始，而是从小到大。这可以一次性完成吗？看似代码内容简单，但是代码量不小。我定义了一个从头开始制作节点的函数，从小到大：functionsetSize(node){if(node){vars=80,size=node.getSize().width;//获取节点当前的宽度size，因为我知道宽和高是一样的，所以我缩短了varsw=s-size;ht.Default.startAnim({//HT封装的动画函数，内容也是JSON格式的对象duration:1000,//动画循环的毫秒数easing:function(t){returnt*t},//animationeasingfunctionaction:function(v,t){//必须提供action函数来实现动画过程中的属性变化，第一个参数v代表easing(t)函数计算出来的值，t代表当前动画的进度[0~1]。一般属性的变化都是根据v参数进行的node.setSize(//设置节点的大小（有一个通过sw*v实现的变慢的过程）size+sw*v,尺寸+sw*v);}});从大到小，从有到无的过程和上面类似，不再赘述。要使这些字母按时间顺序出现和消失，您必须使用setTimeout方法。实现一次显示消失是非常容易的，但是我在实现过程中掉进了setTimeout的陷阱。只能说自己学习不好。因为我们需要为不同的字母设置不同的出现和消失时间，一般比较简单的方法是设置一个固定值，然后乘以对应节点的专用索引：functionanimateIn(){for(leti=0;i
