HTML5中怎么用Canvas實現文字動畫特效

本篇內容介紹了“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);

　　}

　　}

“HTML5中怎么用Canvas實現文字動畫特效”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！