Dieser Artikel teilt Ihnen die auf HTML5 Canvas basierenden Textanimations-Spezialeffekte mit. Es ist sehr praktisch, dass Freunde in Not es als Referenz verwenden können

Vorwort

Text ist das grundlegendste Element auf einer Webseite, aber im Hinblick auf die Wirkung ist er immer noch relativ langweilig. Der Animationseffekt des Ein- und Ausblendens von Text ist in Projekten sehr praktisch. Bei bestimmten Schlüsselwörtern kann dieser dynamische Effekt verwendet werden, um Benutzer an das Lesen zu erinnern.

Dynamische Darstellungen

Diese Demo dient dazu, die Größe und Transparenz des Textes wiederholt festzulegen. Ich verwende diese englischen Buchstaben auch selbst . HT-Vektorzeichnung, insgesamt ist der Effekt ziemlich gut.

Code-Implementierung

Der Code umfasst insgesamt etwa 100 Zeilen, was relativ einfach ist. Wie ich bereits sagte, werden meine englischen Buchstaben mit Vektoren gezeichnet. Die Verwendung von Vektoren zum Zeichnen von Grafiken bietet viele Vorteile. Das Bild kann beispielsweise nicht skaliert werden, sodass ich keine Bilder unterschiedlicher Größe auf verschiedenen Retina-Displays bereitstellen muss. Es gibt auch die Verwendung von JSON zur Beschreibung von Vektoren, das Format ist relativ prägnant usw.

Vektorbilder

Zeichnen Sie als Nächstes diese Vektorbilder (zur Erläuterung wird nur das erste H weggelassen):

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

Nach dem Login kopieren

Das Zeichnen von Vektorgrafiken erfolgt im JSON-Format. Es gibt drei Hauptparameter: Breite, Höhe und Kompositionen. Diese drei Parameter müssen geschrieben werden: width ist die Breite der Vektorgrafik, height die Höhe der Vektorgrafik, comps enthält ein Array-Array und das Array ist ein unabhängiges Objekt. Sie können einige vordefinierte Parameter für dieses Objekt festlegen. , können Sie auch einige optionale Parameterinformationen festlegen.

Hier speichere ich alle Textinformationen in einem Array zum einfachen Aufrufen:

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

Nach dem Login kopieren

Kapitel-A-Beschriftung Objekt ist der Name einer Vektorgrafik. Das zweite Bildobjekt, das wir festlegen, ist ein Bild im JSON-Format, es kann jedoch tatsächlich ein IMG, ein Canvas-Objekt, eine Bild-URL oder eine Base64-Zeichenfolge sein.

Knotenobjekt erstellen

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

Nach dem Login kopieren

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

拓扑图生成

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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