HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com
分类: HTML5
2018-04-02 07:31:10
文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。
这个 Demo 是不断重复地设置文字的大小和透明度,这些英文字母也是我自己利用 HT 的矢量绘制的,总的来说效果还是不错的。
代码总共一百来行,比较简单,前面说过我的英文字母是用矢量绘制的,用矢量绘制图形的好处非常多,比如图片缩放不会失真,这样在不同的 Retina 显示屏上我也不需要提供不同尺寸的图片;还有就是用 JSON 的方式来描述矢量,格式比较简洁等等。
接下来绘制这些矢量图片(这里只拿出第一个 H 进行说明):
点击(此处)折叠或打开
绘制矢量图形是通过 JSON 格式来书写的,主要的参数有三个:width、height 以及 comps。这三个参数都必须要写上,其中 width 为矢量图形的宽度,height 为矢量图形的高度,comps 里面是一个 Array 数组,数组中是一个个独立的对象,可以对这个对象设置一些预定义参数,也可设置一些可选的参数信息。
这里我将所有的文本信息存储在一个数组中,方便调用:
点击(此处)折叠或打开
第一个 label 对象为矢量图形的名称,第二个 image 对象我们设置的是 json 格式的图片,但是实际上可以为 img、canvas 对象或图片 url 或 base64 字符串。
对象的图片已经生成,接下来就是创建对象了,这里英文字母总共 8 个,那么我们创建 8 个节点对象:
点击(此处)折叠或打开
关于上面的 ht.Node 节点的生成,其实这个只是 HT 封装好的类,这个类上面有很多很方便的 API。然后将这个生成的节点添加进数据容器 dm 中,这个数据容器又是整个拓扑图 gv 的数据容器。
来看看如何生成这个拓扑图吧:
点击(此处)折叠或打开
实际上 HT 的原理就是在一个 div 中的 canvas 上绘制图形,也就是说这个 gv 就是一个 canvas。
然后通过 getView 获取这个 canvas 的底层 div,这样我们就能将这个 div 添加到 html 页面的任何地方了,addToDOM 的定义如下:
点击(此处)折叠或打开
现在刷新页面,你会看到一片空白,为什么?因为前面设置节点的大小为 0 啊,怎么会显示,这个 Demo 的效果就是从无到有,又从有到无。那接下来看看如何“从无到有”。
就像我刚刚说过的,要想让节点显示,肯定是需要设置节点的大小为我们肉眼可视的范围才会出现,但是我的目的不仅是从无到有,也是从小到大,这个能够一气呵成么?感觉好像代码内容简单,但是代码量却不小的一个任务,我定义了一个函数用来将节点从无到有,从小到大:
点击(此处)折叠或打开
从大到小,从有到无的过程也跟上面类似,我就不赘述了。
要让这些字母按照时间的先后顺序出现和消失,肯定需要用到 setTimeout 方法,要想实现一次的显示消失是非常容易的,但是我在实现的过程掉到了 setTimeout 的一个陷阱中,只能说自己学艺不精吧。因为我们需要给不同的字母设置不同的出现和消失时间,一般比较简单的方法就是设置一个固定的值,然后乘以对应节点专属的 index:
点击(此处)折叠或打开
可是如果我直接在 for 循环中设置 setTimeout 的时间为动态变化的,那么这个动态变化的值肯定是只取 for 循环的最后一个值,所以我将 setTimeout 的方法抽取出来作为一个单独的函数:
点击(此处)折叠或打开
节点淡出动画也是类似的方法,只是需要循环调用这些动画函数,这样才能做到无限循环字母的大小控制。