mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 19:50:05 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity
156e8f8831
ant-design/static/home.js

268 lines
12 KiB
JavaScript
Raw Blame History

$(function () {
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: 2400,
h: 1300,
p_w: 0,
p_h: 0,
stage: null,
Canvas: null,
lineData:[
{x:270,y:795,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],w:70,h:70,rotate:-15,circ:{x:10,y:10,r:50}},
{x:850,y:220,w:70,h:70,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:{x:10,y:10,r:50}},
{x:930,y:445,w:230,h:110,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]},
{x:1160,y:670,w:440,h:115,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:60,y:15,r:80},{x:178,y:15,r:80},{x:308,y:15,r:80}]},
{x:1290,y:135,w:524,h:115,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:40,y:15,r:80},{x:165,y:15,r:80},{x:295,y:15,r:80},{x:415,y:15,r:80}]},
{x:1345,y:510,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
{x:1455,y:340,w:210,h:210,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:20,y:20,r:75},{x:120,y:20,r:75},{x:20,y:110,r:75},{x:120,y:110,r:75}]},
{x:1695,y:300,w:120,h:345,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:125,r:75},{x:35,y:135,r:55},{x:25,y:245,r:75},{x:35,y:255,r:55}]},
{x:1730,y:745,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
{x:1910,y:470,w:115,h:450,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:20,r:75},{x:35,y:30,r:55},{x:25,y:130,r:75},{x:35,y:140,r:55},{x:25,y:240,r:75},{x:35,y:250,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}]},
{x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
{x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,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.start()
},
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+0.08,
h_s = self.p_h / self.h+0.08;
var scale=self.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,"margin-left":(self.p_w - self.w * w_s) / 2});
self.imgBox.css({"margin-top": (self.p_h - self.h * w_s) / 2-(1-scale)*self.h/2,"margin-left":(self.p_w - self.w * w_s) / 2-(1-scale)*self.w/2});
} else {
self.animBox.css({"margin-left": (self.p_w - self.w * h_s) / 2,"margin-top": (self.p_h - self.h * h_s) / 2});
self.imgBox.css({"margin-left": (self.p_w - self.w * h_s) / 2-(1-scale)*self.w/2,"margin-top": (self.p_h - self.h * h_s) / 2-(1-scale)*self.h/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,[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h);
glow.graphics.ss(line+4,"round").rs(color,[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);
}else{
Line.graphics.ss(line,"round").rs(color,[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h);
glow.graphics.ss(line+4,"round").rs(color,[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h);
glow.cache(bounds.x-2, bounds.y, line+bounds.width, h+bounds.height);
}
return glBox;
},
/*addBg:function (){
var self=this;
self.bgBox=new C.Container();
self.stage.addChild(self.bgBox);
var colorArr=["#ccc","#999","#666","#000"];
for(var i=0;i<4;i++){
var colorMc=new C.Shape();
colorMc.graphics.f(colorArr[i]).dr(0,0,self.w,self.h);
self.bgBox.addChild(colorMc);
//T.from(colorMc,.6,{delay:.1*i,x:-self.w,alpha:0,ease:Power2.easeOut})
}
},*/
addMouseAnim:function (){
var self=this,img_x=self.imgBox;
$("body").bind("mousemove",function (e){
var _x=-(e.pageX-$(this).width()/2)/40;//,_y= -(e.pageY-$(this).height()/2)/35;
if(_x>self.w*.04){
_x=self.w*.04
}
//if(_y>self.h*.04){
// _y=self.h*.04
//}
T.set(self.imgBox,{scale:self.scale,transformPerspective:400});
T.killTweensOf(self.imgBox,true);
//console.log(_x)
T.to(self.imgBox,.5,{rotationY:_x/60,x:_x})
})
},
endTween:function (){
var self=bannerAnim;
T.to(self.animBox,.5,{alpha:0,onComplete:function (){
self.animBox.remove();
self.addMouseAnim()
}});
self.imgBox.removeClass("fn-alpha-out")
//T.to(self.imgBox,.5,{alpha:1})
self.imgBox.css("opacity",1);
},
textTween:function (){
var self=this;
self.txtBox.removeClass("fn-hide");
for(var i=0;i<self.txtBox.children().length;i++){
var mc=self.txtBox.children().eq(i);
T.from(mc,.5,{delay:.15*i,alpha:0,y:"80",onComplete:function (mc){
mc.removeAttr("style");
},onCompleteParams:[mc]})
}
},
addLine:function (){
var self=bannerAnim;
var a_lineBox=[],end_num=0;
setTimeout(function (){
self.textTween();
},500);
function addLine(i,j,lineBox){
var t=new C.Shape();
if(j%2){
t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0,0).lt(0,self.lineData[i].h);
var at=Math.floor(j/2);
t.x=self.lineData[i].w*at
}else{
t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0,0).lt(self.lineData[i].w,0);
var at=j/2;
t.y=self.lineData[i].h*at;
}
lineBox.addChild(t);
T.from(t,.5,{alpha:0})
}
function addCirc(i,lineBox){
end_num++;
if(self.lineData[i].circ.length>0){
for(var j=0;j<self.lineData[i].circ.length;j++){
var circ=new C.Shape();
circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x+self.lineData[i].circ[j].r/2,self.lineData[i].circ[j].y+self.lineData[i].circ[j].r/2,self.lineData[i].circ[j].r/2);
lineBox.addChild(circ);
T.from(circ,.5,{alpha:0})
}
}
else{
var circ=new C.Shape();
circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x+self.lineData[i].circ.r/2,self.lineData[i].circ.y+self.lineData[i].circ.r/2,self.lineData[i].circ.r/2);
lineBox.addChild(circ);
T.from(circ,.5,{alpha:0})
}
if(end_num>=self.lineData.length){
setTimeout(self.endTween,500)
}
}
function tween(line,obj,i,j,lineBox,arr){
var t=obj;
t.alpha=0;
t.scale=2;
t.ease=Power1.easeOut;
//t.onComplete=addLine;
//t.onCompleteParams=[i,j,lineBox];
T.to(line,.5,t);
addLine(i,j,lineBox);
arr.push(j);
a_lineBox[i]=arr;
if(a_lineBox[i].length>=4){
addCirc(i,lineBox)
}
}
for(var i=0;i<self.lineData.length;i++){
var lineBox=new C.Container();
self.stage.addChild(lineBox);
lineBox.x=self.lineData[i].x;
lineBox.y=self.lineData[i].y+125;
lineBox.rotation=self.lineData[i].rotate;
var arr=[];
//画外壳方形
for(var j=0;j<4;j++){
var line,ma=Math.ceil(Math.random()*2-1),
tweenobj;
if(j%2){
tweenobj=ma?self.lineData[i].h*2:-self.lineData[i].h*2;
line=self.glowLine(self.lineData[i].line,0,self.lineData[i].h,self.lineData[i].color);
var t=Math.floor(j/2);
line.x=self.lineData[i].w*t;
T.from(line,.5,{alpha:0,y:tweenobj,scale:0,delay:j *.1+Math.random()*i *.1,ease:Power1.easeIn,onComplete:tween,onCompleteParams:[line,{y:-tweenobj},i,j,lineBox,arr]});
}else{
tweenobj=ma?self.lineData[i].w*2:-self.lineData[i].w*2;
line=self.glowLine(self.lineData[i].line,self.lineData[i].w,0,self.lineData[i].color);
var t=j/2;
line.y=self.lineData[i].h*t;
T.from(line,.5,{alpha:0,x:tweenobj,scale:0,delay:j *.1+Math.random() *i *.1,ease:Power1.easeIn,onComplete:tween,onCompleteParams:[line,{x:-tweenobj},i,j,lineBox,arr]});
}
lineBox.addChild(line)
}
}
}
};
bannerAnim.init()
});
Reference in New Issue View Git Blame Copy Permalink