使用SVG mix-blend-mode: multiply 模式实现的多层变形气泡动画

SVG bubbles, mixed blend modes

gsap, svg, bubble，混合模式

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var blob1 = createBlob({
    element: document.querySelector("#path1"),
    numPoints: 10,
    centerX: 480,
    centerY: 480,
    minRadius: 300,
    maxRadius: 350,
    minDuration: 1,
    maxDuration: 2
});

var blob2 = createBlob({
    element: document.querySelector("#path2"),
    numPoints: 10,
    centerX: 500,
    centerY: 500,
    minRadius: 280,
    maxRadius: 350,
    minDuration: 2,
    maxDuration: 3
});

var blob3 = createBlob({
    element: document.querySelector("#path3"),
    numPoints: 10,
    centerX: 520,
    centerY: 520,
    minRadius: 300,
    maxRadius: 350,
    minDuration: 1.5,
    maxDuration: 2.5
});

function createBlob(options) {

var points = [];
    var path = options.element;
    var slice = (Math.PI * 2) / options.numPoints;
    var startAngle = random(Math.PI * 2);

var tl = new TimelineMax({
        onUpdate: update
    });

for (var i = 0; i < options.numPoints; i++) {

var angle = startAngle + i * slice;
        var duration = random(options.minDuration, options.maxDuration);

var point = {
            x: options.centerX + Math.cos(angle) * options.minRadius,
            y: options.centerY + Math.sin(angle) * options.minRadius
        };

var tween = TweenMax.to(point, duration, {
            x: options.centerX + Math.cos(angle) * options.maxRadius,
            y: options.centerY + Math.sin(angle) * options.maxRadius,
            repeat: -1,
            yoyo: true,
            ease: Sine.easeInOut
        });

tl.add(tween, -random(duration));
        points.push(point);
    }

options.tl = tl;
    options.points = points;

function update() {
        path.setAttribute("d", cardinal(points, true, 1));
    }

return options;
}

// Cardinal spline - a uniform Catmull-Rom spline with a tension option
function cardinal(data, closed, tension) {

if (data.length < 1) return "M0 0";
    if (tension == null) tension = 1;

var size = data.length - (closed ? 0 : 1);
    var path = "M" + data[0].x + " " + data[0].y + " C";

for (var i = 0; i < size; i++) {

var p0, p1, p2, p3;

if (closed) {
            p0 = data[(i - 1 + size) % size];
            p1 = data[i];
            p2 = data[(i + 1) % size];
            p3 = data[(i + 2) % size];

} else {
            p0 = i == 0 ? data[0] : data[i - 1];
            p1 = data[i];
            p2 = data[i + 1];
            p3 = i == size - 1 ? p2 : data[i + 2];
        }

var x1 = p1.x + (p2.x - p0.x) / 6 * tension;
        var y1 = p1.y + (p2.y - p0.y) / 6 * tension;

var x2 = p2.x - (p3.x - p1.x) / 6 * tension;
        var y2 = p2.y - (p3.y - p1.y) / 6 * tension;

path += " " + x1 + " " + y1 + " " + x2 + " " + y2 + " " + p2.x + " " + p2.y;
    }

return closed ? path + "z" : path;
}

编译

CSS

HTML

SVG bubbles, mixed blend modes

gsap, svg, bubble，混合模式

编辑器支持Emmet

快捷键

SVG bubbles, mixed blend modes

gsap, svg, bubble，混合模式

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

使用GSAP和Bodymovin实现的响应式乐高模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：