Skip to content

Commit

Permalink
🚀 npm package
Browse files Browse the repository at this point in the history
  • Loading branch information
@oubenruing
oubenruing committed Sep 9, 2022
1 parent 260b7fc commit 43f90f3
Show file tree
Hide file tree
Showing 13 changed files with 296 additions and 306 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
node_modules
bower_components
164 changes: 76 additions & 88 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,34 @@
# svg-text-animate.js

[[中文](https://github.com/oubenruing/svg-text-animate/blob/master/README.md)]
[[English](https://github.com/oubenruing/svg-text-animate/blob/master/README_EN.md)]
[[中文](https://github.com/oubenruing/svg-text-animate/blob/master/README_CN.md)]
[[English](https://github.com/oubenruing/svg-text-animate/blob/master/README.md)]

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

Svg-text-animate 一个在浏览器环境中将输入文本转化为描边动画的工具<br>
![Alt text](https://oubenruing.github.io/svg-text-animate/demo/title.svg)<br>
![Alt text](https://oubenruing.github.io/svg-text-animate/demo/hello.svg)<br>
![Alt text](https://oubenruing.github.io/svg-text-animate/demo/top.svg)<br>

See [svg-text-animate](https://oubenruing.github.io/svg-text-animate/index_en.html) for a live demo.

demo [svg-text-animate](https://oubenruing.github.io/svg-text-animate/)<br>
在线生成工具 [svg-tool](https://oubenruing.github.io/svg-text-animate/tool.html)


## 使用方法
---
## Usage

### 下载使用
### NPM
<br>

从 [releases](https://github.com/oubenruing/svg-text-animate/releases) 中下载zip包并解压，在dist文件夹下找到编译好的js文件，通过以下方式使用<br>
svg-text-animate.js 或 svg-text-animate.min.js
npm i svg-text-animate

<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

```
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",
Expand All @@ -60,95 +47,96 @@ ES6 风格 svg-text-animate.module.js
```

---
## 构造函数
创建 SVGTextAnimate实例
## Constructor
Creates an instance of SVGTextAnimate.

`SVGTextAnimate(fontfile, options, stroke, creator)`
`SVGTextAnimate(fontfile, options, stroke, cretor)`

* @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动画.
* @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 在1.2.0版本中 从 options 移至 stroke***
***Font-size moved from ‘options’ to ‘stroke’ in version 1.2.0***

### options
控制动画效果的对象
### Options
An Object for controlling animation

属性名|类型|默认值|说明
Name|Type|Default value|Description
---|:--:|:--:|---
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**":所有文字同时绘制; <br>"**onebyone**":一个接一个绘制;<br>"**delay**":一个字符绘制之后延迟n秒绘制下一个，**n**取自下一个参数delay
delay|Number|0|:仅在mode为**delay**模式下生效，单位毫秒

### stroke
控制画笔的对象

属性名|类型|默认值|说明
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; <br>"**onebyone**":a symbol appears after the last symbol animation;<br>"**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|十六进制颜色值的描边颜色
stroke-width|String|1px|描边宽度
font-size|Number|72|输出字符的大小.
stroke|String|#000000|The hex color of stroke
stroke-width|String|1px|The width of stroke
font-size|Number|72|Output font size.

### creator
动画创建器
### Creator
A string describing the animation mode.

参数|说明
Param|Description
---|---
css | (默认) 使用 CSSCreator. 创建CSS风格的svg动画.(使用 \<style\> 标签 和 @keyframes).
svg | 使用 SVGCreator. 创建 SMIL 风格的SVG动画.(使用 \<animate\> 标签).<br>这种情况下：<br>1.选项中的 'timing-function'总是在'linear'模式下工作,只能使用线性动画。<br>2.选项中的'fill-mode'只能使用 'forwards' 或 'none'模式。<br>3.选项中的'direction'总是在'normal' 模式下工作，不可变.<br><br>**'svg'模式生成的svg图片可用在不支持css的场景中，例如使用在微信公众号的文章中**
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).<br>In this case：<br>1.The option 'timing-function' always works in 'linear' mode.<br>2.The option 'fill-mode' only works in 'forwards' mode or 'none' mode.<br>3.The option 'direction' always works in 'normal' mode.<br><br>The 'svg' mode can be used in the scenario where CSS is not supported



---
## 方法
## Methods

### setfont()
异步方法，加载构造函数中传入的字体<br>
返回一个 Promise 对象. <br>
每个字体仅需要加载一次<br>
An asynchronous method for loading font files passed in from the constructor.<br>
This method will returns a Promise. <br>
Each font just needs to be loaded only once.<br>

```
await opensans.setFont();
```
或
or
```
opensans.setFont().then();
```

### setFontFromBuffer()
从ArrayBuffer中读取一个字体，用于浏览器本地字体文件读取<br>
每个字体仅需要加载一次<br>
返回当前实例
Load a font file from an ArrayBuffer<br>
Each font just needs to be loaded only once.<br>
returns current instance


### setOptions(options)

设置动画参数, 同 [options](#options)<br>
返回当前实例
set an Object for controlling animation, same as [options](#options)<br>
returns current instance



### setStroke(stroke)

设置描边参数，同 [stroke](#stroke)<br>
返回当前实例

set an Object for controlling animation, same as [stroke](#stroke)
returns current instance

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

### 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.

`create`：根据text字符串创建svg动画，先清空selector然后将svg插入到selector确定的DOM中。
returns current instance

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

返回当前实例

属性名|类型|说明
Name|Type|Description
---|:--:|---
text|String|待转换的字符串
selector|String|要插入的DOM的css选择器
text|String|The text you want to animate
selector|String|The DOM selector you want to insert into

```
opensans.create("svg-text-animate", "#name");
Expand All @@ -166,16 +154,15 @@ selector|String|要插入的DOM的css选择器
"font-size": 23
}).create("Try it", ".button");
```

---
## 特殊字体
## Special fonts

* 像中文一样的字符含量很大的字体
* 一些icon字体 如：在[iconfont](https://www.iconfont.cn/)下载的字体.
* Fonts with a large number of characters, such as chinese.
* Fonts exported from icons, for example the fonts download from [fontawesom](https://fontawesome.com/).

第一种情况下, 建议先进行字体压缩, 如[font-spider](https://github.com/aui/font-spider)或者其他字体压缩软件。<br>
In the first case, I recommend compressing the font first. Try [font-spider](https://github.com/aui/font-spider) or other font compress tools;<br>

第二种情，使用方法如下。
In the second case, you can use like this

```
fontawesome.setOptions({
Expand All @@ -187,21 +174,22 @@ selector|String|要插入的DOM的css选择器
"mode": "sync"
}).setStroke({
"stroke": "white",
"stroke-width": "1px"，
"stroke-width": "1px",
"font-size": 22
}).create(String.fromCharCode(0xf581), "#symbols")
.create(String.fromCharCode(0xf164), "#symbols2");
//你可以在下载字体的网站找到要使用的十六进制代码 调用create时传入即可。
//将String.fromCharCode(十六进制代码) 作为create函数的第一个参数。
//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](https://github.com/opentypejs/opentype.js) Read and write OpenType fonts using JavaScript. <br>
[fontawesom](https://fontawesome.com/) The iconic SVG, font, and CSS toolkit. <br>
[font-spider](https://github.com/aui/font-spider) Smart webfont compression and format conversion tool.
[font-spider](https://github.com/aui/font-spider) Smart webfont compression and format conversion tool.

---
(c) oubenruing 2019 | MIT License
Loading

0 comments on commit 43f90f3

Please sign in to comment.