집 > 기사 > 웹 프론트엔드 > HTML5 Canvas 기반의 텍스트 애니메이션 특수 효과

HTML5 Canvas 기반의 텍스트 애니메이션 특수 효과

不言원래의: 2018-04-02 11:46:541637검색

이 글은 HTML5 Canvas를 기반으로 한 텍스트 애니메이션 특수 효과를 공유합니다. 매우 실용적입니다. 도움이 필요한 친구들이 참고할 수 있습니다.

머리말

텍스트는 웹 페이지에서 가장 기본적인 요소입니다. 일반적으로 웹 페이지에 표시되는 정적인 텍스트이지만 효과 측면에서는 여전히 상대적으로 지루합니다. 텍스트 페이드 인 및 아웃의 애니메이션 효과는 프로젝트에서 매우 실용적입니다. 특정 키워드가 있는 경우 이 동적 효과를 사용하여 사용자에게 읽기를 상기시킬 수 있습니다.

동적 렌더링

이 데모는 텍스트의 크기와 투명도를 반복적으로 설정하는 것입니다. 이 영어 글자도 HT 벡터를 사용하여 직접 그렸습니다.

코드 구현

코드는 총 100줄 정도로 비교적 간단합니다. 앞서 말했듯이 제 영문 글자는 벡터를 사용하여 그래픽을 그리는 데 많은 이점이 있습니다. 확대/축소하면 왜곡되어 다른 Retina 화면에 표시될 수 있습니다. 또한 디스플레이 화면에 다양한 크기의 그림을 제공할 필요가 없으며, 벡터를 설명하기 위해 JSON을 사용하고, 형식도 상대적으로 간결합니다. .

벡터 그림

다음으로 다음 벡터 그림을 그립니다(설명을 위해 첫 번째 H만 꺼냄). 세 가지: 너비, 높이 및 구성요소. 이 세 가지 매개변수를 작성해야 합니다. 여기서 width는 벡터 그래픽의 너비이고 height는 벡터 그래픽의 높이이며 comps는 배열 배열을 포함하고 배열은 이 개체에 대해 미리 정의된 일부 매개변수를 설정할 수 있습니다. , 일부 선택적 매개변수 정보를 설정할 수도 있습니다.

여기에서는 쉽게 호출할 수 있도록 모든 텍스트 정보를 배열에 저장합니다.

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

첫 번째 레이블 개체는 벡터 그래픽의 이름이고 우리가 설정한 두 번째 이미지 개체는 json 형식입니다. 이미지, 그러나 실제로는 img, 캔버스 객체, 이미지 URL 또는 base64 문자열일 수 있습니다.

노드 객체 생성

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

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

拓扑图生成

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

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

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

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

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

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

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

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

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