这是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)
:返回字符和容器对象。字符是一个svgg
元素的数组。 -
.draw(id)
:用于当autoAnimation:false
时手动绘制文字动画。 -
.animationEnd(function(i,o){})
:用于在动画结束时触发一个函数。 -
.playAll()
:开始所有的文字动画。
该js绘制文字动画特效插件的github网址为:https://github.com/akzhy/Vara
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!