0

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?

EDIT

https://codepen.io/anon/pen/jpVjxG

8
  • Coloca o resto do codigo ai html e css
    – hugocsl
    Commented 19/07/2018 às 22:16
  • Parece um problema de arredondamento de valores quebrados.
    – Piovezan
    Commented 19/07/2018 às 22:24
  • Se você reduzir a velocidade do movimento do mouse, os elementos tremem nenos? Só pra saber se o problema está na perfomance da rotina ou cálculo. Commented 20/07/2018 às 11:24
  • O ideal é sempre utilizar a propriedade transform para animações no eixo X/Y por conta da Aceleração via Hardware.
    – Kazzkiq
    Commented 20/07/2018 às 12:54
  • 1
    @Kazzkiq o hardware só vai ser ativado se vc usar propriedades que usam os 3 eixos de renderização, ou seja, transformZ, rotateZ, etc.
    – hugocsl
    Commented 20/07/2018 às 13:24

2 Respostas 2

3
+100

É considerado uma boa prática utilizar a propriedade transform do CSS3 sempre que você for fazer algum tipo de animação CSS.

Isto ocorre porque certas propriedades CSS possuem sua renderização otimizada via hardware, tornando possível o uso da GPU do dispositivo nas animações, o que melhora consideravelmente a performance, principalmente em dispositivos móveis.

Então, no seu caso, ao invés de usar propriedades como top e left, você poderia utilizar translate3d(x, y, z) para ativar esse tipo de otimização.

Exemplo:

// No lugar de left e top
elemento.objeto.style.left = px + 'px';
elemento.objeto.style.top = py + 'px';

// Usar transform
elemento.objeto.style.transform = `translate3d(${px}px, ${py}px, 0)`;
-1

Provavelmente se você adicionar um CSS ao objeto que recebe as propriedades left e top com uma determinada transition isso se resolva.

transition: .1s all ease;
1
  • 1
    Já tentei usar o transition e não funcionou. :/
    – Pilati
    Commented 16/07/2018 às 19:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .