diff --git a/spec/easing.md b/spec/easing.md
index 156de98643..6c76635373 100644
--- a/spec/easing.md
+++ b/spec/easing.md
@@ -1,7 +1,7 @@
-# 缓动函数
+# 自然运动
 
 - category: 动画
-- order: 1
+- order: 0
 
 ---
 
@@ -20,9 +20,11 @@
 
 动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。
 
+> 以下图形，红色线与圆环为不推荐示例，蓝色为推荐示例。
+
 #### 自然缓动
 
-不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数。
+不要用直线缓动 Linear 做物体位移或出入动画的缓动；注：Linear 函数可做循环动画函数。
 
 如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。
 
@@ -32,17 +34,17 @@
 
 <script>
 $(function (){
-new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455,0.03,0.515,0.955],end:[0.455,0.03,0.515,0.955],stroke:"#71B5DE",openEaseName:"easeInOutQuad",endEaseName:"easeInOutQuad"},],mask:false});
+new Motion("#J-Linear",{lineData:[{stroke:"#f2666c"},{stroke:"#71B5DE",openEaseName:"easeInOutQuad",endEaseName:"easeInOutQuad"},],mask:false});
 })
 </script>
 
 
-上图所示缓动函数：红 `Linear`，蓝 `easeInOutQuad`。
+上图所示缓动函数：红 `Linear`，蓝 `ease-in-out`。
 
 
 #### 出入动画
 
-不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调，反相只出不进也一样。
+不要做单向动画，进场后不做出场，直接消失元素或回到原点，会造成整体效果不协调和用户视觉上的闪现或其它不好的效果。
 
 所以有动画的进场必须要有动画的出场，包括导航上的动画。
 
@@ -51,13 +53,13 @@ new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455
 <script>
 $(function (){
 new Motion("#J-Symmetric",{lineData:[
-{open:[0.455,0.03,0.515,0.955],end:[],openEaseName:"easeInOutQuad",endEaseName:"null",stroke:"#f2666c"},
-{open:[0.645,0.045,0.355,1],end:[0.645,0.045,0.355,1],stroke:"#71B5DE",openEaseName:"easeInOutCubic",endEaseName:"easeInOutCubic"}],
+{openEaseName:"easeInOutQuad",endEaseName:"null",stroke:"#f2666c"},
+{stroke:"#71B5DE",openEaseName:"easeInOutCubic",endEaseName:"easeInOutCubic"}],
 mask:false,exposure:"top"});
 })
 </script>
 
-上图所示缓动函数：红 `easeInOutQuad`，蓝 `easeInOutCubic`。
+上图所示缓动函数：红 `ease-in-out`，蓝 `ease-in-out-cubic`。
 
 
 ##### 场外出入
@@ -72,14 +74,14 @@ mask:false,exposure:"top"});
 
 <script>
 $(function (){
-new Motion("#J-Entry"，{lineData:[
-{open:[0.25,0.46,0.45,0.94]，end:[0.25,0.46,0.45,0.94]，openEaseName:"easeOutQuad"，endEaseName:"easeOutQuad"，stroke:"#f2666c"}，
-{open:[0.215,0.61,0.355,1]，end:[0.55,0.055,0.675,0.19]，stroke:"#71B5DE"，openEaseName:"easeOutCubic"，endEaseName:"easeInCubic"}]，
-mask:true，exposure:"bottom"});
+new Motion("#J-Entry",{lineData:[
+{openEaseName:"easeOutQuad",endEaseName:"easeOutQuad",stroke:"#f2666c"},
+{stroke:"#71B5DE",openEaseName:"easeOutCubic",endEaseName:"easeInCubic"}],
+mask:true,exposure:"bottom"});
 })
 </script>
 
-上图所示缓动函数：红 `easeOutQuad` `easeOutQuad`，蓝 `easeOutCubic` `easeInCubic`。
+上图所示缓动函数：红 `ease-out` `ease-out`，蓝 `ease-out-cubic` `ease-in-cubic`。
 
 示例组件：[Message 全局提示](/components/message/)，[Dropdown 下拉菜单](/components/dropdown/)。
 
@@ -91,35 +93,36 @@ mask:true，exposure:"bottom"});
 
 2. 如球类物体掉地上的后，反弹几次后停止。
 
-  - 曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换。
-  - 弹性动画最好结合alpha。
+  - 弹性动画最好结合 alpha。
+
+> 慎用Bounce或Elastic，这两种适用在特殊元素下，一般back即可满足页面上元素的弹动;
 
 <div id="J-Back"></div>
 
 <script>
 $(function (){
 new Motion("#J-Back",{lineData:[
-{open:[,end:[0.455,0.03,0.515,0.955],openEaseName:"easeOutBounce",endEaseName:"easeInOutQuad",stroke:"#70f266"},
-{open:[0.175,0.885,0.32,1.275],end:[0.6,-0.28,0.735,0.045],stroke:"#71B5DE",openEaseName:"easeOutBack",endEaseName:"easeInBack"}],
+{openEaseName:"easeOutBounce",endEaseName:"easeOutElastic",stroke:"#70f266"},
+{stroke:"#71B5DE",openEaseName:"easeOutBack",endEaseName:"easeInOutBack"}],
 mask:false,exposure:"top"});
 })
 </script>
 
-上图所示缓动函数：红 `easeOutBounce` `easeInOutQuad`，蓝 `easeOutBack` `easeInBack`。
+上图所示缓动函数：绿 `easeOutBounce` `easeOutElastic`( css 需自配)， 蓝 `ease-out-back` `ease-in-back`。
 
 
 ## 缓动函数
 
-Ant Design 提供了一套缓动函数规范动画行为。
+Ant Design 提供了一套缓动函数规范动画行为供组件使用。
 
-|名称               |参数                                      |说明与适用                  |
+|名称               |参数                                      |说明                |
 |-------------------|------------------------------------------|---------------------------|
-|@ease-out          | `cubic-bezier(0.215,0.61,0.355,1);`   |默认后缓动；适合元素展开时；    |
-|@ease-in           | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动；适合元素关闭时；    |
-|@ease-in-out       | `cubic-bezier(0.645,0.045,0.355,1);`  |默认前后缓动；适合元素移动；    |
-|@ease-out-back     | `cubic-bezier(0.18,0.89,0.32,1.28);`  |结束回动；适合弹出框出现时；    |
-|@ease-in-back      | `cubic-bezier(0.6,-0.3,0.74,0.05);`   |开始回动；适合弹出框关闭；     |
+|@ease-out          | `cubic-bezier(0.215,0.61,0.355,1);`   |默认后缓动；                  |
+|@ease-in           | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动；                 |
+|@ease-in-out       | `cubic-bezier(0.645,0.045,0.355,1);`  |默认前后缓动；                |
+|@ease-out-back     | `cubic-bezier(0.18,0.89,0.32,1.28);`  |结束回动；                    |
+|@ease-in-back      | `cubic-bezier(0.6,-0.3,0.74,0.05);`   |开始回动；                   |
 |@ease-in-out-back  | `cubic-bezier(0.68,-0.55,0.27,1.55);` |前后回动；                   |
-|@ease-out-circ     | `cubic-bezier(0.08,0.82,0.17,1);`     |圆形后缓动；适合元素展开时；    |
-|@ease-in-circ      | `cubic-bezier(0.6,0.04,0.98,0.34);`   |圆形前缓动；适合元素关闭时；    |
-|@ease-in-out-circ  | `cubic-bezier(0.78,0.14,0.15,0.86);`  |圆形缓动；适合元素移动；       |
+|@ease-out-circ     | `cubic-bezier(0.08,0.82,0.17,1);`     |圆形后缓动；                 |
+|@ease-in-circ      | `cubic-bezier(0.6,0.04,0.98,0.34);`   |圆形前缓动；                 |
+|@ease-in-out-circ  | `cubic-bezier(0.78,0.14,0.15,0.86);`  |圆形前后缓动；                   |
diff --git a/spec/motion.md b/spec/motion.md
index 1cbe4e33ee..0853d71c9c 100644
--- a/spec/motion.md
+++ b/spec/motion.md
@@ -1,7 +1,7 @@
 # 组件动画
 
 - category: 动画
-- order: 0
+- order: 2
 
 ---
 
@@ -206,7 +206,7 @@ var Test = React.createClass({
     }));
     return <div>
       <div className="motion-container">
-        <div ref="demo" className="motion-example">栗子</div>
+        <div ref="demo" className="motion-example"></div>
       </div>
       <div className="motion-select">
         <select onChange={this.handleChange}>{options}</select>
@@ -220,22 +220,22 @@ React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
 
 <style>
 .motion-container {
-  height: 150px;
-  line-height: 150px;
+  height: 190px;
+  line-height: 190px;
   text-align: center;
   margin-bottom: 20px;
 }
 .motion-example {
-  background: #4AAFDE;
-  width: 140px;
-  height: 140px;
-  line-height: 140px;
+  width: 180px;
+  height: 180px;
+  line-height: 180px;
   font-size: 18px;
   color: #fff;
   text-align: center;
   display: inline-block !important;
   border-radius: 8px;
   font-weight: bold;
+  background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
 }
 .motion-select {
   text-align: center;
diff --git a/spec/page-transition.md b/spec/page-transition.md
index 9622dbb4f0..ca5c751851 100644
--- a/spec/page-transition.md
+++ b/spec/page-transition.md
@@ -1,14 +1,10 @@
-# 转场动画
+# 转换动画
 
 - category: 动画
 - order: 1
 
 ---
 
-### 单页面转场动画
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
-
 ### 视觉连贯性三元素
 
 - Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
@@ -18,29 +14,35 @@
 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
 
 
-### 转场动画
+## 转场动画
 
-大页面转场可采用左出右入的形式。
+从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
 
-小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一。
+ - 大页面转场可采用左出右入的形式。
 
-如不是单页面，页面动画可以为只右入和间隔性出现。
+ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
 
 <script src="/static/TweenMax.min.js"></script>
 <script src="/static/motion.js"></script>
 
 <div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1QZ4gXdJeXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1BIdgXkloXXXXXXXX.mp4" type="video/mp4"></video>
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
 
+> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
+
+## 响应互动
+
+响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
+
+比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
 
 ### 可折叠面板
 
 对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
 
-1.被展开的信息区域内容按照一定的路劲依次进场。
+ - 被展开的信息区域内容按照一定的路径依次进场。
 
-2.信息元素在收起时照收齐点移动，在视觉上跟随关闭物体。
 
 <link rel="stylesheet" href="/static/motionDemo.css">
 <div class="video-player">
diff --git a/static/motion.js b/static/motion.js
index 7e360a2511..cb07202d65 100644
--- a/static/motion.js
+++ b/static/motion.js
@@ -1,673 +1,761 @@
 /**
  * Created by jljsj on 15/6/24.
  */
-$(function (){
-    var $S=function(typename){
-        if(typename.indexOf("<")>=0){
-            var node=$(typename);
-            var node_m=$(document.createElementNS("http://www.w3.org/2000/svg",node[0].tagName.toLowerCase()));
-            //var node_b=typename.replace(/<[^\s]*|[>,/>]*/gi,"");
-            for(var i=0;i<node[0].attributes.length;i++){
-                node_m.attr(node[0].attributes[i].name,node[0].attributes[i].value);
-            }
-            node_m.html(node.html());
-            return node_m
+$(function () {
+  var $S = function (typename) {
+    if (typename.indexOf("<") >= 0) {
+      var node = $(typename);
+      var node_m = $(document.createElementNS("http://www.w3.org/2000/svg", node[0].tagName.toLowerCase()));
+      //var node_b=typename.replace(/<[^\s]*|[>,/>]*/gi,"");
+      for (var i = 0; i < node[0].attributes.length; i++) {
+        node_m.attr(node[0].attributes[i].name, node[0].attributes[i].value);
+      }
+      node_m.html(node.html());
+      return node_m
+    }
+    return $(document.createElementNS("http://www.w3.org/2000/svg", typename))
+  };
+  var SVG = (function () {
+    var s_node = function (s) {
+      if (s) {
+        this.node = $S(s);
+      }
+    };
+    var n = s_node.prototype = {
+      _x: 0,
+      _y: 0,
+      _scaleX: 1,
+      _scaleY: 1,
+      _rotation: 0,
+      _skewX: 0,
+      _skewY: 0,
+      set id(id) {
+        this.attr("id", id)
+      },
+      get id() {
+        return this.attr("id")
+      },
+      set x(x) {
+        this.setTransform(x, this._y, this._scaleX, this._scaleY, this._rotation, this._skewX, this._skewY);
+      },
+      get x() {
+        return this._x
+      },
+      set y(y) {
+        this.setTransform(this._x, y, this._scaleX, this._scaleY, this._rotation, this._skewX, this._skewY);
+      },
+      get y() {
+        return this._y
+      },
+      set scale(x) {
+        this.setTransform(this._x, this._y, x, x, this._rotation, this._skewX, this._skewY);
+      },
+      get scale() {
+        return this._scaleX == this._scaleY ? this._scaleX : {scaleX: this._scaleX, scaleY: this._scaleY}
+      },
+      set scaleX(x) {
+        this.setTransform(this._x, this._y, x, this._scaleY, this._rotation, this._skewX, this._skewY);
+      },
+      get scaleX() {
+        return this._scaleX
+      },
+      set scaleY(y) {
+        this.setTransform(this._x, this._y, this._scaleX, y, this._rotation, this._skewX, this._skewY);
+      },
+      get scaleY() {
+        return this._scaleY
+      },
+      set rotation(r) {
+        this.setTransform(this._x, this._y, this._scaleX, this._scaleY, r, this._skewX, this._skewY);
+      },
+      get rotation() {
+        return this._rotation
+      },
+      set skewX(x) {
+        this.setTransform(this._x, this._y, this._scaleX, this._scaleY, this._rotation, x, this._skewY);
+      },
+      get skewX() {
+        return this._skewX
+      },
+      set skewY(y) {
+        this.setTransform(this._x, this._y, this._scaleX, this._scaleY, this._rotation, this._skewX, y);
+      },
+      get skewY() {
+        return this._skewY
+      },
+      set alpha(a) {
+        this.attr("opacity", a.toString())
+      },
+      get alpha() {
+        return Number(this.attr("opacity")) >= 0 ? Number(this.attr("opacity")) : 1
+      },
+      set mouseEnabled(Bool) {
+        if (Bool) {
+          this.attr("cursor", "pointer")
+        }
+      },
+      get mouseEnabled() {
+        return !!this.attr("cursor");
+      }
+    };
+    n.attr = function (o, d) {
+      return d ? this.node.attr(o, d) : this.node.attr(o)
+    };
+    n.css = function (o, d) {
+      return d ? this.node.css(o, d) : this.node.css(o);
+    };
+    n.children = function () {
+      return this.node.children()
+    };
+    n.find = function (s) {
+      return this.node.find(s);
+    };
+    n.addEventListener = function (event, func) {
+      return this.node.bind(event, func);
+    };
+    n.bind = function (event, func) {
+      return this.node.bind(event, func);
+    };
+    n.setTransform = function (x, y, scaleX, scaleY, rotation, skewX, skewY) {
+      var x = x || 0, y = y || 0, scaleX = scaleX >= 0 ? scaleX : 1, scaleY = scaleY >= 0 ? scaleY : 1,
+        rotation = rotation || 0, skewX = skewX || 0, skewY = skewY || 0;
+      this._x = x, this._y = y, this._scaleX = scaleX, this._scaleY = scaleY,
+        this._rotation = rotation, this._skewX = skewX, this._skewY = skewY;
+      var DEG_TO_RAD = Math.PI / 180;
+      var Matrix = {
+        a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0,
+        initialize: function (a, b, c, d, tx, ty) {
+          var a1 = this.a;
+          var b1 = this.b;
+          var c1 = this.c;
+          var d1 = this.d;
+          this.a = a * a1 + b * c1;
+          this.b = a * b1 + b * d1;
+          this.c = c * a1 + d * c1;
+          this.d = c * b1 + d * d1;
+          this.tx = tx * a1 + ty * c1 + this.tx;
+          this.ty = tx * b1 + ty * d1 + this.ty;
+          return this
         }
-        return  $(document.createElementNS("http://www.w3.org/2000/svg",typename))
+      };
+      if (rotation % 360) {
+        var r = rotation * DEG_TO_RAD;
+        var cos = Math.cos(r);
+        var sin = Math.sin(r);
+      } else {
+        cos = 1;
+        sin = 0;
+      }
+      var t = Matrix;
+      if (skewX || skewY) {
+        skewX = skewX * DEG_TO_RAD || 0;
+        skewY = skewY * DEG_TO_RAD || 0;
+        t.initialize(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0);
+        t.initialize(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);
+      } else {
+        t.initialize(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y);
+      }
+      var val = "matrix(" + t.a + "," + t.b + "," + t.c + "," + t.d + "," + t.tx + "," + t.ty + ")";
+      this.attr("transform", val)
+    };
+    n.addChild = function (elem) {
+      if (elem.node) this.node.append(elem.node);
+      else this.node.append(elem);
+    };
+    n.clear = function (index) {
+      if (index >= 0) {
+        this.node.children().eq(index).remove();
+        return
+      }
+      return this.node.children().remove();
     };
-    var SVG=(function () {
-        var s_node=function (s){
-            if(s){
-                this.node=$S(s);
-            }
-        };
-        var n=s_node.prototype={
-            _x:0,
-            _y:0,
-            _scaleX:1,
-            _scaleY:1,
-            _rotation:0,
-            _skewX:0,
-            _skewY:0,
-            set id(id){this.attr("id",id)},
-            get id(){return this.attr("id")},
-            set x(x){this.setTransform(x,this._y,this._scaleX,this._scaleY,this._rotation,this._skewX,this._skewY);},
-            get x(){return this._x},
-            set y(y){this.setTransform(this._x,y,this._scaleX,this._scaleY,this._rotation,this._skewX,this._skewY);},
-            get y(){return this._y},
-            set scale(x){this.setTransform(this._x,this._y,x,x,this._rotation,this._skewX,this._skewY);},
-            get scale(){return this._scaleX==this._scaleY?this._scaleX:{scaleX:this._scaleX,scaleY:this._scaleY}},
-            set scaleX(x){this.setTransform(this._x,this._y,x,this._scaleY,this._rotation,this._skewX,this._skewY);},
-            get scaleX(){return this._scaleX},
-            set scaleY(y){this.setTransform(this._x,this._y,this._scaleX,y,this._rotation,this._skewX,this._skewY);},
-            get scaleY(){return this._scaleY},
-            set rotation(r){this.setTransform(this._x,this._y,this._scaleX,this._scaleY,r,this._skewX,this._skewY);},
-            get rotation(){return this._rotation},
-            set skewX(x){this.setTransform(this._x,this._y,this._scaleX,this._scaleY,this._rotation,x,this._skewY);},
-            get skewX(){return this._skewX},
-            set skewY(y){this.setTransform(this._x,this._y,this._scaleX,this._scaleY,this._rotation,this._skewX,y);},
-            get skewY(){return this._skewY},
-            set alpha(a){this.attr("opacity", a.toString())},
-            get alpha(){return Number(this.attr("opacity"))>=0?Number(this.attr("opacity")):1},
-            set mouseEnabled(Bool){
-                if(Bool){
-                    this.attr("cursor","pointer")
-                }
-            },
-            get mouseEnabled(){
-                return !!this.attr("cursor");
-            }
-        };
-        n.attr=function (o,d){
-            return d?this.node.attr(o,d):this.node.attr(o)
-        };
-        n.css=function (o,d){
-            return d?this.node.css(o,d):this.node.css(o);
-        };
-        n.children=function (){
-            return this.node.children()
-        };
-        n.find=function (s){
-            return this.node.find(s);
+    n.setFilter = function (dom) {
+      this.attr("filter", "url(#" + dom.attr("id") + ")")
+    };
+    n.setClipPath = function (dom) {
+      this.attr("clip-path", "url(#" + dom.attr("id") + ")");
+    };
+    var SectorStr = function (point, r, angle, startAngle, inr) {
+      angle = (Math.abs(angle) > 360) ? 360 : angle;
+      var flag = angle > 180 ? 1 : 0;
+      startAngle = startAngle * Math.PI / 180;
+      var str = "";//"M"+point.x+" "+point.y;
+      str += " M" + (point.x + r * Math.cos(startAngle)) + " " + (point.y + r * Math.sin(startAngle))
+      var angleA, cx, cy;
+      if (angle >= 360) {
+        angleA = angle / 2;
+        angleA = angleA * Math.PI / 180;
+        angleA = angleA + startAngle;
+        for (var i = 0; i < 2; i++) {
+          cx = point.x + r * Math.cos(angleA + i * Math.PI);
+          cy = point.y + r * Math.sin(angleA + i * Math.PI);
+          str += "A" + r + " " + r + " 0 1 1 " + cx + " " + cy;
         }
-        n.addEventListener=function (event,func){
-            return this.node.bind(event,func);
-        };
-        n.bind=function (event,func){
-            return this.node.bind(event,func);
-        };
-        n.setTransform=function(x,y,scaleX,scaleY,rotation,skewX,skewY){
-            var x=x||0,y=y||0,scaleX=scaleX>=0?scaleX:1,scaleY=scaleY>=0?scaleY:1,
-                rotation=rotation||0,skewX=skewX||0,skewY=skewY||0;
-            this._x=x,this._y=y,this._scaleX=scaleX,this._scaleY=scaleY,
-                this._rotation=rotation,this._skewX=skewX,this._skewY=skewY;
-            var DEG_TO_RAD=Math.PI/180;
-            var Matrix={
-                a:1,b:0,c:0,d:1,tx:0,ty:0,
-                initialize:function(a, b,c,d,tx,ty){
-                    var a1 = this.a;
-                    var b1 = this.b;
-                    var c1 = this.c;
-                    var d1 = this.d;
-                    this.a  = a*a1+b*c1;
-                    this.b  = a*b1+b*d1;
-                    this.c  = c*a1+d*c1;
-                    this.d  = c*b1+d*d1;
-                    this.tx = tx*a1+ty*c1+this.tx;
-                    this.ty = tx*b1+ty*d1+this.ty;
-                    return this
-                }
-            };
-            if(rotation%360){
-                var r=rotation*DEG_TO_RAD;
-                var cos = Math.cos(r);
-                var sin = Math.sin(r);
-            }else {
-                cos = 1;
-                sin = 0;
-            }
-            var t=Matrix;
-            if (skewX || skewY) {
-                skewX = skewX*DEG_TO_RAD||0;
-                skewY = skewY*DEG_TO_RAD||0;
-                t.initialize(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);
-                t.initialize(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);
-            } else {
-                t.initialize(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);
-            }
-            var val="matrix("+t.a+","+ t.b+","+ t.c+","+ t.d+","+ t.tx+","+ t.ty+")";
-            this.attr("transform",val)
-        };
-        n.addChild=function (elem){
-            if(elem.node) this.node.append(elem.node);
-            else this.node.append(elem);
-        };
-        n.clear=function (index){
-            if(index>=0){
-                this.node.children().eq(index).remove();
-                return
-            }
-            return this.node.children().remove();
-        };
-        n.setFilter=function (dom){
-            this.attr("filter","url(#"+dom.attr("id")+")")
-        };
-        n.setClipPath=function(dom){
-            this.attr("clip-path","url(#"+dom.attr("id")+")");
-        };
-        var SectorStr=function (point,r,angle,startAngle,inr){
-            angle=(Math.abs(angle) > 360) ? 360 : angle;
-            var flag=angle>180?1:0;
-            startAngle = startAngle * Math.PI / 180;
-            var str="";//"M"+point.x+" "+point.y;
-            str+=" M"+(point.x + r * Math.cos(startAngle))+" "+(point.y+r * Math.sin(startAngle))
-            var angleA,cx,cy;
-            if(angle>=360){
-                angleA=angle/2;
-                angleA=angleA*Math.PI/180;
-                angleA=angleA+startAngle;
-                for(var i=0;i<2;i++){
-                    cx=point.x+r*Math.cos(angleA+i*Math.PI);
-                    cy=point.y+r*Math.sin(angleA+i*Math.PI);
-                    str+="A"+r+" "+r+" 0 1 1 "+cx+" "+cy;
-                }
-                str+=" Z";
-                return str;
-            }
-            angle=angle*Math.PI/180;
-            angleA=angle+startAngle;
+        str += " Z";
+        return str;
+      }
+      angle = angle * Math.PI / 180;
+      angleA = angle + startAngle;
 
-            cx = point.x + r * Math.cos(angleA);
-            cy = point.y + r * Math.sin(angleA);
-            str+="A"+r+" "+r+" 0 "+flag+" 1 "+cx+" "+cy;
-            if(angle<Math.PI*2){
-                str+=" L"+point.x+" "+point.y
-            }
-            //画内圆；
-            if(inr){
-                cx = point.x + inr * Math.cos(angleA);
-                cy = point.y + inr * Math.sin(angleA);
-                str+="L"+cx+" "+cy;
-                cx=point.x + inr * Math.cos(startAngle);
-                cy=point.y+ inr * Math.sin(startAngle);
-                str+="A"+inr+" "+inr+" 0 "+flag+" 0 "+cx+" "+cy;
-            }
-            str+=" Z";
-            return str
-        };
-        var Sprite=function (s){
-            if(s){
-                this.node=$S(s);
-            }
-        };
-        var sp=Sprite.prototype=new s_node();
+      cx = point.x + r * Math.cos(angleA);
+      cy = point.y + r * Math.sin(angleA);
+      str += "A" + r + " " + r + " 0 " + flag + " 1 " + cx + " " + cy;
+      if (angle < Math.PI * 2) {
+        str += " L" + point.x + " " + point.y
+      }
+      //画内圆；
+      if (inr) {
+        cx = point.x + inr * Math.cos(angleA);
+        cy = point.y + inr * Math.sin(angleA);
+        str += "L" + cx + " " + cy;
+        cx = point.x + inr * Math.cos(startAngle);
+        cy = point.y + inr * Math.sin(startAngle);
+        str += "A" + inr + " " + inr + " 0 " + flag + " 0 " + cx + " " + cy;
+      }
+      str += " Z";
+      return str;
+    };
+    var Sprite = function (s) {
+      if (s) {
+        this.node = $S(s);
+      }
+    };
+    var sp = Sprite.prototype = new s_node();
 
-        sp.drawRect=function (obj){
-            var t=new SVG.Sprite("rect");
-            t.attr(obj).appendTo(this.node);
-            return t
-        };
-        sp.drawCirc=function (obj){
-            var t=new SVG.Sprite("circle");
-            t.attr(obj).appendTo(this.node);
-            return t
-        };
-        sp.drawPolygon=function (obj){
-            var t=new SVG.Sprite("polygon");
-            t.attr(obj).appendTo(this.node);
-            return t
-        };
-        sp.drawPath=function (obj){
-            var t=new SVG.Sprite("path");
-            t.attr(obj).appendTo(this.node);
-            return t
-        };
-        sp.drawEllipse=function (obj){
-            var t=new SVG.Sprite("ellipse");
-            t.attr(obj).appendTo(this.node);
-            return t
-        };
-        sp.drawSector=function (point,r,angle,startAngle,color,line,lineColor){
-            var str=SectorStr(point,r,angle,startAngle,1);
-            var m=$S("path").attr("fill",color);
-            if(line){
-                m.attr({stroke:lineColor,"stroke-width":line});
-            }
-            m.attr("d",str).appendTo(this.node);
-            return m
-        };
-        sp.drawAnnular=function (point,r,inr,angle,startAngle,color,line,lineColor){
-            var str=SectorStr(point,r,angle,startAngle,inr);
-            var m=$S("path").attr("fill",color);
-            if(line){
-                m.attr({stroke:lineColor,"stroke-width":line});
-            }
-            m.attr("d",str).appendTo(this.node);
-            return m
-        };
+    sp.drawRect = function (obj) {
+      var t = new SVG.Sprite("rect");
+      t.attr(obj).appendTo(this.node);
+      return t
+    };
+    sp.drawCirc = function (obj) {
+      var t = new SVG.Sprite("circle");
+      t.attr(obj).appendTo(this.node);
+      return t
+    };
+    sp.drawPolygon = function (obj) {
+      var t = new SVG.Sprite("polygon");
+      t.attr(obj).appendTo(this.node);
+      return t
+    };
+    sp.drawPath = function (obj) {
+      var t = new SVG.Sprite("path");
+      t.attr(obj).appendTo(this.node);
+      return t
+    };
+    sp.drawEllipse = function (obj) {
+      var t = new SVG.Sprite("ellipse");
+      t.attr(obj).appendTo(this.node);
+      return t
+    };
+    sp.drawSector = function (point, r, angle, startAngle, color, line, lineColor) {
+      var str = SectorStr(point, r, angle, startAngle, 1);
+      var m = $S("path").attr("fill", color);
+      if (line) {
+        m.attr({stroke: lineColor, "stroke-width": line});
+      }
+      m.attr("d", str).appendTo(this.node);
+      return m
+    };
+    sp.drawAnnular = function (point, r, inr, angle, startAngle, color, line, lineColor) {
+      var str = SectorStr(point, r, angle, startAngle, inr);
+      var m = $S("path").attr("fill", color);
+      if (line) {
+        m.attr({stroke: lineColor, "stroke-width": line});
+      }
+      m.attr("d", str).appendTo(this.node);
+      return m
+    };
 
-        function svg(id){
-            this.initialize(id);
-        }
-        var s=svg.prototype=new Sprite();
-        s.initialize=function (id){
-            this.node=$S("svg");
-            this.attr({"width":"100%","height":"100%"});
-            this.defs=new Sprite("defs");
-            this.addChild(this.defs);
-            if(id)
-            $(id).append(this.node);
-            else
-            return this;
-        };
-        var filter={
-            blur : function (x, y) {
-                if (x == null) {
-                    x = 2;
-                }
-                var def = y == null ? x : [x, y];
-                var t=document.createElementNS("http://www.w3.org/2000/svg","feGaussianBlur");
-                t.setAttribute("stdDeviation",def);
-                var filter=$S("filter");
-                filter.attr({x:"-50%",y:"-50%","width":"200%","height":"200%"});
-                filter.append(t);
-                Object.defineProperty(filter,"id",{
-                    get:function (){
-                        return filter.attr("id");
-                    },
-                    set:function (id){
-                        filter.attr("id",id);
-                    }
-                });
-                return filter
-            },
-            goo:function (blur){
-                var t=document.createElementNS("http://www.w3.org/2000/svg","feGaussianBlur");
-                t.setAttribute("in","SourceGraphic");
-                t.setAttribute("stdDeviation",blur);
-                t.setAttribute("result","blur");
-                var matrix=document.createElementNS("http://www.w3.org/2000/svg","feColorMatrix");
-                matrix.setAttribute("in","blur");
-                matrix.setAttribute("mode","matrix");
-                matrix.setAttribute("values","1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6");
-                matrix.setAttribute("result","goo");
-                var com=document.createElementNS("http://www.w3.org/2000/svg","feComposite");
-                com.setAttribute("in","SourceGraphic");
-                com.setAttribute("in2","goo");
-                com.setAttribute("operator","atop");
-                var filter=$S("filter");
-                filter.append([t,matrix,com]);
-                return filter
-            },
-            mask:function (tb,obj){
-                var t=$S(tb);
-                t.attr(obj);
-                var cp=$S("clipPath");
-                cp.append(t);
-                Object.defineProperty(cp,"id",{
-                    get:function (){
-                        return cp.attr("id");
-                    },
-                    set:function (id){
-                        cp.attr("id",id);
-                    }
-                });
-                //var cp=document.createElementNS("http://www.w3.org/2000/svg","clipPath");//$S("clippath");
-                //cp.appendChild(t[0]);
-                //Object.defineProperty(cp,"id",{
-                //    get:function (){
-                //        return cp.getAttribute("id");
-                //    },
-                //    set:function (id){
-                //        cp.setAttribute("id",id);
-                //    }
-                //});
-                return cp;
-            }
-        };
-        var text=function (_text,_data){
-            this.node=$S("text");
-            this.node.text(_text);
-            if(_data){
-                this.node.attr(_data);
-            }
-        };
-        var t=text.prototype=new s_node;
-        t.tspan=function (_text,_data){
-            this.node=$S("tspan");
-            this.node.text(_text);
-            if(_data){
-                this.node.attr(_data);
-            }
-        };
-        var ts= t.tspan.prototype=new s_node();
+    function svg(id) {
+      this.initialize(id);
+    }
 
-        svg.SectorStr=SectorStr;
-        svg.filter=filter;
-        svg.Sprite=Sprite;
-        svg.Text=text;
-        svg.Text.tSpan= t.tspan;
-        return svg
-    }());
-    var Point=function (x,y){
-        this.x=x;
-        this.y=y;
+    var s = svg.prototype = new Sprite();
+    s.initialize = function (id) {
+      this.node = $S("svg");
+      this.attr({"width": "100%", "height": "100%"});
+      this.defs = new Sprite("defs");
+      this.addChild(this.defs);
+      if (id)
+        $(id).append(this.node);
+      else
         return this;
     };
-    var T=TweenMax;
-    var _playBox=function (svg,startFunc,pauseFunc){
-        var playBox=new SVG.Sprite("g");
-        playBox.mouseEnabled=true;
+    var filter = {
+      blur: function (x, y) {
+        if (x == null) {
+          x = 2;
+        }
+        var def = y == null ? x : [x, y];
+        var t = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
+        t.setAttribute("stdDeviation", def);
+        var filter = $S("filter");
+        filter.attr({x: "-50%", y: "-50%", "width": "200%", "height": "200%"});
+        filter.append(t);
+        Object.defineProperty(filter, "id", {
+          get: function () {
+            return filter.attr("id");
+          },
+          set: function (id) {
+            filter.attr("id", id);
+          }
+        });
+        return filter
+      },
+      goo: function (blur) {
+        var t = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
+        t.setAttribute("in", "SourceGraphic");
+        t.setAttribute("stdDeviation", blur);
+        t.setAttribute("result", "blur");
+        var matrix = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix");
+        matrix.setAttribute("in", "blur");
+        matrix.setAttribute("mode", "matrix");
+        matrix.setAttribute("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6");
+        matrix.setAttribute("result", "goo");
+        var com = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
+        com.setAttribute("in", "SourceGraphic");
+        com.setAttribute("in2", "goo");
+        com.setAttribute("operator", "atop");
+        var filter = $S("filter");
+        filter.append([t, matrix, com]);
+        return filter
+      },
+      mask: function (tb, obj) {
+        var t = $S(tb);
+        t.attr(obj);
+        var cp = $S("clipPath");
+        cp.append(t);
+        Object.defineProperty(cp, "id", {
+          get: function () {
+            return cp.attr("id");
+          },
+          set: function (id) {
+            cp.attr("id", id);
+          }
+        });
+        //var cp=document.createElementNS("http://www.w3.org/2000/svg","clipPath");//$S("clippath");
+        //cp.appendChild(t[0]);
+        //Object.defineProperty(cp,"id",{
+        //    get:function (){
+        //        return cp.getAttribute("id");
+        //    },
+        //    set:function (id){
+        //        cp.setAttribute("id",id);
+        //    }
+        //});
+        return cp;
+      }
+    };
+    var text = function (_text, _data) {
+      this.node = $S("text");
+      this.node.text(_text);
+      if (_data) {
+        this.node.attr(_data);
+      }
+    };
+    var t = text.prototype = new s_node;
+    t.tspan = function (_text, _data) {
+      this.node = $S("tspan");
+      this.node.text(_text);
+      if (_data) {
+        this.node.attr(_data);
+      }
+    };
+    var ts = t.tspan.prototype = new s_node();
 
-        playBox.drawRect({width:"100%",height:"100%",fill:"rgba(0,0,0,.35)"});
-        var playBtn=new SVG.Sprite("g");
-        playBox.addChild(playBtn);
-        playBtn.drawCirc({r:30,fill:"rgba(255,255,255,1)"});
+    svg.SectorStr = SectorStr;
+    svg.filter = filter;
+    svg.Sprite = Sprite;
+    svg.Text = text;
+    svg.Text.tSpan = t.tspan;
+    return svg
+  }());
+  var Point = function (x, y) {
+    this.x = x;
+    this.y = y;
+    return this;
+  };
+  var T = TweenMax;
+  var _playBox = function (svg, startFunc, pauseFunc) {
+    var playBox = new SVG.Sprite("g");
+    playBox.mouseEnabled = true;
 
+    playBox.drawRect({width: "100%", height: "100%", fill: "rgba(0,0,0,.35)"});
+    var playBtn = new SVG.Sprite("g");
+    playBox.addChild(playBtn);
+    playBtn.drawCirc({r: 30, fill: "rgba(255,255,255,1)"});
 
-        var playPoints={
-            play:"M-10 -15 L15 0 L-10 15 L-10 0Z M-10 -15 L15 0 L-10 15 L-10 0Z",
-            pause:"M-12 -15 L-3 -15 L-3 15 L-12 15Z M3 -15 L12 -15 L12 15 L3 15Z"
-        };
-        var shanjiao=playBtn.drawPath({d:playPoints.play,fill:"#999"});
-        var bBool=false;
-        var animate_p3 = function(p,_arr) {
-            var a_arr=[];
-            for(var i=0;i<_arr.length;i++){
-                a_arr.push(_arr[i].x,_arr[i].y)
-            }
-            for(var i=0;i<a_arr.length;i++){
-                if(i==0||i==8){
-                    a_arr[i]="M"+a_arr[i];
-                }else if(i==2||i==4||i==6||i==12||i==14){
-                    a_arr[i]="L"+a_arr[i];
-                }else if(i==7||i==15){
-                    a_arr[i]=a_arr[i]+"Z";
-                }
-            }
-            p.attr({
-                d: a_arr.join().replace(/,/g," ")
-            });
 
-        };
-        function twennBtn(p,arr,c_arr){
-            for(var i=0;i<arr.length;i++){
-                T.killTweensOf(arr[i]);
-                T.to(arr[i],.6,{x:c_arr[i].x ,y:c_arr[i].y ,delay:Math.random() *.2,onUpdate:animate_p3,onUpdateParams:[p,arr],ease:Elastic.easeOut})
-            }
-        }
-        playBox.addEventListener("click",function (e){
-            var _a= playPoints.play.replace( /[MLZ]/g,"").split(" ");
-            var _b= playPoints.pause.replace( /[MLZ]/g,"").split(" ");
-            var _arr=[],_barr=[];
-            for(var i=0;i<_a.length;i+=2){
-                var a={},b={};
-                a.x=_a[i];
-                a.y=_a[i+1];
-                b.x=_b[i];
-                b.y=_b[i+1];
-                _arr.push(a);
-                _barr.push(b);
-            }
-            if(!bBool){
-                twennBtn(shanjiao,_arr,_barr);
-                T.to(playBox,.5,{delay:.3,alpha:0,onComplete:startFunc});
-                bBool=true;
-            }else{
-                twennBtn(shanjiao,_barr,_arr);
-                T.to(playBox,.5,{alpha:1,onStart:pauseFunc});
-                bBool=false
-            }
-        });
-        function resize(){
-            playBtn.x=svg.node.width()/2;
-            playBtn.y=svg.node.height()/2;
-        };
-        resize();
-        $(window).bind("resize", resize);
-        return playBox;
+    var playPoints = {
+      play: "M-10 -15 L15 0 L-10 15 L-10 0Z M-10 -15 L15 0 L-10 15 L-10 0Z",
+      pause: "M-12 -15 L-3 -15 L-3 15 L-12 15Z M3 -15 L12 -15 L12 15 L3 15Z"
     };
-    var newMotion=function (id,obj){
-        if(!id||!obj){
-            throw new Error("数据错误");
-        }
-        var self=this;
-        self.box=$(id);
-        self.box.css({"width":800});
-        if(self.box.width()<500){
-            self.box.css("height",600);
-        }else{
-            self.box.css("height",300)
+    var shanjiao = playBtn.drawPath({d: playPoints.play, fill: "#999"});
+    var bBool = false;
+    var animate_p3 = function (p, _arr) {
+      var a_arr = [];
+      for (var i = 0; i < _arr.length; i++) {
+        a_arr.push(_arr[i].x, _arr[i].y)
+      }
+      for (var i = 0; i < a_arr.length; i++) {
+        if (i == 0 || i == 8) {
+          a_arr[i] = "M" + a_arr[i];
+        } else if (i == 2 || i == 4 || i == 6 || i == 12 || i == 14) {
+          a_arr[i] = "L" + a_arr[i];
+        } else if (i == 7 || i == 15) {
+          a_arr[i] = a_arr[i] + "Z";
         }
-        self.data=obj;
-        self.svg=new SVG(id);
-        self.svg.css("background-color","#f3f3f3");
-        self.w=self.box.width();
-        self.h=self.box.height();
-        self.tweenArr=[];
-        self.t_time=1;
-        self.d_time=.5;
-        self.tweenAllTime=2.5;
+      }
+      p.attr({
+        d: a_arr.join().replace(/,/g, " ")
+      });
 
-        self.addElement();
-
-        function resize(e){
-            self.windowResize(self)
-        }
-        resize();
-        $(window).bind("resize", resize);
-    };
-    var nm=newMotion.prototype={
     };
-    nm.windowResize=function (self){
-        var s=self.box.parent().width()/800>1?1:self.box.parent().width()/800;
-        self.box.css({"transform": "scale("+s+")","transform-origin":"0 0"});
-    };
-    nm.addElement=function (){
-        var self=this;
-        //绘制坐标系统；
-        self.coords=new SVG.Sprite("g");
-        self.svg.addChild(self.coords);
-        var coordsStr="M80 50 L80 250 L480 250";
-        self.coords.drawPath({d:coordsStr,fill:"none","stroke-width":2,stroke:"#d9d9d9"});
-        var timerTxt=new SVG.Text("timer",{fill:"#999"});
-        self.coords.addChild(timerTxt);
-        timerTxt.x=240;
-        timerTxt.y=275;
-        var yaxis=new SVG.Text("Y-axis",{fill:"#999"});
-        yaxis.width=20;
-        yaxis.x=20;
-        yaxis.y=150;
-        self.coords.addChild(yaxis);
-        //动画示例元素；
-        self.tweenMc=new SVG.Sprite("g");
-        if(self.data.mask){
-            var mask=new SVG.filter.mask("rect",{width:260,height:200});
-            mask.id="mask";
-            self.svg.defs.addChild(mask);
-            self.tweenMc.setClipPath(mask);
-        }
 
-        self.svg.addChild(self.tweenMc);
-        self.tweenMc.x=500;
-        self.tweenMc.y=50;
-        //坐标线；
-        /**
-         * 以三次贝塞尔曲线
-         * 时间长4秒
-         * －分三段－
-         * 前缓动－－linear--后缓动
-         * 1－－.5－－1
-         */
-        var c_w=360,c_h=180,
-            c_x=100,c_y=250,ct_y=70,
-            t_w=c_w/ self.tweenAllTime,tt_w=t_w+c_x,d_w=(self.t_time+self.d_time)/self.tweenAllTime;
+    function twennBtn(p, arr, c_arr) {
+      for (var i = 0; i < arr.length; i++) {
+        T.killTweensOf(arr[i]);
+        T.to(arr[i], .6, {
+          x: c_arr[i].x,
+          y: c_arr[i].y,
+          delay: Math.random() * .2,
+          onUpdate: animate_p3,
+          onUpdateParams: [p, arr],
+          ease: Elastic.easeOut
+        })
+      }
+    }
 
-        for(var i=0;i<self.data.lineData.length;i++){
-            var tb=new SVG.Sprite("g");
-            self.coords.addChild(tb);
-            var str="M80 250";
-            var open=self.data.lineData[i].open;
-            if(open.length!==4&&open.length!==0){
-                throw new Error(open+"数据错误");
-            }
-            if(open.length!==0){
-                str+="L100 250"+"C"+(open[0]*t_w+c_x)+","+(c_y-open[1]*c_h)+" "+(open[2]*t_w+c_x)+","+(c_y-open[3]*c_h)+" "+tt_w+","+ct_y
-            }else{
-                str+="L100 250"+"L"+tt_w+","+ct_y;
-            }
-            tb.drawPath({d:str,fill:"none","stroke-width":2,stroke:self.data.lineData[i].stroke||"#999","stroke-dasharray":"0 100%"});
+    playBox.addEventListener("click", function (e) {
+      var _a = playPoints.play.replace(/[MLZ]/g, "").split(" ");
+      var _b = playPoints.pause.replace(/[MLZ]/g, "").split(" ");
+      var _arr = [], _barr = [];
+      for (var i = 0; i < _a.length; i += 2) {
+        var a = {}, b = {};
+        a.x = _a[i];
+        a.y = _a[i + 1];
+        b.x = _b[i];
+        b.y = _b[i + 1];
+        _arr.push(a);
+        _barr.push(b);
+      }
+      if (!bBool) {
+        twennBtn(shanjiao, _arr, _barr);
+        T.to(playBox, .5, {delay: .3, alpha: 0, onComplete: startFunc});
+        bBool = true;
+      } else {
+        twennBtn(shanjiao, _barr, _arr);
+        T.to(playBox, .5, {alpha: 1, onStart: pauseFunc});
+        bBool = false
+      }
+    });
+    function resize() {
+      playBtn.x = svg.node.width() / 2;
+      playBtn.y = svg.node.height() / 2;
+    }
 
-            var e_x=c_w*d_w+c_x;
-            str="M"+tt_w+","+ct_y+"L"+e_x+","+ct_y;
-            tb.drawPath({d:str,fill:"none","stroke-width":2,stroke:self.data.lineData[i].stroke||"#999","stroke-dasharray":"0 100%"});
-            var end=self.data.lineData[i].end;
-            if(end.length!==4&&end.length!==0){
-                throw new Error(end+"数据错误");
-            }
-            str="M"+e_x+","+ct_y;
-            if(end.length!==0){
-                str+="C"+(end[0]*t_w+e_x)+","+(end[1]*c_h+ct_y)+" "+(end[2]*t_w+e_x)+","+(end[3]*c_h+ct_y)+" "+(c_w+c_x-20)+","+c_y+"L"+(c_w+c_x)+","+c_y
-            }else{
-                if(self.data.lineData[i].endEaseName!=="null"){
-                    str+="L"+(c_w+c_x-20)+","+c_y+"L"+(c_w+c_x)+","+c_y;
-                }else{
-                    str+="L"+e_x+","+ct_y;
-                }
-            }
-            tb.drawPath({d:str,fill:"none","stroke-width":2,stroke:self.data.lineData[i].stroke||"#999","stroke-dasharray":"0 100%"});
+    resize();
+    $(window).bind("resize", resize);
+    return playBox;
+  };
+  var newMotion = function (id, obj) {
+    if (!id || !obj) {
+      throw new Error("数据错误");
+    }
+    var self = this;
+    self.box = $(id);
+    self.box.css({"width": 800});
+    if (self.box.width() < 500) {
+      self.box.css("height", 600);
+    } else {
+      self.box.css("height", 300)
+    }
+    self.data = obj;
+    self.svg = new SVG(id);
+    self.svg.css("background-color", "#f3f3f3");
+    self.w = self.box.width();
+    self.h = self.box.height();
+    self.tweenArr = [];
+    self.t_time = .5;
+    self.d_time = .5;
+    self.tweenAllTime = self.t_time * 2 + self.d_time;
 
-            //元素插入盒子里；
-            var circ=new SVG.Sprite("circle");
-            circ.attr({"r":10,fill:"none","stroke-width":6,stroke:self.data.lineData[i].stroke||"#999"});
-            self.tweenMc.addChild(circ);
-            if(self.data.exposure=="left"||!self.data.exposure){
-                circ.x=self.data.mask?-20:20;
-                circ.y=50+i*110//self.data.mask?240:180;
-            }else if(self.data.exposure=="top"){
-                circ.x=100+i*100//self.data.mask?-20:20;
-                circ.y=self.data.mask?-20:20;
-            }else if(self.data.exposure=="right"){
-                circ.x=self.data.mask?280:220;
-                circ.y=50+i*110//self.data.mask?240:180;
-            }else{
-                circ.x=100+i*100//self.data.mask?-20:20;
-                circ.y=self.data.mask?240:180;
-            }
+    self.addElement();
 
-        }
+    function resize(e) {
+      self.windowResize(self)
+    }
 
-        //建播放按钮；
-        self.playBox=_playBox(self.svg,function (){
-            self.start(self);
-        },function (){
-            self.pause(self);
-        });
-        self.svg.addChild(self.playBox);
-    };
-    nm.pause=function (self){
-        for(var i=0;i<self.tweenArr.length;i++){
-            var tl=self.tweenArr[i];
-            tl.pause();
-        }
-    };
-    nm.resume=function (self){
-        for(var i=0;i<self.tweenArr.length;i++){
-            var tl=self.tweenArr[i];
-            tl.resume();
+    resize();
+    $(window).bind("resize", resize);
+  };
+  var nm = newMotion.prototype = {};
+  nm.windowResize = function (self) {
+    var s = self.box.parent().width() / 800 > 1 ? 1 : self.box.parent().width() / 800;
+    self.box.css({"transform": "scale(" + s + ")", "transform-origin": "0 0"});
+  };
+  nm.addElement = function () {
+    var self = this;
+    //绘制坐标系统；
+    self.coords = new SVG.Sprite("g");
+    self.svg.addChild(self.coords);
+    var coordsStr = "M80 50 L80 250 L480 250";
+    self.coords.drawPath({d: coordsStr, fill: "none", "stroke-width": 2, stroke: "#d9d9d9"});
+    var timerTxt = new SVG.Text("timer", {fill: "#999"});
+    self.coords.addChild(timerTxt);
+    timerTxt.x = 240;
+    timerTxt.y = 275;
+    var yaxis = new SVG.Text("Y-axis", {fill: "#999"});
+    yaxis.width = 20;
+    yaxis.x = 20;
+    yaxis.y = 150;
+    self.coords.addChild(yaxis);
+    //动画示例元素；
+    self.tweenMc = new SVG.Sprite("g");
+    if (self.data.mask) {
+      var mask = new SVG.filter.mask("rect", {width: 260, height: 200});
+      mask.id = "mask";
+      self.svg.defs.addChild(mask);
+      self.tweenMc.setClipPath(mask);
+    }
+
+    self.svg.addChild(self.tweenMc);
+    self.tweenMc.x = 500;
+    self.tweenMc.y = 50;
+    //坐标线；
+    /**
+     * 以三次贝塞尔曲线
+     * 时间长4秒
+     * －分三段－
+     * linear
+     * .5－－.5－－.5
+     */
+    var c_w = 340, c_h = 180,
+      c_x = 100, c_y = 250, ct_y = 70,
+      t_w = c_w * (self.t_time / self.tweenAllTime), tt_w = t_w + c_x, d_w = (self.t_time + self.d_time) / self.tweenAllTime;
+
+    for (var i = 0; i < self.data.lineData.length; i++) {
+      var tb = new SVG.Sprite("g");
+      self.coords.addChild(tb);
+      var str = "M80 250";
+      var open = self.data.lineData[i].open || self.data.lineData[i].openEaseName || "Linear";
+      /*if (open.length !== 4 && open.length !== 0 && typeof open !== 'string') {
+       throw new Error(open + "数据错误");
+       }*/
+      if (typeof open !== 'string' && open.length !== 0 && open.length === 4) {
+        str += "L100 250" + "C" + (open[0] * t_w + c_x) + "," + (c_y - open[1] * c_h) + " " + (open[2] * t_w + c_x) + "," + (c_y - open[3] * c_h) + " " + tt_w + "," + ct_y
+      } else if (typeof open === 'string') {
+        var _ease = EaseLookup.find(open);
+        if (_ease) {
+          str += 'L100 250';
+          for (var ii = 0; ii < t_w; ii++) {
+            var at = _ease.getRatio(ii / t_w);//延用grennsock的缓运。。
+            //console.log(1-Tween.Bounce.easeOut(ii,100,-100,t_w)/100,at);
+            str += 'L' + (c_x + ii) + "," + (c_y - c_h * at);
+          }
+        } else {
+          str += "L100 250" + "L" + tt_w + "," + ct_y;
         }
-    };
-    nm.start=function (self){
-        if(self.tweenArr.length){
-            self.resume(self);
-            return
+      }
+      tb.drawPath({
+        d: str,
+        fill: "none",
+        "stroke-width": 2,
+        stroke: self.data.lineData[i].stroke || "#999",
+        "stroke-dasharray": "0 100%"
+      });
+
+      var e_x = c_w * d_w + c_x;
+      str = "M" + tt_w + "," + ct_y + "L" + e_x + "," + ct_y;
+      tb.drawPath({
+        d: str,
+        fill: "none",
+        "stroke-width": 2,
+        stroke: self.data.lineData[i].stroke || "#999",
+        "stroke-dasharray": "0 100%"
+      });
+      var end = self.data.lineData[i].end || self.data.lineData[i].endEaseName || "Linear";
+
+      str = "M" + e_x + "," + ct_y;
+      if (typeof open !== 'string' && end.length !== 0 && end.length === 4) {
+        str += "C" + (end[0] * t_w + e_x) + "," + (end[1] * c_h + ct_y) + " " + (end[2] * t_w + e_x) + "," + (end[3] * c_h + ct_y) + " " + (c_w + c_x ) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y
+      } else if (typeof end === 'string') {
+        var e_ease = EaseLookup.find(end);
+        if (e_ease) {
+          for (var eii = 0; eii < t_w; eii++) {
+            var eat = e_ease.getRatio(eii / t_w);
+            str += 'L' + (e_x + eii) + "," + ( c_h * eat + ct_y);
+          }
+          str += "L" + (c_w + c_x + 20) + "," + c_y;
+        } else {
+          str += "L" + (c_w + c_x ) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y;
+          /*if (self.data.lineData[i].endEaseName !== "null") {
+            str += "L" + (c_w + c_x ) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y;
+          } else {
+            str += "L" + e_x + "," + ct_y;
+          }*/
         }
-        var lineBox=self.coords.find("g");
-        for(var i=0;i<lineBox.length;i++){
-            var m=lineBox.eq(i);
-            var tl=new TimelineMax({repeat:-1,repeatDelay:1});
-            self.tweenArr.push(tl);
-            for(var ii=0;ii< m.find("path").length;ii++){
-                var p=m.find("path").eq(ii);
-                var lineLength=p[0].getTotalLength();
-                var time= 1,_ease=Power2.easeInOut;
+      }
+      tb.drawPath({
+        d: str,
+        fill: "none",
+        "stroke-width": 2,
+        stroke: self.data.lineData[i].stroke || "#999",
+        "stroke-dasharray": "0 100%"
+      });
+
+      //元素插入盒子里；
+      var circ = new SVG.Sprite("circle");
+      circ.attr({"r": 10, fill: "none", "stroke-width": 6, stroke: self.data.lineData[i].stroke || "#999"});
+      self.tweenMc.addChild(circ);
+      if (self.data.exposure == "left" || !self.data.exposure) {
+        circ.x = self.data.mask ? -20 : 20;
+        circ.y = 50 + i * 110;//self.data.mask?240:180;
+      } else if (self.data.exposure == "top") {
+        circ.x = 100 + i * 100;//self.data.mask?-20:20;
+        circ.y = self.data.mask ? -20 : 20;
+      } else if (self.data.exposure == "right") {
+        circ.x = self.data.mask ? 280 : 220;
+        circ.y = 50 + i * 110;//self.data.mask?240:180;
+      } else {
+        circ.x = 100 + i * 100;//self.data.mask?-20:20;
+        circ.y = self.data.mask ? 240 : 180;
+      }
 
-                if(ii==0){
-                    time= self.t_time;
-                    _ease=EaseLookup.find(self.data.lineData[i].openEaseName);
-                }
-                else if(ii==1){
-                    time= self.d_time;
-                    _ease=Power0.easeNone;
-                }
-                else {
-                    time= self.t_time;
-                    _ease=EaseLookup.find(self.data.lineData[i].endEaseName);
-                }
-                if(!self.data.lineData[i].open.length){
-                    _ease=Linear.easeNone;
-                }
-                tl.add(T.to(p,time,{"stroke-dasharray":lineLength+" 100%",ease:_ease}))
-                //tl.to(p,time,{"stroke-dasharray":"100% 100%",ease: Power2.easeInOut})
-            }
-            //circ动画
-            var ctl=new TimelineMax({repeat:-1,repeatDelay:1});
-            var ciric=self.tweenMc.children().eq(i);
+    }
 
+    //建播放按钮；
+    self.playBox = _playBox(self.svg, function () {
+      self.start(self);
+    }, function () {
+      self.pause(self);
+    });
+    self.svg.addChild(self.playBox);
+  };
+  nm.pause = function (self) {
+    for (var i = 0; i < self.tweenArr.length; i++) {
+      var tl = self.tweenArr[i];
+      tl.pause();
+    }
+  };
+  nm.resume = function (self) {
+    for (var i = 0; i < self.tweenArr.length; i++) {
+      var tl = self.tweenArr[i];
+      tl.resume();
+    }
+  };
+  nm.start = function (self) {
+    if (self.tweenArr.length) {
+      self.resume(self);
+      return
+    }
+    var lineBox = self.coords.find("g");
+    for (var i = 0; i < lineBox.length; i++) {
+      var m = lineBox.eq(i);
+      var tl = new TimelineMax({repeat: -1, repeatDelay: 1});
+      self.tweenArr.push(tl);
+      for (var ii = 0; ii < m.find("path").length; ii++) {
+        var p = m.find("path").eq(ii);
+        var lineLength = p[0].getTotalLength();
+        var time = 1, _ease = Power2.easeInOut;
 
-            var oease=self.data.lineData[i].open.length?EaseLookup.find(self.data.lineData[i].openEaseName):Power0.easeNone,
-                eease=self.data.lineData[i].end.length?EaseLookup.find(self.data.lineData[i].endEaseName):Power0.easeNone;
-            //console.log(self.data.lineData[i].open,oease,eease,i);
-            //if(self.data.lineData[i].openEaseName=="Bounce.easeOut")
-            if(self.data.lineData[i].openEaseName&&self.data.lineData[i].openEaseName.indexOf("Bounce")>=0){
-                if(self.data.lineData[i].openEaseName.indexOf("InOut")>=0){
-                    oease=Bounce.easeInOut
-                }else if(self.data.lineData[i].openEaseName.indexOf("In")>=0){
-                    oease=Bounce.easeIn
-                }else{
-                    oease=Bounce.easeOut
-                }
-            }
-            var cx={},_x={};
-            if(self.data.exposure=="left"||!self.data.exposure){
-                _x={x:240};
-                cx={x:self.data.mask?-20:20};
-            }else if(self.data.exposure=="top"){
-                _x={y:180};
-                cx={y:self.data.mask?-20:20};
-            }else if(self.data.exposure=="right"){
-                _x={x:20};
-                cx={x:self.data.mask?280:220};
-            }else{
-                _x={y:20};
-                cx={y:self.data.mask?240:180};
-            }
-            if(self.data.lineData[i].endEaseName!=="null"){
-                _x.ease=oease,cx.ease=eease,cx.delay=self.d_time;
-            }else{
-                var t=cx;
-                cx={};
-                cx.startAt= t;
-                cx.delay=self.d_time;
-                _x.ease=oease,cx.ease=eease;
-            }
-            ctl.to(ciric,self.t_time,_x).to(ciric,self.t_time,cx);
-            self.tweenArr.push(ctl);
+        if (ii == 0) {
+          time = self.t_time;
+          //_ease = EaseLookup.find(self.data.lineData[i].openEaseName);
         }
-    };
-    window.Motion=newMotion;
+        else if (ii == 1) {
+          time = self.d_time;
+          //_ease = Power0.easeNone;
+        }
+        else {
+          time = self.t_time;
+          //_ease = EaseLookup.find(self.data.lineData[i].endEaseName);
+        }
+        /*if (!self.data.lineData[i].open.length) {
+         _ease = Linear.easeNone;
+         }*/
+        tl.add(T.to(p, time, {"stroke-dasharray": lineLength + " 100%", ease: Linear.easeNone}));
+        //tl.to(p,time,{"stroke-dasharray":"100% 100%",ease: Power2.easeInOut})
+      }
+      //circ动画
+      var ctl = new TimelineMax({repeat: -1, repeatDelay: 1});
+      var ciric = self.tweenMc.children().eq(i);
 
-    var motionVideo={
-        init:function (){
-            var self=this;
-            self.videoBox=$(".video-player");
-            for(var i=0;i<self.videoBox.length;i++){
-                var svg=new SVG();
-                self.videoBox.eq(i).append(svg.node);
-                var video=self.videoBox.eq(i).find("video");
-                video.css({"width":"100%"});
-                video.append(svg);
-                svg.css({"position":"absolute","top":0,"left":0});
-                var playBox=_playBox(svg);
-                svg.addChild(playBox);
-                playBox.addEventListener("click",function (e){
-                    var m=$(this),
-                        video= m.parent().parent().find("video");
-                    var bool=m.attr("play");
-                    if(bool){
-                        this.setTimeout=null;
-                        video[0].pause();
-                        m.removeAttr("play")
-                    }else{
-                        this.setTimeout=setTimeout(function (){
-                            video[0].play();
-                        },500);
 
-                        m.attr("play","true")
-                    }
-                })
-            }
+      var oease = EaseLookup.find(self.data.lineData[i].openEaseName) || Linear.easeNone,
+        eease = EaseLookup.find(self.data.lineData[i].endEaseName) || Linear.easeNone;
+      //console.log(self.data.lineData[i].open,oease,eease,i);
+      //if(self.data.lineData[i].openEaseName=="Bounce.easeOut")
+      if (self.data.lineData[i].openEaseName && self.data.lineData[i].openEaseName.indexOf("Bounce") >= 0) {
+        if (self.data.lineData[i].openEaseName.indexOf("InOut") >= 0) {
+          oease = Bounce.easeInOut
+        } else if (self.data.lineData[i].openEaseName.indexOf("In") >= 0) {
+          oease = Bounce.easeIn
+        } else {
+          oease = Bounce.easeOut
         }
-    };
-    motionVideo.init();
+      }
+      var cx = {}, _x = {};
+      if (self.data.exposure == "left" || !self.data.exposure) {
+        _x = {x: 240};
+        cx = {x: self.data.mask ? -20 : 20};
+      } else if (self.data.exposure == "top") {
+        _x = {y: 180};
+        cx = {y: self.data.mask ? -20 : 20};
+      } else if (self.data.exposure == "right") {
+        _x = {x: 20};
+        cx = {x: self.data.mask ? 280 : 220};
+      } else {
+        _x = {y: 20};
+        cx = {y: self.data.mask ? 240 : 180};
+      }
+      if (self.data.lineData[i].endEaseName !== "null") {
+        _x.ease = oease, cx.ease = eease, cx.delay = self.d_time;
+      } else {
+        var t = cx;
+        cx = {};
+        cx.startAt = t;
+        cx.delay = self.d_time;
+        _x.ease = oease, cx.ease = eease;
+      }
+      ctl.to(ciric, self.t_time, _x).to(ciric, self.t_time, cx);
+      self.tweenArr.push(ctl);
+    }
+  };
+  window.Motion = newMotion;
+
+  var motionVideo = {
+    init: function () {
+      var self = this;
+      self.videoBox = $(".video-player");
+      for (var i = 0; i < self.videoBox.length; i++) {
+        var svg = new SVG();
+        self.videoBox.eq(i).append(svg.node);
+        var video = self.videoBox.eq(i).find("video");
+        video.css({"width": "100%"});
+        video.append(svg);
+        svg.css({"position": "absolute", "top": 0, "left": 0});
+        var playBox = _playBox(svg);
+        svg.addChild(playBox);
+        playBox.addEventListener("click", function (e) {
+          var m = $(this),
+            video = m.parent().parent().find("video");
+          var bool = m.attr("play");
+          if (bool) {
+            this.setTimeout = null;
+            video[0].pause();
+            m.removeAttr("play")
+          } else {
+            this.setTimeout = setTimeout(function () {
+              video[0].play();
+            }, 500);
+
+            m.attr("play", "true")
+          }
+        })
+      }
+    }
+  };
+  motionVideo.init();
 });
+