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

  代码总共一百来行,比较简单,前面说过我的英文字母是用矢量绘制的,用矢量绘制图形的好处非常多,比如图片缩放不会失真,这样在不同的Retina显示屏上我也不需要提供不同尺寸的图片;还有就是用JSON的方式来描述矢量,格式比较简洁等等。
 
  矢量图片
 
  接下来绘制这些矢量图片(这里只拿出第一个H进行说明):
 
  
 
  {"width":10,//设置矢量的宽
 
  "height":10,//设置矢量的高
 
  "comps":[//矢量图形的组件Array数组,每个数组对象为一个独立的组件类型,数组的顺序为组件绘制先后顺序{"type":"text",//文本类型
 
  "text":"H",//文本内容
 
  "color":"rgb(69,69,69)",//文本颜色
 
  "align":"center",//文本在矢量中的对齐方式
 
  "opacity":{//文本透明度
 
  "func":"attr@text.opacity",//设置业务属性,对文本进行透明度的数据绑定
 
  "value":1//如果func中的值为空或者undefined,那么就直接用这个值},"clipDirection":"bottom",//裁切方向为“从上到下”
 
  "rect":[//指定组件绘制在矢量中的矩形边界
 
  0,//代表左上角坐标x
 
  0,//代表左上角坐标y
 
  10,//代表组件的width
 
  10//代表组件的height]
 
  }]
 
  }
 
  绘制矢量图形是通过JSON格式来书写的,主要的参数有三个:width、height以及comps。这三个参数都必须要写上,其中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:'symbols/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对象或图片url或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);
 
  });
 
  functioncreateNode(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);//将节点添加进数据容器datamodel中
 
  returnnode;
 
  }
 
  关于上面的ht.Node节点的生成,其实这个只是HT封装好的类,这个类上面有很多很方便的API。然后将这个生成的节点添加进数据容器dm中,这个数据容器又是整个拓扑图gv的数据容器。
 
  拓扑图生成
 
  来看看如何生成这个拓扑图吧:
 
  dm=newht.DataModel();//数据容器gv=newht.graph.GraphView(dm);//拓扑图通过gv.getView()可获得这个拓扑图的底层pgv.addToDOM();//将gv添加进body中
 
  实际上HT的原理就是在一个p中的canvas上绘制图形,也就是说这个gv就是一个canvas。
 
  然后通过getView获取这个canvas的底层p,这样我们就能将这个p添加到html页面的任何地方了,addToDOM的定义如下:
 
  addToDOM=function(){
 
  varself=this,
 
  view=self.getView(),//获取底层p
 
  style=view.style;
 
  document.body.appendChild(view);//将底层p添加到body中
 
  style.left='0';//因为HT默认将组件的position设置为absolute所以要设置位置
 
  style.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;//获取节点当前的大小中的宽度,因为我知道宽高都是一样的,所以简写了
 
  varsw=s-size;
 
  ht.Default.startAnim({//HT封装的动画函数,内容也是JSON格式的对象
 
  duration:1000,//动画周期毫秒数
 
  easing:function(t){returnt*t},//动画缓动函数
 
  action:function(v,t){//action函数必须提供,实现动画过程中的属性变化第一个参数v代表通过easing(t)函数运算后的值,t代表当前动画进行的进度[0~1],一般属性变化根据v参数进行
 
  node.setSize(//设置节点的大小(有一个缓动的过程通过sw*v实现的)
 
  size+sw*v,
 
  size+sw*v
 
  );
 
  }
 
  });
 
  }
 
  }
 
  从大到小,从有到无的过程也跟上面类似,我就不赘述了。
 
  要让这些字母按照时间的先后顺序出现和消失,肯定需要用到setTimeout方法,要想实现一次的显示消失是非常容易的,但是我在实现的过程掉到了setTimeout的一个陷阱中,只能说自己学艺不精吧。因为我们需要给不同的字母设置不同的出现和消失时间,一般比较简单的方法就是设置一个固定的值,然后乘以对应节点专属的index:
 
  functionanimateIn(){
 
  for(leti=0;i<arr.length;i++){
 
  varname='t'+arr[i];
 
  animateLetterIn(window[name],i);//这个部分设置动画
 
  }
 
  }
 
  可是如果我直接在for循环中设置setTimeout的时间为动态变化的,那么这个动态变化的值肯定是只取for循环的最后一个值,所以我将setTimeout的方法抽取出来作为一个单独的函数:
 
  functionanimateLetterIn(node,i){
 
  setTimeout(function(){
 
  setSize(node);
 
  },i*200);//这时候这个i取的就是节点对应的i而不是最后一个值了
 
  if(i===arr.length-1){//当节点为最后一个节点时,设置节点淡出动画
 
  setTimeout(function(){
 
  animateOut();//节点淡出动画
 
  },(arr.length+3)*200);
 
  }
 
  }
 
  



本文转载自中文网



 

推荐阅读