Mavrikii
Platinum Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
HeT BonpocoB
Цитата:| да не, вроде показывает и без.. |
не показывало с ABP )
Код: define("app/ui/profile/balloons_animation",["module","require","exports","core/component","app/utils/random","app/utils/params"],function(module, require, exports) {
function BalloonsAnimation(){this.defaultAttrs({playBalloonsAnimation:!1,colors:["Balloon--red","Balloon--blue","Balloon--yellow","Balloon--purple","Balloon--green"],sizes:["Balloon--small","Balloon--medium","Balloon--large"],scale:[.65,.85,1],speed:[.21,.25,.3],numberOfBalloons:42,maxBalloonDriftOnXAxis:600,minInitialDelay:500,maxDelayAfterInital:4500,fpsDebuggerBoxClass:"Balloon-fpsDebugger",debuggerBoxParam:"debug"}),this.animationStates={inProgress:0,finished:1},this.balloonsData=[],this.animationStep,this.animationStartTime,this.balloonAnimationRequest,this.viewportSize,this.lastAnimationStepTime=0,this.windowWasBlurred=!1,this.frameCount=0,this.lowestFps=Number.MAX_VALUE,this.highestFps=0,this.averageFps=0,this.easeIn=function(a){return 1-Math.cos(a*(Math.PI/2))},this.pathFunctions=["linear","curve","sinusoidal"],this.linear=function(a,b,c,d){return{xAxis:b*c,yAxis:b*d}},this.curve=function(a,b,c,d){var e=2+a*1;return{xAxis:Math.pow(b,e)*c,yAxis:b*d}},this.sinusoidal=function(a,b,c,d){var e=(2+a*2)/4;return{xAxis:Math.sin(b*Math.PI*e)*c,yAxis:b*d}},this.balloonAnimationDuration=function(a,b){var c=this.attr.speed[b%this.attr.speed.length];return a/c},this.isAnimationInProgress=function(){return this.balloonsData.some(function(a){return a.state===this.animationStates.inProgress},this)},this.setBalloonPosition=function(a,b){var c=this.easeIn(b),d=this[a.chosenPath](a.randomFactor,c,a.xSize,a.ySize),e=a.startPosition.xAxis+d.xAxis,f=a.startPosition.yAxis+d.yAxis;a.$node.css({transform:"matrix("+a.scale+", 0, 0, "+a.scale+", "+e+", -"+f+")"})},this.getAnimationStep=function(){var a=Date.now();!this.animationStartTime&&this.animationStartTime!==0?this.animationStartTime=a:this.calculateFpsInfo(a),this.windowWasBlurred&&(this.windowWasBlurred=!1,this.animationStartTime+=a-this.lastAnimationStepTime),this.lastAnimationStepTime=a,this.balloonsData.forEach(function(b){var c=this.animationStartTime+b.delay;if(a>c){var d=a-c,e=d/b.animationDuration;e<=1.2?this.setBalloonPosition(b,e):(b.state=this.animationStates.finished,b.$node.addClass("u-hidden"))}},this),this.isAnimationInProgress()?this.balloonAnimationRequest=window.requestAnimationFrame(this.animationStep):this.cleanUpBalloons()},this.startAnimation=function(){this.animationStep=this.getAnimationStep.bind(this),this.balloonAnimationRequest=window.requestAnimationFrame(this.animationStep)},this.requestAnimation=function(a,b,c){this.isAnimationInProgress()||(this.resetControlVariables(),this.calculateViewPortSize(),this.createBalloons(),this.resetFpsInfo(),this.trigger("uiBalloonAnimationPlayed",{autoplay:a||c&&c.autoplay}),this.startAnimation())},this.chooseBalloon=function(a){var b=this.attr.colors[a%this.attr.colors.length],c=this.attr.sizes[a%this.attr.sizes.length];return["Balloon",b,c].join(" ")},this.createBalloons=function(){var a=this.pathFunctions.length;for(var b=0;b<this.attr.numberOfBalloons;b++){var c=$("<span>",{"class":this.chooseBalloon(b)});this.$node.append(c);var d=c.height(),e=c.width(),f=this.viewportSize.width-e,g=f*Math.max(b-5,0)/this.attr.numberOfBalloons,h=g+f*Math.min(b+5,this.attr.numberOfBalloons)/this.attr.numberOfBalloons,i={xAxis:random.getRandomInteger(g,h),yAxis:-1*d},j=random.getRandomInteger(i.xAxis,i.xAxis+this.attr.maxBalloonDriftOnXAxis)-this.attr.maxBalloonDriftOnXAxis/2,k=this.pathFunctions[b%a],l=Math.random(),m=random.getRandomInteger(this.attr.minInitialDelay,this.attr.minInitialDelay+this.attr.maxDelayAfterInital),n=Math.abs(j-i.xAxis),o=Math.abs(this.viewportSize.height-i.yAxis),p=this.balloonAnimationDuration(o,b);this.balloonsData.push({$node:c,state:this.animationStates.inProgress,delay:m,animationDuration:p,startPosition:i,scale:this.attr.scale[b%this.attr.scale.length],ySize:o,xSize:n,chosenPath:k,randomFactor:l})}},this.cleanUpBalloons=function(){this.balloonAnimationRequest&&window.cancelAnimationFrame(this.balloonAnimationRequest),this.balloonsData.forEach(function(a){a.$node.remove()}),this.balloonsData=[],this.logFpsInfo()},this.calculateViewPortSize=function(){var a=$(window);this.viewportSize={height:a.height(),width:a.width()}},this.setWindowBlurredFlag=function(){this.windowWasBlurred=!0},this.resetControlVariables=function(){this.balloonsData=[],this.animationStep=undefined,this.animationStartTime=undefined,this.balloonAnimationRequest=undefined,this.viewportSize=undefined,this.lastAnimationStepTime=0,this.windowWasBlurred=!1},this.calculateFpsInfo=function(a){if(a>this.animationStartTime+this.attr.minInitialDelay+this.attr.maxDelayAfterInital/2){var b=Math.round(1e3/(a-this.lastAnimationStepTime)*100)/100;this.frameCount+=1,this.averageFps+=b,this.lowestFps=Math.min(this.lowestFps,b),this.highestFps=Math.max(this.highestFps,b)}},this.resetFpsInfo=function(){this.frameCount=0,this.averageFps=0,this.lowestFps=Number.MAX_VALUE,this.highestFps=0},this.logFpsInfo=function(){var a=console;params.fromQuery(window.location)[this.attr.debuggerBoxParam]&&(a.log("Average FPS: "+this.averageFps/this.frameCount),a.log("Lowest FPS: "+this.lowestFps),a.log("Highest FPS: "+this.highestFps))},this.after("initialize",function(){this.attr.autoPlayBalloonsAnimation&&this.on(document,"uiSwiftLoaded uiPageChanged",this.requestAnimation.bind(this,!0)),this.on(document,"uiBeforePageChanged",this.cleanUpBalloons),this.on(window,"blur",this.setWindowBlurredFlag),this.on(document,"uiBalloonAnimationRequested",this.requestAnimation.bind(this,!1))}),this.before("teardown",function(){this.cleanUpBalloons()})}var defineComponent=require("core/component"),random=require("app/utils/random"),params=require("app/utils/params");module.exports=defineComponent(BalloonsAnimation)
}); |
использует их фреймворк. но можно сделать проще, используя возможности CSS3
Цитата:| ладно, коль скрипт то поищу чтонить похожее на css завтра |
дал же ссылку выше.
pps: вот, накидал по быстрому с помощью jQuery - https://jsfiddle.net/8tm8x7yg/ |
) 
