ant-design/static/motion.js

/**
 * 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
    }
    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
        }
      };
      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;

      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
    };

    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();

    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 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;

    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
     * .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 {
          if (open !== 'null') {
            str += "L100 250" + "L" + tt_w + "," + ct_y;
          } else {
            str += "M100 250";
          }
        }
      }
      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 (end !== "null") {
            str += "L" + (c_w + c_x ) + "," + c_y + "L" + (c_w + c_x + 20) + "," + 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%"
      });

      //元素插入盒子里；
      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.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;

        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: 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 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
        }
      }
      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].openEaseName === "null" && self.data.lineData[i].endEaseName === "null") {
        var t = cx;
        cx = {};
        cx.startAt = t;
        cx.delay = self.d_time;
        var tt = _x;
        _x = {};
        _x.startAt = tt;
      } else if (self.data.lineData[i].openEaseName === "null") {
        var tt = _x;
        _x = {};
        _x.startAt = tt;
        cx.ease = eease, cx.delay = self.d_time;
      } else if (self.data.lineData[i].endEaseName === "null") {
        var t = cx;
        cx = {};
        cx.startAt = t;
        cx.delay = self.d_time;
        _x.ease = oease;
      } else {
        _x.ease = oease, cx.ease = eease, cx.delay = self.d_time;
      }
      ctl.to(ciric, self.t_time, _x).to(ciric, self.t_time, cx);
      self.tweenArr.push(ctl);
    }
  };
  window.Motion = newMotion;

  var motionVideo = {
    video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'],
    videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'],
    init: function () {
      var self = this;
      self.videoBox = $(".video-player");
      $('<video preload loop></video>').appendTo(self.videoBox);
      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");
        if(video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) {
          $('<source src="'+self.video[i]+'" type="video/webm">').appendTo(video);
        }else{
          $('<source src="'+self.videoMp4[i]+'" type="video/mp4">').appendTo(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")
          }
        })
      }
    }
  };
  window.Motion.motionVideo = motionVideo;
});