Como animar o processo de uma imagem de tela transformada voltando ao seu estado original?
Estou em uma transformação de (1, 0, 0, -0,7, 0,4, 320, 70) e quero terminar gradualmente em (1, 0, 0, 1, 0, 0), como faço isso?
Este é o código que transforma as imagens:
document.addEventListener("DOMContentLoaded", function(event) {
image = new Image();
image2 = new Image();
image3 = new Image();
image4 = new Image();
window.onload = function() {
//first image
var width = image.width,
height = image.height;
canvas1 = document.getElementById("num1Canvas");
bottomSlice = canvas1.getContext("2d");
//second image
var width2 = image2.width,
height2 = image2.height;
canvas2 = document.getElementById("num2Canvas");
topSlice = canvas2.getContext("2d");
//third image
newCanvas1 = document.getElementById("newNum1Canvas");
newBottomSlice = newCanvas1.getContext("2d");
//fourth image
newCanvas2 = document.getElementById("newNum2Canvas");
newTopSlice = newCanvas2.getContext("2d");
for (var i = 0; i <= height / 2; ++i) {
//first image transform
bottomSlice.setTransform(1, 0, -0.7, .4, 320, 70);
bottomSlice.drawImage(image,
0, height / 2 - i, width, 2,
0, height / 2 - i, width, 2);
bottomSlice.setTransform(1, 0, -0.7, 0.4, 320, 70);
bottomSlice.drawImage(image,
0, height / 2 + i, width, 2,
0, height / 2 + i, width, 2);
//second image transform
topSlice.setTransform(1, 0, -0.7, .4, 320, 0.2);
topSlice.drawImage(image2,
0, height2 / 2 - i, width2, 2,
0, height2 / 2 - i, width2, 2);
topSlice.setTransform(1, 0, -0.7, 0.4, 320, 0.2);
topSlice.drawImage(image2,
0, height2 / 2 + i, width2, 2,
0, height2 / 2 + i, width2, 2);
}
};
image.src = "bottom.png";
image2.src = "top.png";
image3.src = "bottom.png";//
image4.src ="top.png";
});
E basicamente quero que algo assim ocorra:
function b(){
bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
bottomSlice.setTransform(1, 0, -0.6, 0.3, 200, 40);
bottomSlice.drawImage(image, 0, 0);
bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
bottomSlice.setTransform(1, 0, -0.4, 0.6, 150, 30);
bottomSlice.drawImage(image, 0, 0);
bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
bottomSlice.setTransform(1, 0, -0.1, 0.8, 100, 20);
bottomSlice.drawImage(image, 0, 0);
bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
bottomSlice.setTransform(1, 0, 0, 1, 0, 0);
bottomSlice.drawImage(image, 0, 0);
}
No entanto, o código acima não funciona e é codificado, o que não é o que eu quero. Eu estava pensando em alguma maneira de usar um tipo de coisa setTimeout para fazer isso, mas não tenho certeza de como eu iria fazer isso.