文本/链接
JS绘制文字动画特效插件
PetitQ
这是 js 绘制文字动画特效插件。该插件通过在 js 中配置要绘制的文字、大小、颜色等属性，就可以在屏幕中指定文字实现文字的绘画过程。
使用方法
在页面中引入 vara.min.js 文件。
也想出现在这里？联系我们吧
<script src="./src/vara.min.js" type="text/javascript"></script>
HTML 结构
使用一个<div>元素作为文字绘画的容器。
<div id="container"></div>
初始化插件
然后通过下面的方法来初始化插件。
new Vara("#element","font.json",[{
text:"Handwritten"
}],{
fontSize:46
});
配置参数
该 js 绘制文字动画特效插件的可用配置参数有：
new Vara("#container","font.json",[
{text:"Hello World", // String, text to be shown
fontSize:24, // Number, size of the text
strokeWidth:.5, // Width / Thickness of the stroke
color:"black", // Color of the text
id:"", // String or integer, for if animations are called manually or when using the get() method. Default is the index of the object.
duration:2000, // Number, Duration of the animation in milliseconds
textAlign:"left", // String, text align, accepted values are left,center,right
x:0, // Number, x coordinate of the text
y:0, // Number, y coordinate of the text
fromCurrentPosition:{ // Whether the x or y coordinate should be from its calculated position, ie the position if x or y coordinates were not applied
x:true, // Boolean
y:true, // Boolean
},
autoAnimation:true, // Boolean, Whether to animate the text automatically
queued:true, // Boolean, Whether the animation should be in a queue
delay:0, // Delay before the animation starts in milliseconds
letterSpacing:0 // Number, space between each character
}],{
// The options given below will be applicable to every text created,// however they will not override the options set above.// They will work as secondary options.fontSize:24, // Number, size of the text
strokeWidth:.5, // Width / Thickness of the stroke
color:"black", // Color of the text
duration:2000, // Number, Duration of the animation in milliseconds
textAlign:"left", // String, text align, accepted values are left,center,right
autoAnimation:true, // Boolean, Whether to animate the text automatically
queued:true, // Boolean, Whether the animation should be in a queue
letterSpacing:0
})
方法
该 js 绘制文字动画特效插件的可用方法有：
.ready(function)：当字体被加载完成，元素准备就绪时执行该方法。其它方法在该方法内执行
.get(id)：返回字符和容器对象。字符是一个 svg g 元素的数组
.draw(id)：用于当 autoAnimation:false 时手动绘制文字动画
.animationEnd(function(i,o){})：用于在动画结束时触发一个函数
.playAll()：开始所有的文字动画
Github 网址：https://github.com/akzhy/Vara
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
