mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-26 12:10:06 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
77d263f063
ant-design/static/motion.js
罗宪 974c989b87 update svg video
2015-07-03 17:39:13 +08:00

673 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 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();
});
Reference in New Issue View Git Blame Copy Permalink