javascript - 画布翻转图像并与其他更改

Question

我正在尝试用画布实现翻转图像，就像这样，但动画从中间很奇怪

更新

1. 这只是图像的一部分，最终的结果是

从

过渡

至

但是我遇到了麻烦，因为我为每个动画创建了一个小缓冲区，然后用时间间隔替换它们

// globals
animations = [];
handler;
// Main canvas, the user see this
context;
canvas;

function flip(x, y, width, height) {        
    // getBuffer returns {cv: canvas, cx, context }
    var buffer = getBuffer(canvas.width, canvas.height),

        // getNextImage return a Image object ready for use
        img = getNextImage(),
        ready = false,
        interval;

    buffer.cx.drawImage(img, x, x);

    newImage = buffer.cx.getImageData(x, y, width, height);

    for (var i = 5; i > 0; i--) {
        smallBuff = getBuffer(width, height);
        scale = -(1/i);
        smallBuff.cx.translate(width / 2, 0);
        smallBuff.cx.scale(scale, 1);
        smallBuff.cx.putImageData(newImage, x, y);

        animations.push(smallBuff);
        ready = (1 === i);
    };

    interval = setInterval(function() {
        console.log("Are you ready: ", ready);
        if (ready) {
            clearInterval(interval);

            handler = setInterval(function() {
                animation(x, y, width, height);
            }, 200);
        }
    }, 100);
}

function animation(x, y, width, height) {
    if(animations.length > 0) {
        var anim = animations.pop();
        anim.cx.fillstyle = '#000';
        anim.cx.clearRect(x, y, width, height);
        context.drawImage(anim.cv, x, y);
        console.log("left:", animations.length);
    } else {
        clearInterval(handler);
    }
}