Estou criando uma aplicação baseada em Vue.js. Essa aplicação deve conter alguns elementos que são animados de acordo com o mouse.
Criei as animações em javascript e percebe-se que os elementos ficam "tremendo" na tela, pode-se observar no seguinte vídeo: https://youtu.be/BN-hyMFO27M
Todos os elementos tem posição absoluta e são animados alterando sua posição na tela. Segue o código:
loadMouseMove: function () {
this.resetarPosicoes();
this.elementosMousemove = [];
var elementos = document.getElementsByClassName('efeitomouse');
for (var i = 0; i < elementos.length; i++) {
var config = JSON.parse(elementos[i].getAttribute('mmconfig'));
this.elementosMousemove.push({
objeto: elementos[i],
posicaoOriginal: {
top: elementos[i].offsetTop,
left: elementos[i].offsetLeft
},
fator: {
x: config.fx,
y: config.fy
}
});
}
this.mousemoveHabilitado = (elementos.length > 0);
this.mousePosicaoAtual = {
x: (this.tamanhoTela.width / 2),
y: (this.tamanhoTela.height / 2)
}
this.mouseUltimaPosicao = {
x: this.mousePosicaoAtual.x,
y: this.mousePosicaoAtual.y
}
},
resetarPosicoes: function () {
for (var i = 0; i < this.elementosMousemove.length; i++) {
this.elementosMousemove[i].objeto.style.left = '';
this.elementosMousemove[i].objeto.style.top = '';
}
},
mousemove: function (event) {
app.mouseUltimaPosicao.x = event.x;
app.mouseUltimaPosicao.y = event.y;
if (app.mousemoveHabilitado) {
cancelAnimationFrame(app.animationFrame);
app.animationFrame = requestAnimationFrame(app.animarMouseMove);
}
},
animarMouseMove: function () {
var deltaX = app.mouseUltimaPosicao.x - app.mousePosicaoAtual.x;
var deltaY = app.mouseUltimaPosicao.y - app.mousePosicaoAtual.y;
var deslocamentoMax = 20;
if (deltaX > 0) {
app.mousePosicaoAtual.x += (deltaX > deslocamentoMax) ? deslocamentoMax : deltaX;
} else {
app.mousePosicaoAtual.x += (deltaX < -deslocamentoMax) ? -deslocamentoMax : deltaX;
}
if (deltaY > 0) {
app.mousePosicaoAtual.y += (deltaY > deslocamentoMax) ? deslocamentoMax : deltaY;
} else {
app.mousePosicaoAtual.y += (deltaY < -deslocamentoMax) ? -deslocamentoMax : deltaY;
}
app.moverElementosMousemove(app.mousePosicaoAtual.x, app.mousePosicaoAtual.y);
if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
app.animationFrame = requestAnimationFrame(app.animarMouseMove);
}
},
moverElementosMousemove(x, y) {
var left = x - (app.tamanhoTela.width / 2);
var top = y - (app.tamanhoTela.height / 2);
for (var i = 0; i < app.elementosMousemove.length; i++) {
var elemento = app.elementosMousemove[i];
var px = elemento.posicaoOriginal.left + left * elemento.fator.x;
var py = elemento.posicaoOriginal.top + top * elemento.fator.y;
elemento.objeto.style.left = px + 'px';
elemento.objeto.style.top = py + 'px';
}
}
Há alguma forma de suavizar esse movimento para que esse efeito não ocorra mais?
transform
para animações no eixo X/Y por conta da Aceleração via Hardware.