这次的这篇文章给大家分享的内容是基于 HTML5 Canvas 实现的文字动画特效，非常的而是用，有需要的朋友可以用来参考一下

前言

{    "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        ]
    }]
} 

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'},
]; 

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;
} 

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）函数进行更新。} 

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 
                ); 
            } 
        }); 
    } 
} 

function animateIn() {
    for(let i = 0; i < arr.length; i++) {
        var name = 't' + arr[i];
    animateLetterIn(window[name], i);//这个部分设置动画
    }
} 

function animateLetterIn(node, i) {
    setTimeout(function() {
        setSize(node);
    }, i * 200);//这时候这个 i 取的就是节点对应的 i 而不是最后一个值了

    if(i === arr.length - 1) {//当节点为最后一个节点时，设置节点淡出动画
        setTimeout(function() {
        animateOut();//节点淡出动画
    }, (arr.length + 3) * 200);
    }
} 

以上就是基于 HTML5 Canvas 实现的文字动画特效的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于基于HTML5Canvas实现的文字动画特效的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did71347