9

O conceito que se está a tentar atingir é o movimento continuo sobre o eixo do X entre um valor e a sua representação em negativo:

Gráfico com onda de efeito desejado

Até ao momento, esse conceito tem uma falha, a animação é realizada de 0 graus até ao valor facultado, mas depois ao recuar para o mesmo valor em negativo, existe um pulo para os 0 graus e só depois é que anima para o valor facultado. O mesmo acontece ao voltar ao valor positivo:

Gráfico com onda do efeito problemático

Ver exemplo no JSFiddle

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
	args.complete = $.proxy(args.complete, e);
	args.step = function(now) {
	  $.style(e, 'transform', 'rotate(' + now + 'deg)');
	  if (step) return step.apply(e, arguments);
	};

	$({deg: 0}).animate({deg: angle}, args);
  });
};

// animate snowman
var d = 5;

function jingle() {
  $("#snowman").animateRotate(d, {
    duration: 1337,
    easing: 'linear',
    complete: function () {
      jingle(d = -d);
    }
  });
}

jingle();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="snowman" alt="snowman" src="https://i.sstatic.net/AmNNj.png">

O objeto a animar

A imagem em baixo é o objeto que se pretende animar conforme podem analisar nas demonstrações.

Snowman, who else?

Pergunta

Como posso suavizar o efeito de forma a chegar à curva de animação pretendida?

3 Respostas 3

7

Utilizando @keyframes junto com a propriedade animation para ter controle sobre a animação.

Keyframes na MDN

Animações na MDN


Para esse caso, somente com CSS, uma possível solução seria:

@-webkit-keyframes snowman {
    from {-webkit-transform: rotate(4deg)}
    to   {-webkit-transform: rotate(-4deg)}
}

@keyframes snowman {
    from {transform: rotate(4deg)}
    to   {transform: rotate(-4deg)}
}

#snowman {
    -webkit-animation: snowman 2s alternate infinite ease-in-out;
            animation: snowman 2s alternate infinite ease-in-out;
}
<img id="snowman" alt="snowman" src="https://i.sstatic.net/AmNNj.png">

6

Uma sugestão é confiar essa animação no CSS, via transition do transform: rotate().

Acho que o jQuery pode ser simplificado para:

var ang = -5;
var el = document.querySelector('img');

setInterval(function () {
    ang = -ang;
    el.style[prefix + 'transform'] = 'rotate(' + ang + 'deg)';
}, 1000);

e o CSS

img {
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

e juntando uma correção para browsers que precisem de sufixo pode usar-se

var prefix = (function () {
    var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice.call(styles)
            .join('')
            .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1];
    if (pre == 'moz') return '';
    return '-' + pre + '-';
})();

(adaptado / importado do blog do David Walsh)

Nesse caso a animação ficaria: http://jsfiddle.net/k4fp79w1/

4

Esquecendo um pouco a parte de código, vamos pensar no seguinte:

  • Quando um objeto arredondado apoiado no chão gira, ele também se move para o lado correspondente ao giro.

  • Além disso, a sombra não gira junto, mas sim se projeta conforme a forma do objeto. Neste caso, a sombra é uma "mancha genérica", pois se trata de um desenho apenas, mas espera-se que ela se movimente de acordo com o objeto.


Partindo disso, dividi o boneco em questão em duas imagens: O próprio, e a sombra.

Como já respondido pelo @Renan (que também recebeu meu upvote), keyframes são um caminho interessante para este tipo de animação, pois serão gerenciados usualmente por um subsistema separado do browser, provavelmente numa thread separada do JS, garantindo uma animação mais fluida, ao mesmo tempo sobrecarregando menos a aplicação principal (mas observe a "nota 2" no rodapé da questão, para ver os pontos contra).


Juntando tudo isto, segue o resultado (o vendor-prefix atrapalha a elegância um pouco):

@-webkit-keyframes snowman { from { -webkit-transform: translateX(-20px) rotate(-10deg) }
                             to   { -webkit-transform: translateX( 20px) rotate( 10deg) } }
@-webkit-keyframes shadow  { from { -webkit-transform: translateX(-10px) }
                             to   { -webkit-transform: translateX( 10px) } }
@keyframes snowman         { from { transform: translateX(-20px) rotate(-10deg) }
                             to   { transform: translateX( 20px) rotate(  0deg) } }
@keyframes shadow          { from { transform: translateX(-10px) }
                             to   { transform: translateX( 10px) } }
#snowman { -webkit-animation: snowman 2s alternate infinite ease-in-out;
                   animation: snowman 2s alternate infinite ease-in-out; z-index:10; }
#shadow  { -webkit-animation: shadow  2s alternate infinite ease-in-out;
                   animation: shadow  2s alternate infinite ease-in-out; z-index: 0; }
#boneco { min-height: 350px } #boneco img { position: absolute; }
<p>Aumente a janela ou use a barra de rolagem para ver o efeito.</p>
<div id="boneco">
  <img id="snowman" src="https://i.sstatic.net/GRMcV.png">
  <img id="shadow"  src="https://i.sstatic.net/ZDz9I.png">
</div>

Nota 1: a resposta do @Sergio também é interessante para situações mais complexas em que o keyframe possa ser insuficiente, além de conter uma camada de compatibilização bem interessante.

Nota 2: dito isto, aqui tem um artigo (en) que mostra que keyframes também tem seus problemas, e um deles é sincronização. Vale a pena dar uma lida.

2
  • 2
    Construíram esse boneco meio torto. Ele pende mais para a esquerda... :p
    – bfavaretto
    Commented 17/12/2014 às 0:24
  • 1
    @bfavaretto sei que a observação tem um tom de brincadeira (baseada em fatos verídicos :P ), mas dá para usar ângulos diferentes em cada lado (por exemplo, -5 e 15 em vez de -10 e 10). Óbvio que num caso desses o certo é desentortar o boneco, mas acho que ele torto contribui para a dramatização da instabilidade infinita :)
    – Largato
    Commented 17/12/2014 às 0:30

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 .