Agora que a API GreenSock está ganhando força, existem muitos tutoriais e guias de introdução por aí para proporcionar boas introduções à biblioteca, para não falar do próprio Fórum GreenSock e da própria documentação da API. Este artigo não é destinado para iniciantes, mas sim um mergulho mais profundo em alguns dos recursos mais interessantes e menos conhecidos com os quais uma pessoa pode trabalhar depois de ter conseguido passar pela introdução inicial. Como o SVG é escalonável e fácil de tornar responsivo (mais sobre isso em artigos subsequentes), tudo o que for mostrado será sobre SVG em específico, mas você ainda pode usar GSAP para Canvas também.

Por favor, tenha em mente que eles não me pagam para escrever para eles. Este não é um artigo de marketing. A biblioteca é uma ferramenta que eu considero extremamente útil. Eu, pessoalmente, a tenho usado muito desde que medi o desempenho de animações SVG nos registros da linha do tempo e por meio de pontos de referência visuais, e descobrimos como foram realizadas, bem como muitas tecnologias nativas. (Nota: esses testes foram executados em janeiro de 2015 com uma determinada versão de cada biblioteca, e uma certa versão do Chrome. Convido você a executar testes você mesmo com seus próprios casos de uso.)

Há uma infinidade de características interessantes para brincar com a API GreenSock. Este é o primeiro de uma série de artigos. Vamos começar com o foco em seu Plugin Bezier. Esse plugin está incluído no TweenMax; se você estiver usando TweenLite, vai ter que carregá-lo separadamente.

Movimento ao longo de um caminho

Movimento ao longo de um caminho é realmente vital para o movimento realista na animação. Interpolar valores individuais em direções x, y e z vai fazer com que você chegue longe. Considere o movimento de um vaga-lume em um frasco. Os seres vivos raramente se movem de uma forma linear. Atualmente, movimento ao longo de um caminho não é suportado no CSS (embora seja prestes a sair, e você pode votar para apoiar sua implementação no Microsoft Edge). O SMIL oferece movimento ao longo de um caminho, mas não há suporte SMIL oferecido no IE, nem há notícias de que ele será suportado no browser Edge. O GreenSock oferece uma maneira estável para criar esse efeito com o BezierPlugin, incluído no TweenMax, fornecendo suporte até ao IE8, ao contrário das tecnologias nativas. Assim, é atualmente a forma mais suportada e compatível com versões anteriores para trabalhar com o movimento ao longo de um caminho.

A fim de criar um movimento ao longo de um caminho, passamos as coordenadas de um array x, y como valores para a definição de Bezier. As coordenadas se referem a pontos relativos à posição do elemento, e não ao canvas. Em outras palavras, se for especificado x: 5, Y: 10, o movimento será definido a partir de 5 para a direita e 10 para baixo a partir de onde o elemento está atualmente. Pontos subsequentes ainda são definidos pela posição inicial do elemento, não pela última coordenada. Isso faz com que os pontos de plotagem em uma área fiquem muito mais fáceis de mapear em torno do elemento. No caso desses vaga-lumes em particular, eu alinhei o caminho para permanecer dentro dos limites da lâmpada, e também coloquei um pouco de movimento realista com erros que tendem a fazer com que o elemento pule um pouco:

TweenMax.to($firefly1, 6, {
  bezier: {
    type: "soft",
    values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, {x:30, y:20}, {x:10, y:30}],
    autoRotate: true
  },
  ease: Linear.easeNone,
  repeat: -1
}, "start+=3");

 

See the Pen Steampunk Lighting by Sarah Drasner (@sdras) on CodePen.

Vamos dizer que você não está animando os vaga-lumes. Talvez você gostaria de usar os caminhos como coordenadas gerais, mas deseja que o movimento entre eles seja suave e refinado. Há duas maneiras de conseguir isso. A primeira é definir o parâmetro type para soft-, o que vai levar os caminhos que você definir e a curva em relação a esses pontos como se estivessem sendo puxados em direção a eles, em vez de interpolação de valores para um conjunto e, em seguida, o próximo. A outra forma, mais sutil e que oferece mais controle, é para definir o tipo para atravessar (esse é o padrão), e definir um valor curviness. 0 não define nenhum curviness, 1 é normal, 2 é duas vezes mais curvado, e assim por diante. Abaixo, você tem os efeitos de cada configuração:

See the Pen Demo for Curviness in GreenSock Bezier by Sarah Drasner (@sdras) on CodePen.

Note que, passado um valor de 3, o curviness começa a parecer menos suave no geral, porque cada ponto está começando a fazer loop em torno de seu próprio eixo.

Além de thru e soft, temos duas outras especificações para tipos bezier: quadratic e cubic. Quadratic permite que você defina um ponto de controle entre cada âncora. Isso significa que você pode definir um ponto de controle (mas apenas um) entre suas coordenadas. Cubic é semelhante, mas você pode especificar dois pontos de controle. Para quadratic e cubic, você deve começar e terminar o array com uma âncora, que você pode usar como muitas iterações como você gosta.

Por enquanto, você deve passar um array de coordenadas, embora eu não ficaria surpresa se, no futuro, o GSAP adicionasse a capacidade de utilizar um caminho próprio SVG como definição para o movimento. Essa biblioteca consistentemente adiciona novas funcionalidades, e você pode acompanhar seu repositório de atualizações e ver o que foi adicionado no ano passado.

No trajeto anterior, simplesmente usei autoRotate: true, para que eu pudesse fazer os vaga-lumes girarem sobre seus próprios eixos que se correlacionam com a direção da linha, enquanto eles viajavam por meio do array. Você pode ser mais específico, definindo autoRotate para um número inteiro em vez de um booleano para definir o grau inicial do elemento antes de ele começar a girar. Você também pode passar um array, para ajustar essas opções:

1. Propriedade de posição 1 (normalmente “x”)
2. Propriedade de posição 2 (tipicamente “y”)
3. Propriedade de rotação (tipicamente “rotação”, mas também pode ser “rotation” ou “rotationY”)
4. Número de graus (ou radianos/Math.PI) para adicionar à nova rotação no início (isso é opcional)
5. Valor booleano que indica sim ou não para a propriedade de rotação e deve ser definido em radianos em vez de graus (o padrão é falso, o que resulta em graus)

Definir o array para autoRotate: [“x”, “y”, “rotation”, 0, false] é a mesma coisa que autoRotate: true, como eu tenho no trajeto abaixo, e o elemento seguirá a trajetória do caminho de rotação que está seguindo. Eu forneci uma alternância para autoRotate: verdadeiro e falso, para que você possa ver exatamente o efeito que esse parâmetro tem na animação:

See the Pen Demo for autoRotate true/false by Sarah Drasner (@sdras) on CodePen.

O pequeno personagem parece muito mais vivo dessa maneira do que se ele tivesse sido definido estaticamente para qualquer ângulo de grau durante o curso da interpolação. Você também pode ver que eu defini sua rotação inicial para baixo para a direção que ele estaria fazendo autoRotation – se eu não tivesse feito isso, não teria sido um “salto”, como ele tentou se endireitar ao longo da origem correta do eixo. Eu também poderia ter passado isso como uma opção no autoRotate conforme especificado acima, de qualquer forma funciona.

Movimento ao longo de um caminho não apenas se refere apenas à animação de personagens, é claro. Quando combinado com outros tipos de opacidade e animações de transformação, existem infinitas possibilidades para o controle para aperfeiçoá-lo de forma ainda mais expressiva nas animações.

Esta é a parte um de uma série de vários artigos. À medida que avançamos aprendendo cada uma dessas técnicas, começaremos com diferentes formas de trabalho em conjunto para criar um trabalho cada vez mais complexo e envolvente. Fique atento!

***

Sarah Drasner faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://davidwalsh.name/gsap-svg