java canvas 动画效果_基于 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": &