文字是網頁中最基本的元素，一般我們在網頁上都是展示的靜態文字，但是就效果來說，還是比較枯燥的。文字淡入淡出的動畫效果在項目中非常實用，如果有某些關鍵的文字，可以通過這種動態的效果來提醒用戶閱讀。

這個 Demo 是不斷重復地設置文字的大小和透明度，這些英文字母也是我自己利用 HT 的矢量繪制的，總的來說效果還是不錯的。

代碼總共一百來行，比較簡單，前面說過我的英文字母是用矢量繪制的，用矢量繪制圖形的好處非常多，比如圖片縮放不會失真，這樣在不同的 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 ,//設置業務屬性，對文本進行透明度的數據綁定 html' target='_blank'>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 個節點對象：

var s = 80;
arr.forEach(function(obj, index) {
var text = obj.label;
name = t + text;
window[name] = createNode(obj.image, 100+s*index, 100);
});

function createNode(image, x, y) {//節點對象聲明 var node = new ht.Node();//這個類為 ht 中定義的節點 node.setSize(0, 0);//設置節點大小 if(image) node.setImage(image);//設置節點圖片 if(x y) node.setPosition(x, y);//設置節點擺放位置 dm.add(node);//將節點添加進數據容器 datamodel 中 return node;}

關于上面的 ht.Node 節點的生成，其實這個只是 HT 封裝好的類，這個類上面有很多很方便的 API。然后將這個生成的節點添加進數據容器 dm 中，這個數據容器又是整個拓撲圖 gv 的數據容器。

來看看如何生成這個拓撲圖吧：

dm = new ht.DataModel();//數據容器gv = new ht.graph.GraphView(dm);//拓撲圖 通過 gv.getView() 可獲得這個拓撲圖的底層 pgv.addToDOM();//將 gv 添加進 body 中

實際上 HT 的原理就是在一個 p 中的 canvas 上繪制圖形，也就是說這個 gv 就是一個 canvas。

然后通過 getView 獲取這個 canvas 的底層 p，這樣我們就能將這個 p 添加到 html 頁面的任何地方了，addToDOM 的定義如下：

addToDOM = function(){  var self = 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 的效果就是從無到有，又從有到無。那接下來看看如何“從無到有”。

就像我剛剛說過的，要想讓節點顯示，肯定是需要設置節點的大小為我們肉眼可視的范圍才會出現，但是我的目的不僅是從無到有，也是從小到大，這個能夠一氣呵成么？感覺好像代碼內容簡單，但是代碼量卻不小的一個任務，我定義了一個函數用來將節點從無到有，從小到大：

function setSize(node) { if(node) { var s = 80, size = node.getSize().width;//獲取節點當前的大小中的寬度，因為我知道寬高都是一樣的，所以簡寫了 var sw = s - size; ht.Default.startAnim({//HT 封裝的動畫函數，內容也是 JSON 格式的對象 duration: 1000,// 動畫周期毫秒數 easing: function(t) { return t*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：

function animateIn() { for(let i = 0; i arr.length; i++) { var name = t + arr[i]; animateLetterIn(window[name], i);//這個部分設置動畫}

可是如果我直接在 for 循環中設置 setTimeout 的時間為動態變化的，那么這個動態變化的值肯定是只取 for 循環的最后一個值，所以我將 setTimeout 的方法抽取出來作為一個單獨的函數：

function animateLetterIn(node, i) { setTimeout(function() { setSize(node); }, i * 200);//這時候這個 i 取的就是節點對應的 i 而不是最后一個值了 if(i === arr.length - 1) {//當節點為最后一個節點時，設置節點淡出動畫 setTimeout(function() { animateOut();//節點淡出動畫 }, (arr.length + 3) * 200);}

節點淡出動畫也是類似的方法，只是需要循環調用這些動畫函數，這樣才能做到無限循環字母的大小控制。

相關推薦：

實例詳解HTML如何實現文件間自由切換

以上就是基于 HTML5 Canvas 實現的文字動畫特效的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。