You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
673 lines
25 KiB
673 lines
25 KiB
/**
|
|
* 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=1;
|
|
self.d_time=.5;
|
|
self.tweenAllTime=2.5;
|
|
|
|
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;
|
|
|
|
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%"});
|
|
|
|
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%"});
|
|
|
|
//元素插入盒子里；
|
|
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:_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);
|
|
|
|
|
|
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);
|
|
}
|
|
};
|
|
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});
|
|
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();
|
|
});
|