javacanvas动画效果_基于HTML5Canvas实现的文字动画特效

前言

文字是网页中最基本的元素&＃xff0c;一般我们在网页上都是展示的静态文字&＃xff0c;但是就效果来说&＃xff0c;还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用&＃xff0c;如果有某些关键的文字&＃xff0c;可以通过这种动态的效果来提醒用户阅读。

动态效果图

这个 Demo 是不断重复地设置文字的大小和透明度&＃xff0c;这些英文字母也是我自己利用 HT 的矢量绘制的&＃xff0c;总的来说效果还是不错的。

代码实现

代码总共一百来行&＃xff0c;比较简单&＃xff0c;前面说过我的英文字母是用矢量绘制的&＃xff0c;用矢量绘制图形的好处非常多&＃xff0c;比如图片缩放不会失真&＃xff0c;这样在不同的 Retina 显示屏上我也不需要提供不同尺寸的图片&＃xff1b;还有就是用 JSON 的方式来描述矢量&＃xff0c;格式比较简洁等等。

矢量图片

接下来绘制这些矢量图片(这里只拿出第一个 H 进行说明)&＃xff1a;

{

"width": 10,//设置矢量的宽

"height": 10,//设置矢量的高

"comps": [//矢量图形的组件Array数组&＃xff0c;每个数组对象为一个独立的组件类型&＃xff0c;数组的顺序为组件绘制先后顺序

{

"type": "text",//文本类型

"text": "H",//文本内容

"color": "rgb(69,69,69)",//文本颜色

"align": "center",//文本在矢量中的对齐方式

"opacity": {//文本透明度

"func": "attr&＃64;text.opacity",//设置业务属性&＃xff0c;对文本进行透明度的数据绑定

"value": 1//如果func中的值为空或者undefined&＃xff0c;那么就直接用这个值

},

"clipDirection": "bottom",//裁切方向为“从上到下”

"rect": [//指定组件绘制在矢量中的矩形边界

0,//代表左上角坐标x

0,//代表左上角坐标y

10,//代表组件的width

10//代表组件的height

]

}]

}

绘制矢量图形是通过 JSON 格式来书写的&＃xff0c;主要的参数有三个&＃xff1a;width、height 以及 comps。这三个参数都必须要写上&＃xff0c;其中 width 为矢量图形的宽度&＃xff0c;height 为矢量图形的高度&＃xff0c;comps 里面是一个 Array 数组&＃xff0c;数组中是一个个独立的对象&＃xff0c;可以对这个对象设置一些预定义参数&＃xff0c;也可设置一些可选的参数信息。

这里我将所有的文本信息存储在一个数组中&＃xff0c;方便调用&＃xff1a;

arr &＃61; [

{label: &＃39;H&＃39;, image: &＃39;symbols/H.json&＃39;},

{label: &＃39;T&＃39;, image: &＃39;symbols/T.json&＃39;},

{label: &＃39;f&＃39;, image: &＃39;symbols/f.json&＃39;},

{label: &＃39;o&＃39;, image: &＃39;symbols/o.json&＃39;},

{label: &＃39;r&＃39;, image: &＃39;symbols/r.json&＃39;},

{label: &＃39;W&＃39;, image: &＃39;symbols/W.json&＃39;},

{label: &＃39;e&＃39;, image: &＃39;symbols/e.json&＃39;},

{label: &＃39;b&＃39;, image: &＃39;symbols/b.json&＃39;},

];

第一个 label 对象为矢量图形的名称&＃xff0c;第二个 image 对象我们设置的是 json 格式的图片&＃xff0c;但是实际上可以为 img、canvas 对象或图片 url 或 base64 字符串。

创建节点对象

对象的图片已经生成&＃xff0c;接下来就是创建对象了&＃xff0c;这里英文字母总共 8 个&＃xff0c;那么我们创建 8 个节点对象&＃xff1a;

var s &＃61; 80;

arr.forEach(function(obj, index) {

var text &＃61; obj.label;

name &＃61; &＃39;t&＃39; &＃43; text;

window[name] &＃61; createNode(obj.image, 100&＃43;s*index, 100);

});

function createNode(image, x, y) {//节点对象声明

var node &＃61; 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 节点的生成&＃xff0c;其实这个只是 HT 封装好的类&＃xff0c;这个类上面有很多很方便的 API。然后将这个生成的节点添加进数据容器 dm 中&＃xff0c;这个数据容器又是整个拓扑图 gv 的数据容器。

拓扑图生成

来看看如何生成这个拓扑图吧&＃xff1a;

dm &＃61; new ht.DataModel();//数据容器

gv &＃61; new ht.graph.GraphView(dm);//拓扑图 通过 gv.getView() 可获得这个拓扑图的底层 div

gv.addToDOM();//将 gv 添加进 body 中

实际上 HT 的原理就是在一个 div 中的 canvas 上绘制图形&＃xff0c;也就是说这个 gv 就是一个 canvas。

然后通过 getView 获取这个 canvas 的底层 div&＃xff0c;这样我们就能将这个 div 添加到 html 页面的任何地方了&＃xff0c;addToDOM 的定义如下&＃xff1a;

addToDOM &＃61; function(){

var self &＃61; this,

view &＃61; self.getView(), //获取底层div

style &＃61; view.style;

document.body.appendChild(view); //将底层div添加到body中

style.left &＃61; &＃39;0&＃39;;//因为 HT 默认将组件的position设置为absolute 所以要设置位置

style.right &＃61; &＃39;0&＃39;;

style.top &＃61; &＃39;0&＃39;;

style.bottom &＃61; &＃39;0&＃39;;

window.addEventListener(&＃39;resize&＃39;, function () { self.iv(); }, false);//窗口大小变化触发事件&＃xff0c;调用最外层组件invalidate(即iv)函数进行更新。

}

现在刷新页面&＃xff0c;你会看到一片空白&＃xff0c;为什么&＃xff1f;因为前面设置节点的大小为 0 啊&＃xff0c;怎么会显示&＃xff0c;这个 Demo 的效果就是从无到有&＃xff0c;又从有到无。那接下来看看如何“从无到有”。

文本动画

就像我刚刚说过的&＃xff0c;要想让节点显示&＃xff0c;肯定是需要设置节点的大小为我们肉眼可视的范围才会出现&＃xff0c;但是我的目的不仅是从无到有&＃xff0c;也是从小到大&＃xff0c;这个能够一气呵成么&＃xff1f;感觉好像代码内容简单&＃xff0c;但是代码量却不小的一个任务&＃xff0c;我定义了一个函数用来将节点从无到有&＃xff0c;从小到大&＃xff1a;

function setSize(node) {

if(node) {

var s &＃61; 80,

size &＃61; node.getSize().width;//获取节点当前的大小中的宽度&＃xff0c;因为我知道宽高都是一样的&＃xff0c;所以简写了

var sw &＃61; s - size;

ht.Default.startAnim({//HT 封装的动画函数&＃xff0c;内容也是 JSON 格式的对象

duration: 1000,// 动画周期毫秒数

easing: function(t) { return t*t },//动画缓动函数

action: function(v, t) {//action函数必须提供&＃xff0c;实现动画过程中的属性变化 第一个参数v代表通过easing(t)函数运算后的值&＃xff0c;t代表当前动画进行的进度[0~1]&＃xff0c;一般属性变化根据v参数进行

node.setSize(//设置节点的大小 (有一个缓动的过程 通过 sw*v 实现的)

size &＃43; sw*v,

size &＃43; sw*v

);

}

});

}

}

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

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

function animateIn() {

for(let i &＃61; 0; i

var name &＃61; &＃39;t&＃39; &＃43; arr[i];

animateLetterIn(window[name], i);//这个部分设置动画

}

}

可是如果我直接在 for 循环中设置 setTimeout 的时间为动态变化的&＃xff0c;那么这个动态变化的值肯定是只取 for 循环的最后一个值&＃xff0c;所以我将 setTimeout 的方法抽取出来作为一个单独的函数&＃xff1a;

function animateLetterIn(node, i) {

setTimeout(function() {

setSize(node);

}, i * 200);//这时候这个 i 取的就是节点对应的 i 而不是最后一个值了

if(i &＃61;&＃61;&＃61; arr.length - 1) {//当节点为最后一个节点时&＃xff0c;设置节点淡出动画

setTimeout(function() {

animateOut();//节点淡出动画

}, (arr.length &＃43; 3) * 200);

}

}

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