js绘制文字动画特效插件

这是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()：开始所有的文字动画。

该js绘制文字动画特效插件的github网址为：https://github.com/akzhy/Vara