這篇文章主要介紹HTML5 Canvas如何實(shí)現(xiàn)的文字動(dòng)畫(huà)特效，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
文字是網(wǎng)頁(yè)中最基本的元素，一般我們?cè)诰W(wǎng)頁(yè)上都是展示的靜態(tài)文字，但是就效果來(lái)說(shuō)，還是比較枯燥的。文字淡入淡出的動(dòng)畫(huà)效果在項(xiàng)目中非常實(shí)用，如果有某些關(guān)鍵的文字，可以通過(guò)這種動(dòng)態(tài)的效果來(lái)提醒用戶閱讀。
動(dòng)態(tài)效果圖
這個(gè) Demo 是不斷重復(fù)地設(shè)置文字的大小和透明度，這些英文字母也是我自己利用 HT 的矢量繪制的，總的來(lái)說(shuō)效果還是不錯(cuò)的。
代碼實(shí)現(xiàn)代碼總共一百來(lái)行，比較簡(jiǎn)單，前面說(shuō)過(guò)我的英文字母是用矢量繪制的，用矢量繪制圖形的好處非常多，比如圖片縮放不會(huì)失真，這樣在不同的 Retina 顯示屏上我也不需要提供不同尺寸的圖片；還有就是用 JSON 的方式來(lái)描述矢量，格式比較簡(jiǎn)潔等等。
矢量圖片接下來(lái)繪制這些矢量圖片（這里只拿出第一個(gè) H 進(jìn)行說(shuō)明）：
重慶分公司
重慶分公司
{ "width": 10,//設(shè)置矢量的寬
"height": 10,//設(shè)置矢量的高
"comps": [//矢量圖形的組件Array數(shù)組，每個(gè)數(shù)組對(duì)象為一個(gè)獨(dú)立的組件類(lèi)型，數(shù)組的順序?yàn)榻M件繪制先后順序 { "type": "text",//文本類(lèi)型
"text": "H",//文本內(nèi)容
"color": "rgb(69,69,69)",//文本顏色
"align": "center",//文本在矢量中的對(duì)齊方式
"opacity": {//文本透明度
"func": "attr@text.opacity",//設(shè)置業(yè)務(wù)屬性，對(duì)文本進(jìn)行透明度的數(shù)據(jù)綁定
"value": 1//如果func中的值為空或者undefined，那么就直接用這個(gè)值 }, "clipDirection": "bottom",//裁切方向?yàn)椤皬纳系较隆? "rect": [//指定組件繪制在矢量中的矩形邊界
0,//代表左上角坐標(biāo)x
0,//代表左上角坐標(biāo)y
10,//代表組件的width
10//代表組件的height ]
}]
}繪制矢量圖形是通過(guò) JSON 格式來(lái)書(shū)寫(xiě)的，主要的參數(shù)有三個(gè)：width、height 以及 comps。這三個(gè)參數(shù)都必須要寫(xiě)上，其中 width 為矢量圖形的寬度，height 為矢量圖形的高度，comps 里面是一個(gè) Array 數(shù)組，數(shù)組中是一個(gè)個(gè)獨(dú)立的對(duì)象，可以對(duì)這個(gè)對(duì)象設(shè)置一些預(yù)定義參數(shù)，也可設(shè)置一些可選的參數(shù)信息。
這里我將所有的文本信息存儲(chǔ)在一個(gè)數(shù)組中，方便調(diào)用：
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'},
];第一個(gè) label 對(duì)象為矢量圖形的名稱(chēng)，第二個(gè) image 對(duì)象我們?cè)O(shè)置的是 json 格式的圖片，但是實(shí)際上可以為 img、canvas 對(duì)象或圖片 url 或 base64 字符串。
創(chuàng)建節(jié)點(diǎn)對(duì)象
對(duì)象的圖片已經(jīng)生成，接下來(lái)就是創(chuàng)建對(duì)象了，這里英文字母總共 8 個(gè)，那么我們創(chuàng)建 8 個(gè)節(jié)點(diǎn)對(duì)象：
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) {//節(jié)點(diǎn)對(duì)象聲明
var node = new ht.Node();//這個(gè)類(lèi)為 ht 中定義的節(jié)點(diǎn)
node.setSize(0, 0);//設(shè)置節(jié)點(diǎn)大小
if(image) node.setImage(image);//設(shè)置節(jié)點(diǎn)圖片
if(x && y) node.setPosition(x, y);//設(shè)置節(jié)點(diǎn)擺放位置
dm.add(node);//將節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器 datamodel 中
return node;
}關(guān)于上面的 ht.Node 節(jié)點(diǎn)的生成，其實(shí)這個(gè)只是 HT 封裝好的類(lèi)，這個(gè)類(lèi)上面有很多很方便的 API。然后將這個(gè)生成的節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器 dm 中，這個(gè)數(shù)據(jù)容器又是整個(gè)拓?fù)鋱D gv 的數(shù)據(jù)容器。
拓?fù)鋱D生成來(lái)看看如何生成這個(gè)拓?fù)鋱D吧：
dm = new ht.DataModel();//數(shù)據(jù)容器gv = new ht.graph.GraphView(dm);//拓?fù)鋱D 通過(guò) gv.getView() 可獲得這個(gè)拓?fù)鋱D的底層 pgv.addToDOM();//將 gv 添加進(jìn) body 中
實(shí)際上 HT 的原理就是在一個(gè) p 中的 canvas 上繪制圖形，也就是說(shuō)這個(gè) gv 就是一個(gè) canvas。
然后通過(guò) getView 獲取這個(gè) canvas 的底層 p，這樣我們就能將這個(gè) p 添加到 html 頁(yè)面的任何地方了，addToDOM 的定義如下：
addToDOM = function(){
var self = this,
view = self.getView(), //獲取底層p
style = view.style;
document.body.appendChild(view); //將底層p添加到body中
style.left = '0';//因?yàn)?HT 默認(rèn)將組件的position設(shè)置為absolute 所以要設(shè)置位置
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小變化觸發(fā)事件，調(diào)用最外層組件invalidate（即iv）函數(shù)進(jìn)行更新。}現(xiàn)在刷新頁(yè)面，你會(huì)看到一片空白，為什么？因?yàn)榍懊嬖O(shè)置節(jié)點(diǎn)的大小為 0 啊，怎么會(huì)顯示，這個(gè) Demo 的效果就是從無(wú)到有，又從有到無(wú)。那接下來(lái)看看如何“從無(wú)到有”。
文本動(dòng)畫(huà)就像我剛剛說(shuō)過(guò)的，要想讓節(jié)點(diǎn)顯示，肯定是需要設(shè)置節(jié)點(diǎn)的大小為我們?nèi)庋劭梢暤姆秶艜?huì)出現(xiàn)，但是我的目的不僅是從無(wú)到有，也是從小到大，這個(gè)能夠一氣呵成么？感覺(jué)好像代碼內(nèi)容簡(jiǎn)單，但是代碼量卻不小的一個(gè)任務(wù)，我定義了一個(gè)函數(shù)用來(lái)將節(jié)點(diǎn)從無(wú)到有，從小到大：
function setSize(node) {
if(node) {
var s = 80,
size = node.getSize().width;//獲取節(jié)點(diǎn)當(dāng)前的大小中的寬度，因?yàn)槲抑缹捀叨际且粯拥模院?jiǎn)寫(xiě)了
var sw = s - size;
ht.Default.startAnim({//HT 封裝的動(dòng)畫(huà)函數(shù)，內(nèi)容也是 JSON 格式的對(duì)象
duration: 1000,// 動(dòng)畫(huà)周期毫秒數(shù)
easing: function(t) { return t*t },//動(dòng)畫(huà)緩動(dòng)函數(shù)
action: function(v, t) {//action函數(shù)必須提供，實(shí)現(xiàn)動(dòng)畫(huà)過(guò)程中的屬性變化 第一個(gè)參數(shù)v代表通過(guò)easing(t)函數(shù)運(yùn)算后的值，t代表當(dāng)前動(dòng)畫(huà)進(jìn)行的進(jìn)度[0~1]，一般屬性變化根據(jù)v參數(shù)進(jìn)行
node.setSize(//設(shè)置節(jié)點(diǎn)的大小 (有一個(gè)緩動(dòng)的過(guò)程 通過(guò) sw*v 實(shí)現(xiàn)的)
size + sw*v,
size + sw*v
);
}
});
}
}從大到小，從有到無(wú)的過(guò)程也跟上面類(lèi)似，我就不贅述了。
要讓這些字母按照時(shí)間的先后順序出現(xiàn)和消失，肯定需要用到 setTimeout 方法，要想實(shí)現(xiàn)一次的顯示消失是非常容易的，但是我在實(shí)現(xiàn)的過(guò)程掉到了 setTimeout 的一個(gè)陷阱中，只能說(shuō)自己學(xué)藝不精吧。因?yàn)槲覀冃枰o不同的字母設(shè)置不同的出現(xiàn)和消失時(shí)間，一般比較簡(jiǎn)單的方法就是設(shè)置一個(gè)固定的值，然后乘以對(duì)應(yīng)節(jié)點(diǎn)專(zhuān)屬的 index：
function animateIn() {
for(let i = 0; i < arr.length; i++) {
var name = 't' + arr[i];
animateLetterIn(window[name], i);//這個(gè)部分設(shè)置動(dòng)畫(huà)
}
}可是如果我直接在 for 循環(huán)中設(shè)置 setTimeout 的時(shí)間為動(dòng)態(tài)變化的，那么這個(gè)動(dòng)態(tài)變化的值肯定是只取 for 循環(huán)的最后一個(gè)值，所以我將 setTimeout 的方法抽取出來(lái)作為一個(gè)單獨(dú)的函數(shù)：
function animateLetterIn(node, i) {
setTimeout(function() {
setSize(node);
}, i * 200);//這時(shí)候這個(gè) i 取的就是節(jié)點(diǎn)對(duì)應(yīng)的 i 而不是最后一個(gè)值了
if(i === arr.length - 1) {//當(dāng)節(jié)點(diǎn)為最后一個(gè)節(jié)點(diǎn)時(shí)，設(shè)置節(jié)點(diǎn)淡出動(dòng)畫(huà)
setTimeout(function() {
animateOut();//節(jié)點(diǎn)淡出動(dòng)畫(huà)
}, (arr.length + 3) * 200);
}
}節(jié)點(diǎn)淡出動(dòng)畫(huà)也是類(lèi)似的方法，只是需要循環(huán)調(diào)用這些動(dòng)畫(huà)函數(shù)，這樣才能做到無(wú)限循環(huán)字母的大小控制。
以上是HTML5 Canvas如何實(shí)現(xiàn)的文字動(dòng)畫(huà)特效的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！
