Cet article partage avec vous les effets spéciaux d'animation de texte basés sur HTML5 Canvas. C'est très pratique. Les amis dans le besoin peuvent l'utiliser comme référence

Avant-propos

Le texte est l'élément le plus basique d'une page Web. Généralement, nous affichons du texte statique sur la page Web, mais en termes d'effet, cela reste relativement ennuyeux. L'effet d'animation du fondu entrant et sortant du texte est très pratique dans les projets s'il y a certains textes clés, cet effet dynamique peut être utilisé pour rappeler aux utilisateurs de lire.

Rendus dynamiques

Cette démo consiste à définir à plusieurs reprises la taille et la transparence du texte. J'utilise également moi-même ces lettres anglaises. .Dessin vectoriel HT, dans l'ensemble l'effet est plutôt bon.

Implémentation du code

Le code totalise environ 100 lignes, ce qui est relativement simple. Comme je l'ai déjà dit, mes lettres anglaises sont dessinées avec des vecteurs. Il y a de nombreux avantages à utiliser des vecteurs pour dessiner des graphiques. Par exemple, l'image ne peut pas être mise à l'échelle. Elle sera déformée, je n'ai donc pas besoin de fournir des images de différentes tailles sur différents écrans Retina ; il y a aussi l'utilisation de JSON pour décrire les vecteurs, le format est relativement concis, etc.

Images vectorielles

Dessinez ensuite ces images vectorielles (seul le premier H est retiré pour explication) :

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

Copier après la connexion

Le dessin de graphiques vectoriels est écrit au format JSON. Il existe trois paramètres principaux : la largeur, la hauteur et la composition. Ces trois paramètres doivent être écrits, où width est la largeur du graphique vectoriel, height est la hauteur du graphique vectoriel, comps contient un tableau Array et le tableau est un objet indépendant. Vous pouvez définir certains paramètres prédéfinis pour cet objet. , vous pouvez également définir certaines informations de paramètres facultatifs.

Ici, je stocke toutes les informations textuelles dans un tableau pour faciliter les appels :

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

Copier après la connexion

Étiquette du chapitre un object est le nom du graphique vectoriel. Le deuxième objet image que nous définissons est une image au format json, mais il peut en fait s'agir d'un objet img, d'un canevas, d'une URL d'image ou d'une chaîne base64.

Créer un objet nœud

对象的图片已经生成，接下来就是创建对象了，这里英文字母总共 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;
}

Copier après la connexion

关于上面的 ht.Node 节点的生成，其实这个只是 HT 封装好的类，这个类上面有很多很方便的 API。然后将这个生成的节点添加进数据容器 dm 中，这个数据容器又是整个拓扑图 gv 的数据容器。

拓扑图生成

来看看如何生成这个拓扑图吧：

dm = new ht.DataModel();//数据容器gv = new ht.graph.GraphView(dm);//拓扑图 通过 gv.getView() 可获得这个拓扑图的底层 pgv.addToDOM();//将 gv 添加进 body 中

Copier après la connexion

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

Copier après la connexion

现在刷新页面，你会看到一片空白，为什么？因为前面设置节点的大小为 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 
                ); 
            } 
        }); 
    } 
}

Copier après la connexion

从大到小，从有到无的过程也跟上面类似，我就不赘述了。

要让这些字母按照时间的先后顺序出现和消失，肯定需要用到 setTimeout 方法，要想实现一次的显示消失是非常容易的，但是我在实现的过程掉到了 setTimeout 的一个陷阱中，只能说自己学艺不精吧。因为我们需要给不同的字母设置不同的出现和消失时间，一般比较简单的方法就是设置一个固定的值，然后乘以对应节点专属的 index：

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

Copier après la connexion

可是如果我直接在 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);
    }
}

Copier après la connexion

节点淡出动画也是类似的方法，只是需要循环调用这些动画函数，这样才能做到无限循环字母的大小控制。