基于 HTML5 Canvas 实现的文字动画特效
前言
文字是网页中最根本的元素,一样我们在网页上都是展现的静态文字,但是就结果来说,还是比力枯燥的。文字淡入淡出的动画结果在项目中非常有用,假如有某些关键的文字,可以通过这种动态的结果来提示会员阅读。
动态结果图
这个 Demo 是不竭反复地设定文字的大小和透亮度,这些英文字母也是我本人利用 HT 的矢量绘制的,总的来说结果还是不错的。
代码实现
代码总共一百来行,比力简便,前面说过我的英文字母是用矢量绘制的,用矢量绘制图形的好处非常多,比方图片缩放不会失真,这样在不一样的 Retina 显示屏上我也不需要供给不一样尺寸的图片;还有就是用 JSON 的方式来描写矢量,格局比力简约等等。
矢量图片
接下来绘制这些矢量图片(这里只拿出第一个 H 停止说明):
{ "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 格局来书写的,主要的参数有三个:width、height 乃至 comps。这三个参数都必需要写上,其中 width 为矢量图形的宽度,height 为矢量图形的高度,comps 里面是一个 Array 数组,数组中是一个个独立的对象,可以对这个对象设定一些预定义参数,也可设定一些可选的参数信息。
这里我将所有的文本信息储备在一个数组中,利便调取:
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'}, ];
第一个 label 对象为矢量图形的名称,第二个 image 对象我们设定的是 json 格局的图片,但是实际上可认为 img、canvas 对象或图片 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); } }
节点淡出动画也是相似的办法,只是需要轮回调取这些动画函数,这样才能做到无穷轮回字母的大小操纵。
相关引荐:
实例详解HTML怎样实现文件间自在切换
以上就是基于 HTML5 Canvas 实现的文字动画特效的具体内容,更多请关注百分百源码网其它相关文章!