使用SVG和Canvas实现的液体扩散动画特效

SVG & Canvas Liquid Effect

svg, canvas, gooey

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    colorPallete = ["#00f", "#00a", "#00b", "#00c", "#00d", "#00e"];
// ["#f00","#a00","#b00","#c00","#d00","#e00"];
// ["white","#888","yellow","orange","darkorange","darkmagenta","darkgreen","khaki"];

var width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,
    src = {
        x: width / 2,
        y: height / 2
    },
    balls = [];

window.onresize = () => {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
}

class Ball {
    constructor() {
        this.x = src.x;
        this.y = src.y;
        this.angle = Math.PI * 2 * Math.random();
        this.vx = (1.3 + Math.random() * .3) * Math.cos(this.angle);
        this.vy = (1.3 + Math.random() * .3) * Math.sin(this.angle);

// this.xr = 6 + 10 * Math.random();
        // this.yr = 2 + 10 * Math.random();
        this.r = 6 + 10 * Math.random()

this.color = colorPallete[Math.floor(Math.random() * colorPallete.length)];
    }

update() {
        this.x += this.vx;
        this.y += this.vy;

// this.xr-= .01;
        // this.yr -= .01;
        // this.r=Math.min(this.yr,this.xr);
        this.r -= .01;

}
}

function renderBall() {
    context.clearRect(0, 0, width, height);

if (Math.random() > .5)
        balls.push(new Ball());

for (var i = 0; i < balls.length; i++) {
        var b = balls[i];
        context.fillStyle = b.color;
        context.beginPath();

context.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
        // context.ellipse(b.x, b.y, b.xr, b.yr, b.angle, 0, 2 * Math.PI);

context.fill();
        b.update();
    }

removeBall();
    requestAnimationFrame(renderBall);
}

renderBall();

// http://codepen.io/mnmxmx/pen/VjjvEq

编译

CSS

HTML

SVG & Canvas Liquid Effect

svg, canvas, gooey

编辑器支持Emmet

快捷键

SVG & Canvas Liquid Effect

svg, canvas, gooey

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

使用SVG和Canvas实现的水泡分裂动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：