ant-design/static/home.js

$(function () {
    var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    var getTransform = function () {
        var style = "transform",
            anim = "animation",
            pers = "perspective";
        var i, prefix = ['webkit', 'moz', 'ms', 'o'],
            htmlStyle = $("html")[0].style;
        if (!"transform" in htmlStyle) {
            for (i in prefix) {
                style = "-" + prefix[i] + "-transform";
                if (style in htmlStyle) break;
            }
        }
        if (!"animation" in htmlStyle) {
            for (i in prefix) {
                anim = "-" + prefix[i] + "-animation";
                if (anim in htmlStyle) break;
            }
        }
        if (!"perspective" in htmlStyle) {
            for (i in prefix) {
                pers = "-" + prefix[i] + "-perspective";
                if (pers in htmlStyle) break;
            }
        }
        return [style, anim, pers]
    };
    var C=createjs||{},T=TweenMax||{};
    var bannerAnim = {
        w: 2185,
        h: 1062,
        p_w: 0,
        p_h: 0,
        img: "https://t.alipayobjects.com/images/T1URpfXeXtXXXXXXXX.jpg",
        stage: null,
        Canvas: null,
        lineData:[
            {x:225,y:785,line:3,color:"#BEC4C8",w:70,h:70,rotate:-19,circ:{x:10,y:10,r:50}},
            {x:870,y:245,w:70,h:70,line:3,color:"#BEC4C8",circ:{x:10,y:10,r:50}},
            {x:940,y:455,w:230,h:110,line:3,color:"#6EB4E0",circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]},
            {x:1160,y:670,w:410,h:110,line:3,color:"#F0776F",circ:[{x:60,y:15,r:80},{x:165,y:15,r:80},{x:285,y:15,r:80}]},
            {x:1285,y:170,w:484,h:110,line:3,color:"#BEC4C8",circ:[{x:30,y:15,r:80},{x:145,y:15,r:80},{x:265,y:15,r:80},{x:375,y:15,r:80}]},
            {x:1330,y:520,w:70,h:70,line:3,color:"#F0776F",circ:{x:10,y:10,r:50}},
            {x:1435,y:365,w:200,h:190,line:3,color:"#BEC4C8",circ:[{x:20,y:10,r:75},{x:110,y:10,r:75},{x:20,y:100,r:75},{x:110,y:100,r:75}]},
            {x:1655,y:325,w:115,h:320,line:3,color:"#F0776F",circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:115,r:75},{x:35,y:125,r:55},{x:25,y:225,r:75},{x:35,y:235,r:55}]},
            {x:1680,y:735,w:70,h:70,line:3,color:"#F0776F",circ:{x:10,y:10,r:50}},
            {x:1845,y:485,w:115,h:410,line:3,color:"#6EB4E0",circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:115,r:75},{x:35,y:125,r:55},{x:25,y:215,r:75},{x:35,y:225,r:55},{x:25,y:310,r:75},{x:35,y:320,r:55}]},
            {x:1865,y:290,w:70,h:70,line:3,color:"#F0776F",circ:{x:10,y:10,r:50}},
            {x:1995,y:280,w:230,h:420,line:3,color:"#6EB4E0",circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:175,r:75},{x:35,y:185,r:55},{x:25,y:310,r:75},{x:35,y:320,r:55}, {x:130,y:30,r:75},{x:140,y:40,r:55},{x:130,y:175,r:75},{x:140,y:185,r:55},{x:130,y:310,r:75},{x:140,y:320,r:55}]},
        ],
        init: function () {
            var self = this;
            self.box = $(".banner-box");
            self.animBox = $("#bannerAnim");
            self.imgBox = $(".banner-img");
            self.txtBox=$(".banner-entry");
            //创建canvas;
            self.Canvas = $("<canvas id='myC' style='display:block'></canvas>").appendTo(self.animBox); //document.createElement('canvas');
            self.Canvas[0].width = self.w;
            self.Canvas[0].height = self.h;
            self.stage = new C.Stage('myC');

            C.Ticker.setFPS(30);
            C.Ticker.useRAF = true;
            C.Ticker.addEventListener("tick", self.stage);
            C.Touch.enable(self.stage, true); //单指触摸

            self.bannerResize();
            $(window).bind("resize", self.bannerResize);


            self.loadImg();
        },
        loadImg: function () {
            var self = this;
            var loadBox = $("<div class='load-box'><em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
            "</div>").appendTo(self.box);
            var img = new Image();
            img.onload = function () {
                loadBox.addClass("load-out").one(animEndStr, function () {
                    loadBox.remove();
                    self.start();
                });
            };
            img.src = self.img;
        },
        bannerResize: function () {
            var self = bannerAnim;
            self.p_w = self.box.parent().width();
            self.p_h = self.box.parent().height();
            //获取比例；
            var w_s = self.p_w / self.w,
                h_s = self.p_h / self.h;
            var scale = w_s > h_s ? w_s : h_s;
            var tra = getTransform()[0];
            self.animBox.attr("style", "");
            self.imgBox.attr("style", "");
            var boxSty = {
                "width": self.w,
                "height": self.h
            };
            boxSty[tra] = "scale(" + scale + "," + scale + ")";
            self.animBox.css(boxSty);
            var imgSty = {};
            imgSty[tra] = "scale(" + scale + "," + scale + ")";
            self.imgBox.css(imgSty);
            if (w_s > h_s) {
                self.animBox.css("margin-top", (self.p_h - self.h * w_s) / 2);
                self.imgBox.css("margin-top", (self.p_h - self.h * w_s) / 2);
            } else {
                self.animBox.css("margin-left", (self.p_w - self.w * h_s) / 2);
                self.imgBox.css("margin-left", (self.p_w - self.w * h_s) / 2);
            }
        },
        start: function () {
            var self = this;
            //self.addBg();
            //setTimeout(self.addLine,500);
            self.addLine()

        },
        glowLine:function (line,w,h,color){
            w=w||0,h=h||0;
            var r=w/2||h/2;
            var glBox=new C.Container();
            var Line=new C.Shape();
            var glow=new C.Shape();
            glBox.addChild(glow);
           glBox.addChild(Line);
            glow.alpha=.3
            var blurFilter = new C.BlurFilter(3, 3, 10);
            glow.filters = [blurFilter];
            var bounds = blurFilter.getBounds();
            if(w){
                Line.graphics.ss(line,"round").rs([color,"#2d2d2d"],[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h);
                glow.graphics.ss(line+4,"round").rs([color,"#2d2d2d"],[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h);
                glow.cache(bounds.x, bounds.y-2, w+bounds.width, line+bounds.height);