remove easing and page-transition noinstant:true

spec/easing.md

@@ -2,7 +2,6 @@
 
 - category: 动画
 - order: 0
-- noinstant: true
 
 
 ---
@@ -30,15 +29,8 @@
 
 如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。
 
-<script src="/static/TweenMax.min.js"></script>
-<script src="/static/motion.js"></script>
-<div id="J-Linear"></div>
 
-<script>
-$(function (){
-new Motion("#J-Linear",{lineData:[{stroke:"#f2666c"},{stroke:"#71B5DE",openEaseName:"easeInOutQuad",endEaseName:"easeInOutQuad"},],mask:false});
-})
-</script>
+<div id="J-Linear"></div>
 
 
 上图所示缓动函数：红 `Linear`，蓝 `ease-in-out`。
@@ -52,14 +44,6 @@ new Motion("#J-Linear",{lineData:[{stroke:"#f2666c"},{stroke:"#71B5DE",openEaseN
 
 <div id="J-Symmetric"></div>
 
-<script>
-$(function (){
-new Motion("#J-Symmetric",{lineData:[
-{openEaseName:"easeInOutQuad",endEaseName:"null",stroke:"#f2666c"},
-{stroke:"#71B5DE",openEaseName:"easeInOutCubic",endEaseName:"easeInOutCubic"}],
-mask:false,exposure:"top"});
-})
-</script>
 
 上图所示缓动函数：红 `ease-in-out`，蓝 `ease-in-out-cubic`。
 
@@ -76,14 +60,6 @@ mask:false,exposure:"top"});
 
 <div id="J-Entry"></div>
 
-<script>
-$(function (){
-new Motion("#J-Entry",{lineData:[
-{openEaseName:"easeOutQuad",endEaseName:"easeOutQuad",stroke:"#f2666c"},
-{stroke:"#71B5DE",openEaseName:"easeOutCubic",endEaseName:"easeInCubic"}],
-mask:true,exposure:"bottom"});
-})
-</script>
 
 上图所示缓动函数：红 `ease-out` `ease-out`，蓝 `ease-out-cubic` `ease-in-cubic`。
 
@@ -102,15 +78,7 @@ mask:true,exposure:"bottom"});
 > 慎用 Bounce 或 Elastic，这两种适用在特殊元素下，一般 back 即可满足页面上元素的弹动;
 
 <div id="J-Back"></div>
-
-<script>
-$(function (){
-new Motion("#J-Back",{lineData:[
-{openEaseName:"easeOutBounce",endEaseName:"easeOutElastic",stroke:"#70f266"},
-{stroke:"#71B5DE",openEaseName:"easeOutBack",endEaseName:"easeInOutBack"}],
-mask:false,exposure:"top"});
-})
-</script>
+<script src="/static/motionDemoLoad.js?page=easing"></script>
 
 上图所示缓动函数：绿 `easeOutBounce` `easeOutElastic`（css 需自配）， 蓝 `ease-out-back` `ease-in-back`。
 

spec/page-transition.md

@@ -2,7 +2,6 @@
 
 - category: 动画
 - order: 1
-- noinstant: true
 
 ---
 
@@ -59,8 +58,7 @@
 
  - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
 
-<script src="/static/TweenMax.min.js"></script>
-<script src="/static/motion.js"></script>
+<script src="/static/motionDemoLoad.js"></script>
 
 <div class="video-player">
   <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>

static/motion.js

@@ -725,7 +725,7 @@ $(function () {
         var tt = _x;
         _x = {};
         _x.startAt = tt;
-        cx.ease = eease,cx.delay = self.d_time;
+        cx.ease = eease, cx.delay = self.d_time;
       } else if (self.data.lineData[i].endEaseName === "null") {
         var t = cx;
         cx = {};
@@ -773,6 +773,6 @@ $(function () {
       }
     }
   };
-  motionVideo.init();
+  window.Motion.motionVideo = motionVideo;
 });
 

static/motionDemoLoad.js

@@ -0,0 +1,78 @@
+/**
+ * Created by jljsj on 15/9/16.
+ */
+var TweenMax = TweenMax, Motion = Motion;
+$(function () {
+  var needData = ["/static/TweenMax.min.js", "/static/motion.js"];
+  var loadFunc = {
+    num: 0,
+    numSub: function (_callback) {
+      this.num++;
+      if (this.num >= needData.length) {
+        if (typeof _callback === 'function') {
+          _callback();
+        }
+      } else {
+        this.getLoad(_callback);
+      }
+    },
+    getLoad: function (_callback) {
+      var self = this, str = needData[self.num];
+      if (str.indexOf(".js") >= 0) {
+        if ((str.indexOf('TweenMax') >= 0 && TweenMax) || (str.indexOf('motion.js') >= 0 && Motion)) {
+          self.numSub(_callback)
+        } else {
+          $.getScript(str, function () {
+            self.numSub(_callback)
+          })
+        }
+      }
+    }
+  };
+  var callback = function () {
+      Motion.motionVideo.init()
+    },
+    scripts = document.getElementsByTagName("script"),
+    urlData = [];
+  for (var i = 0; i < scripts.length; i++) {
+    var sc = scripts[i].src, str = sc.split('?')[1];
+    if (sc.indexOf('motionDemoLoad.js') >= 0 && str) {
+      var d = str.split('&');
+      urlData = d.map((s)=> {
+        return {name: s.split('=')[0], param: s.split('=')[1]};
+      });
+    }
+  }
+  urlData.map((m)=> {
+    if (m.param === 'easing') {
+      callback = function () {
+        new Motion("#J-Linear", {
+          lineData: [{stroke: "#f2666c"}, {
+            stroke: "#71B5DE",
+            openEaseName: "easeInOutQuad",
+            endEaseName: "easeInOutQuad"
+          }], mask: false
+        });
+        new Motion("#J-Symmetric", {
+          lineData: [
+            {openEaseName: "easeInOutQuad", endEaseName: "null", stroke: "#f2666c"},
+            {stroke: "#71B5DE", openEaseName: "easeInOutCubic", endEaseName: "easeInOutCubic"}],
+          mask: false, exposure: "top"
+        });
+        new Motion("#J-Entry", {
+          lineData: [
+            {openEaseName: "easeOutQuad", endEaseName: "easeOutQuad", stroke: "#f2666c"},
+            {stroke: "#71B5DE", openEaseName: "easeOutCubic", endEaseName: "easeInCubic"}],
+          mask: true, exposure: "bottom"
+        });
+        new Motion("#J-Back", {
+          lineData: [
+            {openEaseName: "easeOutBounce", endEaseName: "easeOutElastic", stroke: "#70f266"},
+            {stroke: "#71B5DE", openEaseName: "easeOutBack", endEaseName: "easeInOutBack"}],
+          mask: false, exposure: "top"
+        });
+      }
+    }
+  });
+  loadFunc.getLoad(callback);
+});