這篇文章主要介紹HTML5 Canvas如何實(shí)現(xiàn)的文字動畫特效，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比尼金平網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式尼金平網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋尼金平地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

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

動態(tài)效果圖

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

代碼實(shí)現(xiàn)

代碼總共一百來行，比較簡單，前面說過我的英文字母是用矢量繪制的，用矢量繪制圖形的好處非常多，比如圖片縮放不會失真，這樣在不同的 Retina 顯示屏上我也不需要提供不同尺寸的圖片；還有就是用 JSON 的方式來描述矢量，格式比較簡潔等等。

矢量圖片

接下來繪制這些矢量圖片（這里只拿出第一個 H 進(jìn)行說明）：

{    "width": 10,//設(shè)置矢量的寬
    "height": 10,//設(shè)置矢量的高
    "comps": [//矢量圖形的組件Array數(shù)組，每個數(shù)組對象為一個獨(dú)立的組件類型，數(shù)組的順序?yàn)榻M件繪制先后順序    {        "type": "text",//文本類型
        "text": "H",//文本內(nèi)容
        "color": "rgb(69,69,69)",//文本顏色
        "align": "center",//文本在矢量中的對齊方式
        "opacity": {//文本透明度
            "func": "attr@text.opacity",//設(shè)置業(yè)務(wù)屬性，對文本進(jìn)行透明度的數(shù)據(jù)綁定
            "value": 1//如果func中的值為空或者undefined，那么就直接用這個值        },        "clipDirection": "bottom",//裁切方向?yàn)椤皬纳系较隆?
        "rect": [//指定組件繪制在矢量中的矩形邊界
            0,//代表左上角坐標(biāo)x
            0,//代表左上角坐標(biāo)y
            10,//代表組件的width
            10//代表組件的height        ]
    }]
}

繪制矢量圖形是通過 JSON 格式來書寫的，主要的參數(shù)有三個：width、height 以及 comps。這三個參數(shù)都必須要寫上，其中 width 為矢量圖形的寬度，height 為矢量圖形的高度，comps 里面是一個 Array 數(shù)組，數(shù)組中是一個個獨(dú)立的對象，可以對這個對象設(shè)置一些預(yù)定義參數(shù)，也可設(shè)置一些可選的參數(shù)信息。

這里我將所有的文本信息存儲在一個數(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'},
];

第一個 label 對象為矢量圖形的名稱，第二個 image 對象我們設(shè)置的是 json 格式的圖片，但是實(shí)際上可以為 img、canvas 對象或圖片 url 或 base64 字符串。

創(chuàng)建節(jié)點(diǎn)對象

對象的圖片已經(jīng)生成，接下來就是創(chuàng)建對象了，這里英文字母總共 8 個，那么我們創(chuàng)建 8 個節(jié)點(diǎn)對象：

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)對象聲明
    var node = new ht.Node();//這個類為 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í)這個只是 HT 封裝好的類，這個類上面有很多很方便的 API。然后將這個生成的節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器 dm 中，這個數(shù)據(jù)容器又是整個拓?fù)鋱D gv 的數(shù)據(jù)容器。

拓?fù)鋱D生成

來看看如何生成這個拓?fù)鋱D吧：

dm = new ht.DataModel();//數(shù)據(jù)容器gv = new ht.graph.GraphView(dm);//拓?fù)鋱D 通過 gv.getView() 可獲得這個拓?fù)鋱D的底層 pgv.addToDOM();//將 gv 添加進(jìn) body 中

實(shí)際上 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';//因?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àn)榍懊嬖O(shè)置節(jié)點(diǎn)的大小為 0 啊，怎么會顯示，這個 Demo 的效果就是從無到有，又從有到無。那接下來看看如何“從無到有”。

文本動畫

就像我剛剛說過的，要想讓節(jié)點(diǎn)顯示，肯定是需要設(shè)置節(jié)點(diǎn)的大小為我們?nèi)庋劭梢暤姆秶艜霈F(xiàn)，但是我的目的不僅是從無到有，也是從小到大，這個能夠一氣呵成么？感覺好像代碼內(nèi)容簡單，但是代碼量卻不小的一個任務(wù)，我定義了一個函數(shù)用來將節(jié)點(diǎn)從無到有，從小到大：

function setSize(node) {
    if(node) {
         var s = 80,
              size = node.getSize().width;//獲取節(jié)點(diǎn)當(dāng)前的大小中的寬度，因?yàn)槲抑缹捀叨际且粯拥模院唽懥?
        var sw = s - size;
        ht.Default.startAnim({//HT 封裝的動畫函數(shù)，內(nèi)容也是 JSON 格式的對象
            duration: 1000,// 動畫周期毫秒數(shù)
            easing: function(t) { return t*t },//動畫緩動函數(shù)
            action: function(v, t) {//action函數(shù)必須提供，實(shí)現(xiàn)動畫過程中的屬性變化 第一個參數(shù)v代表通過easing(t)函數(shù)運(yùn)算后的值，t代表當(dāng)前動畫進(jìn)行的進(jìn)度[0~1]，一般屬性變化根據(jù)v參數(shù)進(jìn)行 
                node.setSize(//設(shè)置節(jié)點(diǎn)的大小  (有一個緩動的過程 通過 sw*v 實(shí)現(xiàn)的)
                    size + sw*v, 
                    size + sw*v 
                ); 
            } 
        }); 
    } 
}

從大到小，從有到無的過程也跟上面類似，我就不贅述了。

要讓這些字母按照時間的先后順序出現(xiàn)和消失，肯定需要用到 setTimeout 方法，要想實(shí)現(xiàn)一次的顯示消失是非常容易的，但是我在實(shí)現(xiàn)的過程掉到了 setTimeout 的一個陷阱中，只能說自己學(xué)藝不精吧。因?yàn)槲覀冃枰o不同的字母設(shè)置不同的出現(xiàn)和消失時間，一般比較簡單的方法就是設(shè)置一個固定的值，然后乘以對應(yīng)節(jié)點(diǎn)專屬的 index：

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

可是如果我直接在 for 循環(huán)中設(shè)置 setTimeout 的時間為動態(tài)變化的，那么這個動態(tài)變化的值肯定是只取 for 循環(huán)的最后一個值，所以我將 setTimeout 的方法抽取出來作為一個單獨(dú)的函數(shù)：

function animateLetterIn(node, i) {
    setTimeout(function() {
        setSize(node);
    }, i * 200);//這時候這個 i 取的就是節(jié)點(diǎn)對應(yīng)的 i 而不是最后一個值了

    if(i === arr.length - 1) {//當(dāng)節(jié)點(diǎn)為最后一個節(jié)點(diǎn)時，設(shè)置節(jié)點(diǎn)淡出動畫
        setTimeout(function() {
        animateOut();//節(jié)點(diǎn)淡出動畫
    }, (arr.length + 3) * 200);
    }
}

節(jié)點(diǎn)淡出動畫也是類似的方法，只是需要循環(huán)調(diào)用這些動畫函數(shù)，這樣才能做到無限循環(huán)字母的大小控制。

以上是HTML5 Canvas如何實(shí)現(xiàn)的文字動畫特效的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：HTML5Canvas如何實(shí)現(xiàn)的文字動畫特效
URL標(biāo)題：http://www.chinadenli.net/article32/ieocsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站建設(shè)、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)