Anime.js 烟花画布演示

下载代码

html

css

分享到微信朋友圈

html

<canvas class="fireworks"></canvas>
<script>
    var $jscomp$this = this;
    (function(v, p) {
        "function" === typeof define && define.amd ? define([], p) : "object" === typeof module && module.exports ? module.exports = p() : v.anime = p()
    })(this, function() {
        function v(a) {
            if (!g.col(a))
                try {
                    return document.querySelectorAll(a)
                } catch (b) {}
        }

function p(a) {
            return a.reduce(function(a, d) {
                return a.concat(g.arr(d) ? p(d) : d)
            }, [])
        }

function w(a) {
            if (g.arr(a))
                return a;
            g.str(a) && (a = v(a) || a);
            return a instanceof NodeList || a instanceof HTMLCollection ? [].slice.call(a) : [a]
        }

function F(a, b) {
            return a.some(function(a) {
                return a === b
            })
        }

function A(a) {
            var b = {},
                d;
            for (d in a)
                b[d] = a[d];
            return b
        }

function G(a, b) {
            var d = A(a),
                c;
            for (c in a)
                d[c] = b.hasOwnProperty(c) ? b[c] : a[c];
            return d
        }

function B(a, b) {
            var d = A(a),
                c;
            for (c in b)
                d[c] = g.und(a[c]) ? b[c] : a[c];
            return d
        }

function x(a) {
            if (a = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))
                return a[2]
        }

function U(a) {
            if (-1 < a.indexOf("translate"))
                return "px";
            if (-1 < a.indexOf("rotate") || -1 < a.indexOf("skew"))
                return "deg"
        }

function H(a, b) {
            return g.fnc(a) ? a(b.target, b.id, b.total) : a
        }

function C(a, b) {
            if (b in a.style)
                return getComputedStyle(a).getPropertyValue(b.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()) || "0"
        }

function I(a, b) {
            if (g.dom(a) && F(V, b))
                return "transform";
            if (g.dom(a) && (a.getAttribute(b) || g.svg(a) && a[b]))
                return "attribute";
            if (g.dom(a) && "transform" !== b && C(a, b))
                return "css";
            if (null != a[b])
                return "object"
        }

function W(a, b) {
            var d = U(b),
                d = -1 < b.indexOf("scale") ? 1 : 0 + d;
            a = a.style.transform;
            if (!a)
                return d;
            for (var c = [], e = [], l = [], h = /(\w+)$(.+?)$/g; c = h.exec(a);)
                e.push(c[1]),
                l.push(c[2]);
            a = l.filter(function(a, c) {
                return e[c] === b
            });
            return a.length ? a[0] : d
        }

function J(a, b) {
            switch (I(a, b)) {
                case "transform":
                    return W(a, b);
                case "css":
                    return C(a, b);
                case "attribute":
                    return a.getAttribute(b)
            }
            return a[b] || 0
        }

function K(a, b) {
            var d = /^(\*=|\+=|-=)/.exec(a);
            if (!d)
                return a;
            b = parseFloat(b);
            a = parseFloat(a.replace(d[0], ""));
            switch (d[0][0]) {
                case "+":
                    return b + a;
                case "-":
                    return b - a;
                case "*":
                    return b * a
            }
        }

function D(a) {
            return g.obj(a) && a.hasOwnProperty("totalLength")
        }

function Y(a, b) {
            return b.reduce(function(b, c, e) {
                return b + a[e - 1] + c
            })
        }

function M(a) {
            return (a ? p(g.arr(a) ? a.map(w) : w(a)) : []).filter(function(a, d, c) {
                return c.indexOf(a) === d
            })
        }

function Z(a) {
            var b = M(a);
            return b.map(function(a, c) {
                return {
                    target: a,
                    id: c,
                    total: b.length
                }
            })
        }

function ca(a) {
            return g.arr(a) ? y.apply(this, a) : N[a]
        }

function da(a, b) {
            var d;
            return a.tweens.map(function(c) {
                c = ba(c, b);
                var e = c.value,
                    l = J(b.target, a.name),
                    h = d ? d.to.original : l,
                    h = g.arr(e) ? e[0] : h,
                    m = K(g.arr(e) ? e[1] : e, h),
                    l = x(m) || x(h) || x(l);
                c.isPath = D(e);
                c.from = L(h, l);
                c.to = L(m, l);
                c.start = d ? d.end : a.offset;
                c.end = c.start + c.delay + c.duration;
                c.easing = ca(c.easing);
                c.elasticity = (1E3 - Math.min(Math.max(c.elasticity, 1), 999)) / 1E3;
                g.col(c.from.original) && (c.round = 1);
                return d = c
            })
        }

function ea(a, b) {
            return p(a.map(function(a) {
                return b.map(function(b) {
                    var c = I(a.target, b.name);
                    if (c) {
                        var d = da(b, a);
                        b = {
                            type: c,
                            property: b.name,
                            animatable: a,

tweens: d,
                            duration: d[d.length - 1].end,
                            delay: d[0].delay
                        }
                    } else
                        b = void 0;
                    return b
                })
            })).filter(function(a) {
                return !g.und(a)
            })
        }

function O(a, b, d) {
            var c = "delay" === a ? Math.min : Math.max;
            return b.length ? c.apply(Math, b.map(function(b) {
                return b[a]
            })) : d[a]
        }

function n(a) {
            function b() {
                return window.Promise && new Promise(function(a) {
                    return Q = a
                })
            }

function d(a) {
                return f.reversed ? f.duration - a : a
            }

function e(a) {
                if (f[a])
                    f[a](f)
            }

function g() {
                f.remaining && !0 !== f.remaining && f.remaining--
            }

css

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 renderParticule(anim) {
  for (var i = 0; i < anim.animatables.length; i++) {
    anim.animatables[i].target.draw();
  }
}

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);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg