svg-text-animate.js

[中文] [English]

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

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/[email protected]/dist/svg-text-animate.min.js"></script>

Demo

    const opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/[email protected]/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

控制动画效果的对象

stroke

控制画笔的对象

creator

动画创建器

方法

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中

返回当前实例

    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