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