HTML5 Canvas像素操控实现的变形动画

Pixel manipulation，在两幅像素图之间变换的动画。

canvas, pixel

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var inp1 = document.getElementById("img1");
var inp2 = document.getElementById("img2");
var out = document.getElementById("out");
var l = document.getElementById("length");

var ctx1 = inp1.getContext("2d");
var ctx2 = inp2.getContext("2d");
var ctx3 = out.getContext("2d");

var clicking1 = false;
var clicking2 = false;
var mPos = vec(-1, -1);

var time;

var running = false;

inp1.addEventListener("mousemove", function(e) {
    mPos = vec(e.clientX - this.offsetLeft + pageXOffset, e.clientY - this.offsetTop + pageYOffset);
});

inp2.addEventListener("mousemove", function(e) {
    mPos = vec(e.clientX - this.offsetLeft + pageXOffset, e.clientY - this.offsetTop + pageYOffset);
});

inp1.addEventListener("mousedown", function(e) {
    clicking1 = true;
});

inp2.addEventListener("mousedown", function(e) {
    clicking2 = true;
});

document.addEventListener("mouseup", function(e) {
    clicking1 = false;
    clicking2 = false;
});

ctx1.fillStyle = "white";
ctx1.fillRect(0, 0, 300, 300);
ctx2.fillStyle = "white";
ctx2.fillRect(0, 0, 300, 300);

function loop() {
    time = Date.now();

ctx1.fillStyle = "black";
    ctx2.fillStyle = "black";

if (clicking1) {
        ctx1.beginPath();
        ctx1.arc(mPos.x, mPos.y, 5, 0, 2 * Math.PI);
        ctx1.fill();
    }

if (clicking2) {
        ctx2.beginPath();
        ctx2.arc(mPos.x, mPos.y, 5, 0, 2 * Math.PI);
        ctx2.fill();
    }

requestAnimationFrame(loop);
}
loop();

function ease(p1, p2, t) {
    var tt = easeInOutQuad(t);
    return vec(
        p1.x + (p2.x - p1.x) * tt,
        p1.y + (p2.y - p1.y) * tt
    );
}

function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

Math.easeInOutQuad = function(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
};

function vec(x, y) {
    return {
        x: x,
        y: y
    };
}

function play() {
    if (running) {
        running = false;
    } else {
        var pixels1 = [];
        var pixels2 = [];

var data1 = ctx1.getImageData(0, 0, 300, 300);
        var data2 = ctx2.getImageData(0, 0, 300, 300);

var x, y;
        for (x = 0; x < 300; x++) {
            for (y = 0; y < 300; y++) {
                if (data1.data[(x + y * 300) * 4] == 0)
                    pixels1.push(vec(x, y));
                if (data2.data[(x + y * 300) * 4] == 0)
                    pixels2.push(vec(x, y));
            }
        }
        if (pixels1.length == 0 || pixels2.length == 0) {
            running = false;
            return;
        }

var pixelGroups = [];

if (pixels1.length > pixels2.length) {
            var count = pixels1.length - pixels2.length;
            for (var i = 0; i < count; i++) {
                var ind1 = 0;
                var ind2 = Math.floor(Math.random() * pixels2.length);

pixelGroups.push({
                    p1: pixels1[ind1],
                    p2: pixels2[ind2]
                });

pixels1.splice(ind1, 1);
            }
        } else if (pixels2.length > pixels1.length) {
            var count = pixels2.length - pixels1.length;
            for (var i = 0; i < count; i++) {
                var ind1 = Math.floor(Math.random() * pixels1.length);
                var ind2 = Math.floor(Math.random() * pixels2.length);

pixelGroups.push({
                    p1: pixels1[ind1],
                    p2: pixels2[ind2]
                });

pixels2.splice(ind2, 1);
            }
        }

while (pixels1.length > 0) {
            pixelGroups.push({
                p1: pixels1[0],
                p2: pixels2[0]
            });

pixels1.splice(0, 1);
            pixels2.splice(0, 1);
        }

running = true;
        (function a() {
            ctx3.clearRect(0, 0, 300, 300);

var length = l.value;
            var t = time % (2 * length);
            if (t > length)
                t = 2 * length - t;

for (var i = 0; i < pixelGroups.length; i++) {
                var group = pixelGroups[i];
                var pos = ease(group.p1, group.p2, t / length);
                ctx3.fillRect(pos.x, pos.y, 1, 1);
            }

if (!running)
                return;
            requestAnimationFrame(a);
        })();
    }
}

function reset() {
    ctx1.fillStyle = "white";
    ctx2.fillStyle = "white";
    ctx1.fillRect(0, 0, 300, 300);
    ctx2.fillRect(0, 0, 300, 300);
}

编译

CSS

HTML

Pixel manipulation，在两幅像素图之间变换的动画。

canvas, pixel

编辑器支持Emmet

快捷键

Pixel manipulation，在两幅像素图之间变换的动画。

canvas, pixel

使用HTML5 Canvas 2D实现的三维空间烟花绽放动画

HTML5 Canvas使用分形算法实现交互式花形图案自动绘制

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：