test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 20:49:14 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity
7d0413fbb6
ant-design/static/motion.js

674 lines
25 KiB
JavaScript
Raw Normal View History

update for motion
2015-07-02 13:57:26 +08:00
/**
* 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){
update animation doc
2015-07-03 17:00:59 +08:00
return d?this.node.css(o,d):this.node.css(o);
update for motion
2015-07-02 13:57:26 +08:00
};
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);
update animation doc
2015-07-03 17:00:59 +08:00
if(id)
update for motion
2015-07-02 13:57:26 +08:00
$(id).append(this.node);
update animation doc
2015-07-03 17:00:59 +08:00
else
return this;
update for motion
2015-07-02 13:57:26 +08:00
};
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;
update svg video
2015-07-03 17:39:13 +08:00
var _playBox=function (svg,startFunc,pauseFunc){
update animation doc
2015-07-03 17:00:59 +08:00
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;
};
update for motion
2015-07-02 13:57:26 +08:00
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;
}
}
//建播放按钮；
update animation doc
2015-07-03 17:00:59 +08:00
self.playBox=_playBox(self.svg,function (){
self.start(self);
},function (){
self.pause(self);
update for motion
2015-07-02 13:57:26 +08:00
});
update animation doc
2015-07-03 17:00:59 +08:00
self.svg.addChild(self.playBox);
update for motion
2015-07-02 13:57:26 +08:00
};
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();
}
};
update animation doc
2015-07-03 17:00:59 +08:00
nm.start=function (self){
update for motion
2015-07-02 13:57:26 +08:00
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;
update animation doc
2015-07-03 17:00:59 +08:00
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);
rm motion from components
2015-07-29 18:28:35 +08:00
svg.css({"position":"absolute","top":0,"left":0});
update animation doc
2015-07-03 17:00:59 +08:00
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();
rm motion from components
2015-07-29 18:28:35 +08:00
});
Reference in New Issue Copy Permalink