基于 HTML5 Canvas 實現(xiàn)的文字動畫特效

1、基于 html5 canvas 實現(xiàn)的文字動畫特效代碼總共一百來行，比較容易，前面說過我的英文字母是用矢量繪制的，用矢量繪制圖形的益處十分多，比片縮放不會失真，這樣在不同的retina顯示屏上我也不需要提供不同尺寸的；還有就是用json的方式來描述矢量，格式比較簡潔等等。矢量接下來繪制這些矢量（這里只拿出第一個h舉行解釋）："width":10,/設(shè)置矢量的寬"height":10,/設(shè)置矢量的高"comps":/矢量圖形的組件array數(shù)組，每個數(shù)組對象為一個自立的組件類型，數(shù)組的挨次

2、為組件繪制先后挨次"type":"text",/文本類型"text":"h",/文本內(nèi)容"color":"rgb(69,69,69)",/文本色彩"align":"center",/文本在矢量中的對齊方式"opacity":/文本透亮度"func&q

3、uot;:"attrtext.opacity",/設(shè)置業(yè)務(wù)屬性，對文本舉行透亮度的數(shù)據(jù)綁定"value":1/假如func中的值為空或者undefined，那么就挺直用這個值,"clipdirection":"bottom",/裁切方向為從上到下"rect":/指定組件繪制在矢量中的矩形邊界0,/代表左上角坐標(biāo)x0,/代表左上角坐標(biāo)y10,/代表組件的width10/代表組件的height繪制矢量圖形是通過json格

4、式來書寫的，主要的參數(shù)有三個：width、height以及comps。這三個參數(shù)都必需要寫上，其中width為矢量圖形的寬度，height為矢量圖形的高度，comps里面是一個array數(shù)組，數(shù)組中是一個個自立的對象，可以對這個對象設(shè)置一些預(yù)定義參數(shù)，也可設(shè)置一些可選的參數(shù)信息。這里我將全部的文本信息存儲在一個數(shù)組中，便利調(diào)用：arr=label:&39;h&39;,image:&39;symbols/h.json&39;,label:&39;t&39;,image:&39;symbols/t.json&39;,label:&am

5、p;39;f&39;,image:&39;symbols/f.json&39;,label:&39;o&39;,image:&39;symbols/o.json&39;,label:&39;r&39;,image:&39;symbols/r.json&39;,label:&39;w&39;,image:&39;symbols/w.json&39;,label:&39;e&39;,image:&39;symbols/e.json&39;,labe

6、l:&39;b&39;,image:&39;symbols/b.json&39;,;第一個label對象為矢量圖形的名稱，其次個image對象我們設(shè)置的是json格式的，但是事實上可以為img、canvas對象或url或base64字符串。創(chuàng)建節(jié)點對象對象的已經(jīng)生成，接下來就是創(chuàng)建對象了，這里英文字母總共8個，那么我們創(chuàng)建8個節(jié)點對象：vars=80;arr.foreach(function(obj,index)vartext=obj.label;name=&39;t&39;+text;windowname=createnode(obj.imag

7、e,100+s*index,100););functioncreatenode(image,x,y)/節(jié)點對象聲明varnode=newht.node();/這個類為ht中定義的節(jié)點node.setsize(0,0);/設(shè)置節(jié)點大小if(image)node.setimage(image);/設(shè)置節(jié)點if(x&&y)node.setposition(x,y);/設(shè)置節(jié)點擺放位置dm.add(node);/將節(jié)點添加進(jìn)數(shù)據(jù)容器datamodel中returnnode;關(guān)于上面的ht.node節(jié)點的生成，其實這個只是ht封裝好的類，這個類上面有無數(shù)很便利的api。然

8、后將這個生成的節(jié)點添加進(jìn)數(shù)據(jù)容器dm中，這個數(shù)據(jù)容器又是囫圇拓?fù)鋱Dgv的數(shù)據(jù)容器。拓?fù)鋱D生成來看看如何生成這個拓?fù)鋱D吧：dm=newht.datamodel();/數(shù)據(jù)容器gv=newht.graph.graphview(dm);/拓?fù)鋱D通過gv.getview()可獲得這個拓?fù)鋱D的底層pgv.addtodom();/將gv添加進(jìn)body中事實上ht的原理就是在一個p中的canvas上繪制圖形，也就是說這個gv就是一個canvas。然后通過getview獵取這個canvas的底層p，這樣我們就能將這個p添加到html頁面的任何地方了，addtodom的定義如下：addtodom=functio

9、n()varself=this,view=self.getview(),/獵取底層pstyle=view.style;document.body.appendchild(view);/將底層p添加到body中style.left=&39;0&39;/由于ht默認(rèn)將組件的position設(shè)置為absolute所以要設(shè)置位置style.right=&39;0&39;style.top=&39;0&39;style.bottom=&39;0&39;window.addeventlistener(&39;resize&39

10、;,function()self.iv();,false);/窗口大小變幻觸發(fā)大事，調(diào)用最外層組件invalidate（即iv）函數(shù)舉行更新?，F(xiàn)在刷新頁面，你會看到一片空白，為什么？由于前面設(shè)置節(jié)點的大小為0啊，怎么會顯示，這個demo的效果就是從無到有，又從有到無。那接下來看看如何從無到有。文本動畫就像我剛剛說過的，要想讓節(jié)點顯示，絕對是需要設(shè)置節(jié)點的大小為我們?nèi)庋劭梢暤姆秶艜‖F(xiàn)，但是我的目的不僅是從無到有，也是從小到大，這個能夠一揮而就么？感覺好似代碼內(nèi)容容易，但是代碼量卻不小的一個任務(wù)，我定義了一個函數(shù)用來將節(jié)點從無到有，從小到大：functionsetsize(node)if(no

11、de)vars=80,size=node.getsize().width;/獵取節(jié)點當(dāng)前的大小中的寬度，由于我知道寬高都是一樣的，所以簡寫了varsw=s-size;ht.default.startanim(/ht封裝的動畫函數(shù)，內(nèi)容也是json格式的對象duration:1000,/動畫周期毫秒數(shù)easing:function(t)returnt*t,/動畫緩動函數(shù)action:function(v,t)/action函數(shù)必需提供，實現(xiàn)動畫過程中的屬性變幻第一個參數(shù)v代表通過easing(t)函數(shù)運算后的值，t代表當(dāng)前動畫舉行的進(jìn)度01，普通屬性變幻按照v參數(shù)舉行node.setsize(/

12、設(shè)置節(jié)點的大小(有一個緩動的過程通過sw*v實現(xiàn)的)size+sw*v,size+sw*v););從大到小，從有到無的過程也跟上面類似，我就不贅述了。要讓這些字母根據(jù)時光的先后挨次浮現(xiàn)和消逝，絕對需要用到settimeout辦法，要想實現(xiàn)一次的顯示消逝是十分簡單的，但是我在實現(xiàn)的過程掉到了settimeout的一個陷阱中，只能說自己學(xué)藝不精吧。由于我們需要給不同的字母設(shè)置不同的浮現(xiàn)和消逝時光，普通比較容易的辦法就是設(shè)置一個固定的值，然后乘以對應(yīng)節(jié)點專屬的index：functionanimatein()for(leti=0;i<arr.length;i+)varname=&39;t&39;+arri;animateletterin(windowname,i);/這個部分設(shè)置動畫可是假如我挺直在for循環(huán)中設(shè)置settimeout的時光為動態(tài)變幻的，那么這個動態(tài)變幻的值絕對是只取for循環(huán)的最后一個值，所以我將settimeout的辦法抽取出來作為一個單獨的函數(shù)：functionanimateletterin(n