Morioh
Login
JavaScript Questions

JavaScript Questions

3 years ago

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

svg-text-animate.js

Svg-text-animate A tool that converts input text into stroke animation in the browser environment

Alt text

Alt text

Alt text

demo svg-text-animate

online generation tool svg-tool

Instructions

Download and use

Download the zip package from releases and unzip it, find the compiled js file in the dist folder, and use

svg-text-animate.js or svg-text-animate.min.js in the following way

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

ES6 style svg-text-animate.module.js

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

CDN

Using CDN, put the following code directly in your html.

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

Constructor

Create SVGTextAnimate instance

SVGTextAnimate(fontfile, options, stroke, creator)

  • @param {String} 必填Font file path, supported formats: WOFF, OTF, TTF (including TrueType glyf and 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: Animation generator, CSSCreator is used by default to generate css animation.

font-size moved from options to stroke in version 1.2.0

Example:

var 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
    });

options

Objects that control animation effects

属性名 类型 默认值 说明
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

Objects that control the brush

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

creator

Animation 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的场景中，例如使用在微信公众号的文章中 |

method

setfont()

Asynchronous method, loading the font passed in the constructor

returns a Promise object.

Each font only needs to be loaded once

  await opensans.setFont();

or

  opensans.setFont().then();

setFontFromBuffer()

Read a font from the ArrayBuffer for the browser to read the local font file.

Each font only needs to be loaded once.

Return to the current instance

setOptions(options)

Set animation parameters, same as options

to return current instance

setStroke(stroke)

Set stroke parameters, same as stroke

to return current instance

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

create: Create an svg animation based on the text string, first clear the selector and then insert the svg into the DOM determined by the selector.

add(v1.2.0): Create an SVG animation based on the text string and insert it directly into the DOM determined by the selector

Return current instance

属性名 类型 说明
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");

Special font

  • A font with a lot of characters like Chinese
  • Some icon fonts such as: fonts downloaded in iconfont .

In the first case, it is recommended to perform font compression first, such as font-spider or other font compression software.

In the second situation, the method of use is as follows.

    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函数的第一个参数。

thank

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.

Download Details:

Author: oubenruing

Live Demo: https://oubenruing.github.io/svg-text-animate/

GitHub: https://github.com/oubenruing/svg-text-animate

#javascript #programming

A Javascript library for convert text to SVG stroke animations in the browser
31.35 GEEK