TweenMax+easeljs实现等离子粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:TweenMax+easeljs实现等离子粒子动画效果代码
代码标签: TweenMax easeljs 等离子 粒子 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body{ width:100%; height:100%; padding:0px; margin:0px; overflow: hidden; background: #ff00b3; background: -moz-linear-gradient(0deg, #ff00b3 50%, #283139 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#ff00b3), color-stop(100%,#283139)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(0deg, #ff00b3 50%,#283139 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(0deg, #ff00b3 50%,#283139 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(0deg, #ff00b3 50%,#283139 100%); /* IE10+ */ background: linear-gradient(0deg, #ff00b3 50%,#283139 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff00b3', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-attachment: fixed } #projector { position: absolute; top: 0px; left: 0px; width:100%; height:100%; } .center-div { width:580px; height:374px; position:absolute; left:50%; top:50%; margin-left: -290px; margin-top: -187px; } #preloaderDiv { position:absolute; left:50%; top:50%; margin-left: -27px; margin-top: -27px; } #logo{ opacity:0; filter: alpha(opacity=0); } #date2014 { position:absolute; padding-left: 210px; padding-top:15px; opacity:0; top:303px; left:0; filter: alpha(opacity=0); } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="projector"></canvas> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easeljs-0.7.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script > var ParticleEngine = (function() { 'use strict'; function ParticleEngine(canvas_id) { // enforces new if (!(this instanceof ParticleEngine)) { return new ParticleEngine(args); } var _ParticleEngine = this; this.canvas_id = canvas_id; this.stage = new createjs.Stage(canvas_id); this.totalWidth = this.canvasWidth = document.getElementById(canvas_id).width = document.getElementById(canvas_id).offsetWidth; this.totalHeight = this.canvasHeight = document.getElementById(canvas_id).height = document.getElementById(canvas_id).offsetHeight; this.compositeStyle = "lighter"; this.particleSettings = [{id:"small", num:300, fromX:0, toX:this.totalWidth, ballwidth:3, alphamax:0.4, areaHeight:.5, color:"#0cdbf3", fill:false}, {id:"medium", num:100, fromX:0, toX:this.totalWidth, ballwidth:8, alphamax:0.3, areaHeight:1, color:"#6fd2f3", fill:true}, {id:"large", num:10, fromX:0, toX:this.totalWidth, ballwidth:30, alphamax:0.2, areaHeight:1, color:"#93e9f3", fill:true}]; this.particleArray = []; this.lights = [{ellipseWidth:400, ellipseHeight:100, alpha:0.6, offsetX:0, offsetY:0, color:"#6ac6e8"}, {ellipseWidth:350, ellipseHeight:250, alpha:0.3, offsetX:-50, offsetY:0, color:"#54d5e8"}, {ellipseWidth:100, ellipseHeight:80, alpha:0.2, offsetX:80, offsetY:-50, color:"#2ae8d8"}]; this.stage.compositeOperation = _ParticleEngine.compositeStyle; function drawBgLight() { var light; var bounds; var blurFilter; for (var i = 0, len = _ParticleEngine.lights.length; i < len; i++) { light = new createjs.Shape(); light.graphics.beginFill(_ParticleEngine.lights[i].color).drawEllipse(0, 0, _ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight); light.regX = _ParticleEngine.lights[i].ellipseWidth/2; light.regY = _ParticleEngine.lights[i].ellipseHeight/2; light.y = light.initY = _ParticleEngine.totalHeight/2 + _ParticleEngine.lights[i].offsetY; light.x = light.initX =_ParticleEngine.totalWidth/2 + _ParticleEngine.lights[i].offsetX; blurFilter = new createjs.BlurFilter(_ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight, 1); bounds = blurFilter.getBounds(); light.filters = [blurFilter]; light.cache(bounds.x-_ParticleEngine.lights[i].ellipseWidth/2, bounds.y-_ParticleEngine.lights[i].ellipseHeight/2, bounds.width*2, bounds.height*2); light.alpha = _ParticleEngine.lights[i].alpha; light.compositeOperation = "screen"; _ParticleEngine.stage.addChildAt(light, 0); _ParticleEngine.lights[i].elem = light; } TweenMax.fromTo(_ParticleEngine.lights[0].elem, 10, {scaleX:1.5, x:_ParticleEngine.lights[0].elem.initX, y:_ParticleEngine.lights[0].elem.initY},{yoyo:true, repeat:-1, ease:Power1.easeInOut, scaleX:2, scaleY:0.7}); TweenMax.fromTo(_ParticleEngine.lights[1].elem, 12, { x:_ParticleEngine.lights[1].elem.initX, y:_ParticleEngine.lights[1].elem.initY},{delay:5, yoyo:true, repeat:-1, ease:Power1.easeInOut, scaleY:2, scaleX:2, y:_ParticleEngine.totalHeight/2-50, x:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0