http://anime-js.com/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Anime.js Fireworks canvas demo</title> <style type="text/css"> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} * { margin: 0; padding: 0; box-sizing: border-box; } html, body, header { background-color: #111116; /* Black */ } body { position: absolute; width: 100%; height: 100%; color: white; font-family: sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .color-01 { color: #FF1461; } /* Red */ .color-02 { color: #FF7C72; } /* Orange */ .color-03 { color: #FBF38C; } /* Yellow */ .color-04 { color: #A6FF8F; } /* Citrus */ .color-05 { color: #18FF92; } /* Green */ .color-06 { color: #1CE2B2; } /* Darkgreen */ .color-07 { color: #5EF3FB; } /* Turquoise */ .color-08 { color: #61C3FF; } /* Lightblue */ .color-09 { color: #5A87FF; } /* Blue */ .color-10 { color: #8453E3; } /* Purple */ .color-11 { color: #C26EFF; } /* Lavender */ .color-12 { color: #FB89FB; } /* Pink */ </style> </head> <body> <canvas class="fireworks" ></canvas> </body> <script src="http://cdn.bootcss.com/animejs/2.0.2/anime.min.js"></script> <script type="text/javascript"> window.human = false; var canvasEl = document.querySelector('.fireworks'); var ctx = canvasEl.getContext('2d'); var numberOfParticules = 30; var pointerX = 0; var pointerY = 0; var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'; var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']; function setCanvasSize() { canvasEl.width = window.innerWidth * 2; canvasEl.height = window.innerHeight * 2; canvasEl.style.width = window.innerWidth + 'px'; canvasEl.style.height = window.innerHeight + 'px'; canvasEl.getContext('2d').scale(2, 2); } function updateCoords(e) { pointerX = e.clientX || e.touches[0].clientX; pointerY = e.clientY || e.touches[0].clientY; } function setParticuleDirection(p) { var angle = anime.random(0, 360) * Math.PI / 180; var value = anime.random(50, 180); var radius = [-1, 1][anime.random(0, 1)] * value; return { x: p.x + radius * Math.cos(angle), y: p.y + radius * Math.sin(angle) } } function createParticule(x,y) { var p = {}; p.x = x; p.y = y; p.color = colors[anime.random(0, colors.length - 1)]; p.radius = anime.random(16, 32); p.endPos = setParticuleDirection(p); p.draw = function() { ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); ctx.fillStyle = p.color; ctx.fill(); } return p; } function createCircle(x,y) { var p = {}; p.x = x; p.y = y; p.color = '#FFF'; p.radius = 0.1; p.alpha = .5; p.lineWidth = 6; p.draw = function() { ctx.globalAlpha = p.alpha; ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); ctx.lineWidth = p.lineWidth; ctx.strokeStyle = p.color; ctx.stroke(); ctx.globalAlpha = 1; } return p; } function renderParticule(anim) { for (var i = 0; i < anim.animatables.length; i++) { anim.animatables[i].target.draw(); } } function animateParticules(x, y) { var circle = createCircle(x, y); var particules = []; for (var i = 0; i < numberOfParticules; i++) { particules.push(createParticule(x, y)); } anime.timeline().add({ targets: particules, x: function(p) { return p.endPos.x; }, y: function(p) { return p.endPos.y; }, radius: 0.1, duration: anime.random(1200, 1800), easing: 'easeOutExpo', update: renderParticule }) .add({ targets: circle, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: 'linear', duration: anime.random(600, 800), }, duration: anime.random(1200, 1800), easing: 'easeOutExpo', update: renderParticule, offset: 0 }); } var render = anime({ duration: Infinity, update: function() { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); } }); document.addEventListener(tap, function(e) { window.human = true; render.play(); updateCoords(e); animateParticules(pointerX, pointerY); }, false); var centerX = window.innerWidth / 2; var centerY = window.innerHeight / 2; function autoClick() { if (window.human) return; animateParticules( anime.random(centerX-50, centerX+50), anime.random(centerY-50, centerY+50) ); anime({duration: 200}).finished.then(autoClick); } autoClick(); setCanvasSize(); window.addEventListener('resize', setCanvasSize, false); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » anime动画库+canvas烟花效果 喜欢 (0)or分享 (0)
