Skip to content

Latest commit

 

History

History
198 lines (145 loc) · 6.32 KB

README.md

File metadata and controls

198 lines (145 loc) · 6.32 KB
Raw

svg-text-animate.js

[中文] [English]

Svg-text-animate is a JavaScript library for convert text to SVG stroke animations in the browser.

Alt text
Alt text
Alt text

See svg-text-animate for a live demo.

Usage

NPM


npm i svg-text-animate

CDN

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

Demo

    import SVGTextAnimate from 'svt-text-animate;
    
    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,
      "fill-color":"white"
    });

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

Constructor

Creates an instance of SVGTextAnimate.

SVGTextAnimate(fontfile, options, stroke, cretor)

  • @param {String} Required fontfile: Path of font file with WOFF, OTF, TTF (both with TrueType glyf and PostScript cff outlines)
  • @param {Object} Required options: {duration,timing-function,iteration-count,direction,fill-mode,delay,mode}
  • @param {Object} Required stroke: {stroke,stroke-width,font-size}
  • @param {String} Optional creator: The mode of animation, use CSSCreator by default.

Font-size moved from ‘options’ to ‘stroke’ in version 1.2.0

Options

An Object for controlling animation

Name Type Default value Description
duration Number 1000 this option sets the length of time that an animation takes to complete one cycle in milliseconds.
timing-function String linear Same as the animation-timing-function CSS property.
iteration-count Number 1 Same as the animation-iteration-count CSS property.
direction String normal Same as the animation-direction CSS property.
fill-mode String forwards Same as the animation-fill-mode CSS property.
mode String sync "sync":All symbols appear at the same time;
"onebyone":a symbol appears after the last symbol animation;
"delay":a symbol appears n milliseconds later when the last symbol starts drawing.(The value of n is taken from the next option)
delay Number 0 Only work with mode:"delay"

Stroke

An Object for controlling stroke

Name Type Default value Description
stroke String #000000 The hex color of stroke
stroke-width String 1px The width of stroke
font-size Number 72 Output font size.
fill-color String transparent Fill color.

Creator

A string describing the animation mode.

Param Description
css (default) Using CSSCreator. Create a CSS style SVG animation.(Using <style> tag and @keyframes).
svg Using SVGCreator. Create a SMIL SVG animation.(Using <animate> tag).
In this case：
1.The option 'timing-function' always works in 'linear' mode.
2.The option 'fill-mode' only works in 'forwards' mode or 'none' mode.
3.The option 'direction' always works in 'normal' mode.

The 'svg' mode can be used in the scenario where CSS is not supported

Methods

setfont()

An asynchronous method for loading font files passed in from the constructor.
This method will returns a Promise.
Each font just needs to be loaded only once.

  await opensans.setFont();

or

  opensans.setFont().then();

setFontFromBuffer()

Load a font file from an ArrayBuffer
Each font just needs to be loaded only once.
returns current instance

setOptions(options)

set an Object for controlling animation, same as options
returns current instance

setStroke(stroke)

set an Object for controlling animation, same as stroke returns current instance

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

create a svg animation from the given string. Clear the selector first, then insert SVG into the DOM of delector. add(v1.2.0) a svg animation from the given string and inserts it into the DOM of the selector.

returns current instance

Name Type Description
text String The text you want to animate
selector String The DOM selector you want to insert into 
    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,
      "fill-color":"white"
    }).create("Try it", ".button");

Special fonts

  • Fonts with a large number of characters, such as chinese.
  • Fonts exported from icons, for example the fonts download from fontawesom.

In the first case, I recommend compressing the font first. Try font-spider or other font compress tools;

In the second case, you can use like this

    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,
      "fill-color":"white"
    }).create(String.fromCharCode(0xf581), "#symbols")
      .create(String.fromCharCode(0xf164), "#symbols2");

      //you can find hex code on the website where you downloaded the iconfont.
      //Using String.fromCharCode(hexcode) as "create" method`s first parameter.

Thanks

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