js绘制文字动画特效代码插件

js绘制文字动画特效代码插件

这是js绘制文字动画特效插件。该插件通过在js中配置要绘制的文字、大小、颜色等属性,就可以在屏幕中指定文字实现文字的绘画过程。

使用方法
在页面中引入vara.min.js文件。

1
<script src="./src/vara.min.js" type="text/javascript"></script>

HTML结构
使用一个

元素作为文字绘画的容器。

1
<div id="container"></div>

初始化插件
然后通过下面的方法来初始化插件。

1
2
3
4
5
new Vara("#element","font.json",[{
  text:"Handwritten"
}],{
  fontSize:46
});

配置参数
该js绘制文字动画特效插件的可用配置参数有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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():开始所有的文字动画。
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论