easeljs实现粒子流动动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Particle Helix PoC</title> <style> body { background: #eee; margin: 0; overflow: hidden; } #target { background: #203656; } </style> </head> <body translate="no"> <canvas id="target"></canvas> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/easeljs.js"></script> <script> var c = createjs, stage = new c.StageGL("target"), t=0, count=0, w, h, max, min; // configurable: var dotR = 8, amp0Amt=1, amp1Amt=0.2, maxDots=2000, speed=2.5; c.Ticker.timingMode = c.Ticker.RAF; c.Ticker.on("tick", tick); stage.setClearColor("#201624"); var dotTemplate, dots=[]; while (dots.length < maxDots) { getDot(); } function tick(evt) { var d = evt.delta; var fov = min*1; for (var i=0, l=dots.length; i<l; i++) { var dot = dots[i]; var t = (dot.t += d*0.0001*speed*dot.speed); var x = t%1*w-w/2; x += Math.cos(t*dot.p1)*min*dot.a1*amp1Amt; var y = Math.sin(t*Math.PI*4+Math.PI)*min*dot.r*0.25; y += Math.sin(t*dot.p1)*min*dot.a1*amp1Amt var z = Math.cos(t*Math.PI*4+Math.PI)*min*dot.r*0.25; z += Math.cos(t*dot.p1)*min*dot.a1*amp1Amt; var s = fov/(z+fov); x *= s; y *= s; dot.x = x+w/2; dot.y = y+h/2; dot.getChildAt(1).alpha = 1-s; dot.scaleX = dot.scaleY = Math.pow(s*(1+dot.size),2)*0.3; }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0