Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

svg-text-animate.js

[中文] [English]

Svg-text-animate 一个在浏览器环境中将输入文本转化为描边动画的工具
Alt text
Alt text
Alt text

demo svg-text-animate
在线生成工具 svg-tool

使用方法

下载使用

releases 中下载zip包并解压,在dist文件夹下找到编译好的js文件,通过以下方式使用
svg-text-animate.js 或 svg-text-animate.min.js

<script src="YOURPATH/svg-text-animate.js"></script>
or
<script src="YOURPATH/svg-text-animate.min.js"></script>
<script>
  const fontawesome = new SVGTextAnimate("YOUR FONT FILE");
</script>

ES6 风格 svg-text-animate.module.js

<script type="module">
  import SVGTextAnimate from "YOURPATH/svg-text-animate.module.js";
  const fontawesome = new SVGTextAnimate("YOUR FONT FILE");
</script>

CDN

使用CDN,直接将下述代码放在您的html中即可。

<script src="https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/dist/svg-text-animate.min.js"></script>

Demo

    const opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/docs/fonts/OpenSans-Regular-webfont.woff", {
      "duration": 300,
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 150,
      "mode": "delay"
    }, {
      "stroke": "#005792",
      "stroke-width": "2px",
      "font-size": 55
    });

    await opensans.setFont();
    
    opensans.create("svg-text-animate", "#name");

构造函数

创建 SVGTextAnimate实例

SVGTextAnimate(fontfile, options, stroke, creator)

  • @param {String} 必填 字体文件路径,支持格式:WOFF, OTF, TTF (包含TrueType glyf 和 PostScript cff outlines)
  • @param {Object} 必填 options: {duration,timing-function,iteration-count,direction,fill-mode,delay, mode}
  • @param {Object} 必填 stroke: {stroke,stroke-width,font-size}
  • @param {String} 可选 creator: 动画生成器,默认使用 CSSCreator 生成css动画.

font-size 在1.2.0版本中 从 options 移至 stroke

options

控制动画效果的对象

属性名 类型 默认值 说明
duration Number 1000 单个文字动画时长 单位:毫秒.
timing-function String linear 同CSS属性animation-timing-function.
iteration-count Number 1 同CSS属性animation-iteration-count.
direction String normal 同CSS属性animation-direction.
fill-mode String forwards 同CSS属性animation-fill-mode.
mode String sync "sync":所有文字同时绘制;
"onebyone":一个接一个绘制;
"delay":一个字符绘制之后延迟n秒绘制下一个,n取自下一个参数delay
delay Number 0 :仅在mode为delay模式下生效,单位毫秒

stroke

控制画笔的对象

属性名 类型 默认值 说明
stroke String #000000 十六进制颜色值的描边颜色
stroke-width String 1px 描边宽度
font-size Number 72 输出字符的大小.

creator

动画创建器

参数 说明
css (默认) 使用 CSSCreator. 创建CSS风格的svg动画.(使用 <style> 标签 和 @keyframes).
svg 使用 SVGCreator. 创建 SMIL 风格的SVG动画.(使用 <animate> 标签).
这种情况下:
1.选项中的 'timing-function'总是在'linear'模式下工作,只能使用线性动画。
2.选项中的'fill-mode'只能使用 'forwards' 或 'none'模式。
3.选项中的'direction'总是在'normal' 模式下工作,不可变.

'svg'模式生成的svg图片可用在不支持css的场景中,例如使用在微信公众号的文章中

方法

setfont()

异步方法,加载构造函数中传入的字体
返回一个 Promise 对象.
每个字体仅需要加载一次

  await opensans.setFont();

  opensans.setFont().then();

setFontFromBuffer()

从ArrayBuffer中读取一个字体,用于浏览器本地字体文件读取
每个字体仅需要加载一次
返回当前实例

setOptions(options)

设置动画参数, 同 options
返回当前实例

setStroke(stroke)

设置描边参数,同 stroke
返回当前实例

create(text,selector) add(text,selector)

create:根据text字符串创建svg动画,先清空selector然后将svg插入到selector确定的DOM中。

add(v1.2.0):根据text字符串创建svg动画,并直接插入到selector确定的DOM中

返回当前实例

属性名 类型 说明
text String 待转换的字符串
selector String 要插入的DOM的css选择器
    opensans.create("svg-text-animate", "#name");

    opensans.setOptions({
      "duration": 500,
      "timing-function": "linear",
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 50,
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "2px",
      "font-size": 23
    }).create("Try it", ".button");

特殊字体

  • 像中文一样的字符含量很大的字体
  • 一些icon字体 如:在iconfont下载的字体.

第一种情况下, 建议先进行字体压缩, 如font-spider或者其他字体压缩软件。

第二种情,使用方法如下。

    fontawesome.setOptions({
      "duration": 2000,
      "timing-function": "linear",
      "direction": "alternate",
      "delay": 500,
      "iteration-count": "infinite",
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "1px",
      "font-size": 22
    }).create(String.fromCharCode(0xf581), "#symbols")
      .create(String.fromCharCode(0xf164), "#symbols2");

      //你可以在下载字体的网站找到要使用的十六进制代码 调用create时传入即可。
      //将String.fromCharCode(十六进制代码) 作为create函数的第一个参数。

感谢

opentype.js Read and write OpenType fonts using JavaScript.
fontawesom The iconic SVG, font, and CSS toolkit.
font-spider Smart webfont compression and format conversion tool.


(c) oubenruing 2019 | MIT License

About

A Javascript library for convert texts to SVG stroke animations in the browser.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published