HTML5 卡通动画里面常见的大爆炸动画特效

赐于我力量吧，我是XXX | 人间大炮

canvas, explosion

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2779
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

// @see: https://en.wikipedia.org/wiki/Superformula
var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var SCALE = 150;
var VALUES = [];
for (var index = 0; index < 30; index++) {
    VALUES.push(Math.random() * 20000 + 100);
}

function superformula(phi, a, b, m, n1, n2, n3) {
    return Math.pow(Math.pow(Math.abs(Math.cos(m * phi / 4) / a), n2) + Math.pow(Math.abs(Math.sin(m * phi / 4) / b), n3), -1 / n1);
}

function renderFormula(now, t1, t2, t3, i) {
    var s1 = now / t1;
    var s2 = now / t2;
    var s3 = now / t3;

var a = Math.abs(Math.sin(s1));
    var b = Math.abs(Math.sin(s1));

var m = Math.abs(Math.sin(s2) * 50);
    var n1 = Math.abs(Math.sin(s3) * 50);
    var n2 = Math.abs(Math.sin(s2) * 50);
    var n3 = Math.abs(Math.sin(s1) * 50);

context.beginPath();
    for (var index = 0; index < 360; index++) {
        var radius = superformula(index / 360 * Math.PI * 2, a, b, m, n1, n2, n3);
        var x = Math.cos(index / 360 * Math.PI * 2) * radius * SCALE;
        var y = Math.sin(index / 360 * Math.PI * 2) * radius * SCALE;
        if (index === 0) {
            context.moveTo(x, y);
        } else {
            context.lineTo(x, y);
        }
    }
    context.closePath();

context.globalCompositeOperation = "lighten";

context.shadowColor = "#0cf";
    context.shadowBlur = 32;

context.lineWidth = i;
    context.strokeStyle = "#fff";
    context.stroke();
}

function update() {}

function render(now) {
    var s1 = now / 1000;
    var s2 = now / 250;
    var s3 = now / 500;

var a = Math.abs(Math.sin(s1));
    var b = Math.abs(Math.sin(s1));

var m = Math.abs(Math.sin(s2) * 50);
    var n1 = Math.abs(Math.sin(s3) * 50);
    var n2 = Math.abs(Math.sin(s2) * 50);
    var n3 = Math.abs(Math.sin(s1) * 50);

context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    for (var index = 0; index < VALUES.length; index += 3) {
        renderFormula(now, VALUES[index], VALUES[index + 1], VALUES[index + 2], index + 1);
    }
    context.restore();
}

function frame(now) {
    update();
    render(now);
    window.requestAnimationFrame(frame);
}

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.requestAnimationFrame(frame);
window.addEventListener("resize", resize);
window.dispatchEvent(new Event("resize"));

编译

CSS

HTML

赐于我力量吧，我是XXX | 人间大炮

canvas, explosion

编辑器支持Emmet

快捷键

赐于我力量吧，我是XXX | 人间大炮

canvas, explosion

HTML5 Canvas 模拟汤汁泼溅在玻璃上的弹性炸开动画特效

HTML5 Canvas泡沫动画背景和悬停爆炸效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：