update 1.2.0

Reorganize the code;Support multiple ways to produce animations;Add ‘add’ method;Update demo, readme.
oubenruing · Nov 24, 2019 · a5c2ff0 · a5c2ff0
1 parent f22247c
commit a5c2ff0
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -39,8 +39,11 @@ Creates an instance of SVGTextAnimate.
 `SVGTextAnimate(fontfile, options, stroke)`
 
   * @param {String} fontfile Path of font file with WOFF, OTF, TTF (both with TrueType glyf and PostScript cff outlines)
-  * @param {Object} options  {duration,timing-function,iteration-count,direction,fill-mode,font-size,delay,mode}
-  * @param {Object} stroke   {stroke,stroke-width}
+  * @param {Object} options  {duration,timing-function,iteration-count,direction,fill-mode,delay,mode}
+  * @param {Object} stroke   {stroke,stroke-width,font-size}
+  * @param {String} creator  The mode of animation, use CSSCreator by default.
+
+***Font-size moved from ‘options’ to ‘stroke’ in version 1.2.0***
 
 For example:
 
@@ -50,11 +53,11 @@ var opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-te
       "direction": "normal",
       "fill-mode": "forwards",
       "delay": 150,
-      "mode": "delay",
-      "font-size": 55
+      "mode": "delay"
     }, {
       "stroke": "#005792",
-      "stroke-width": "2px"
+      "stroke-width": "2px",
+      "font-size": 55
     });
 ```
 
@@ -110,13 +113,15 @@ returns current instance
 set an Object for controlling animation, same as [stroke](#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` a svg animation from the given string and inserts it into the DOM of the selector.
 
-create 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
@@ -131,11 +136,11 @@ selector|String|The DOM selector you want to insert into
       "direction": "normal",
       "fill-mode": "forwards",
       "delay": 50,
-      "mode": "sync",
-      "font-size": 23
+      "mode": "sync"
     }).setStroke({
       "stroke": "white",
-      "stroke-width": "2px"
+      "stroke-width": "2px",
+      "font-size": 23
     }).create("Try it", ".button");
 ```
 ---
@@ -155,11 +160,11 @@ In the second case, you can use like this
       "direction": "alternate",
       "delay": 500,
       "iteration-count": "infinite",
-      "mode": "sync",
-      "font-size": 22
+      "mode": "sync"
     }).setStroke({
       "stroke": "white",
-      "stroke-width": "1px"
+      "stroke-width": "1px",
+      "font-size": 22
     }).create(String.fromCharCode(0xf581), "#symbols")
       .create(String.fromCharCode(0xf164), "#symbols2");
 

diff --git a/README_CN.md b/README_CN.md
@@ -40,8 +40,10 @@ ES6 风格 svg-text-animate.module.js
 `SVGTextAnimate(fontfile, options, stroke)`
 
   * @param {String} 字体文件路径，支持格式：WOFF, OTF, TTF (包含TrueType glyf 和 PostScript cff outlines)
-  * @param {Object} options  {duration,timing-function,iteration-count,direction,fill-mode,font-size,delay,mode}
-  * @param {Object} stroke   {stroke,stroke-width}
+  * @param {Object} options  {duration,timing-function,iteration-count,direction,fill-mode,delay, mode}
+  * @param {Object} stroke   {stroke,stroke-width,font-size}
+  * @param {String} creator  The mode of animation, use CSSCreator by default.
+  ***font-size 在1.2.0版本中 从 options 移至 stroke***
 
 例:
 
@@ -51,11 +53,11 @@ var opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-te
       "direction": "normal",
       "fill-mode": "forwards",
       "delay": 150,
-      "mode": "delay",
-      "font-size": 55
+      "mode": "delay"
     }, {
       "stroke": "#005792",
-      "stroke-width": "2px"
+      "stroke-width": "2px",
+      "font-size": 55
     });
 ```
 
@@ -113,8 +115,11 @@ stroke-width|String|1px|描边宽度
 
 
 ### create(text,selector)
+### add(text,selector)
+
+`create`：根据text字符串创建svg动画，先清空selector然后将svg插入到selector确定的DOM中
+`add`：根据text字符串创建svg动画，并直接插入到selector确定的DOM中
 
-根据text字符串创建svg动画，并插入到selector确定的DOM中
 返回当前实例
 
 属性名|类型|说明
@@ -131,11 +136,11 @@ selector|String|要插入的DOM的css选择器
       "direction": "normal",
       "fill-mode": "forwards",
       "delay": 50,
-      "mode": "sync",
-      "font-size": 23
+      "mode": "sync"
     }).setStroke({
       "stroke": "white",
-      "stroke-width": "2px"
+      "stroke-width": "2px",
+      "font-size": 23
     }).create("Try it", ".button");
 ```
 
@@ -156,11 +161,11 @@ selector|String|要插入的DOM的css选择器
       "direction": "alternate",
       "delay": 500,
       "iteration-count": "infinite",
-      "mode": "sync",
-      "font-size": 22
+      "mode": "sync"
     }).setStroke({
       "stroke": "white",
-      "stroke-width": "1px"
+      "stroke-width": "1px"，
+      "font-size": 22
     }).create(String.fromCharCode(0xf581), "#symbols")
       .create(String.fromCharCode(0xf164), "#symbols2");
 

diff --git a/dist/svg-text-animate.js b/dist/svg-text-animate.js
diff --git a/dist/svg-text-animate.js.map b/dist/svg-text-animate.js.map
diff --git a/dist/svg-text-animate.min.js b/dist/svg-text-animate.min.js
diff --git a/dist/svg-text-animate.module.js b/dist/svg-text-animate.module.js
diff --git a/dist/svg-text-animate.module.js.map b/dist/svg-text-animate.module.js.map
diff --git a/src/svg-text-animate.js b/src/svg-text-animate.js
@@ -69,17 +69,6 @@ export default class SVGTextAnimate {
     return this;
   }
 
-  /**
-   * Set the DOM to insert
-   *
-   * @param {DOM} dom
-   * @returns {SVGTextAnimate} current instance
-   */
-  setFatherDom(dom) {
-    this.fatherdom = dom;
-    return this;
-  }
-
   /**
    * set stroke of current instance
    *
@@ -116,7 +105,7 @@ export default class SVGTextAnimate {
 
   /**
    *  Generate svg animation from the stroked path of the given string
-   *  and replace the contents of the selector DOM
+   *  clear selector and inserts it into the DOM of the selector
    *
    * @param {String} text
    * @param {String} selector
@@ -128,11 +117,7 @@ export default class SVGTextAnimate {
       console.error("Fontfile does not loaded");
       return;
     }
-    const fatherdom = this.fatherdom || document.querySelector(selector);
-    if (fatherdom == null) {
-      console.error("no such fatherdom");
-      return;
-    }
+    const fatherdom =  document.querySelector(selector);
     const svgDom = this.createSVGDom(text);
     fatherdom.innerHTML = "";
     fatherdom.appendChild(svgDom)
@@ -153,7 +138,7 @@ export default class SVGTextAnimate {
       console.error("Fontfile does not loaded");
       return;
     }
-    const fatherdom = this.fatherdom || document.querySelector(selector);
+    const fatherdom = document.querySelector(selector);
     if (fatherdom == null) {
       console.error("no such fatherdom");
       return;