Agora que a API GreenSock está ganhando força, há muitos tutoriais e Primeiros passos para fornecer boas introduções à biblioteca, sem mencionar o próprio guia do GreenSock Fórum e Documentação. Este artigo não se destina a iniciantes, mas sim a um mergulho mais profundo em alguns dos recursos mais interessantes e menos conhecidos com os quais se pode trabalhar depois de passar pela introdução inicial. Como o SVG é escalável, nítidoe fácil de tornar responsivo (mais sobre isso em artigos posteriores), tudo o que for mostrado será especificamente sobre SVG; no entanto, o senhor também pode usar o GSAP para Canvas.
Lembre-se de que eles não me pagam para escrever para eles – este não é um artigo de marketing. A biblioteca é uma ferramenta que considero extremamente útil. Pessoalmente, eu a utilizo muito desde que desempenho de benchmarking para animação SVG em registros de linha do tempo e por meio de benchmarks visuais, e constatou que o desempenho era tão bom quanto o de muitas tecnologias nativas. (Observação: lembre-se de que esses testes foram executados em janeiro de 2015 com uma determinada versão de cada biblioteca e uma determinada versão do Chrome. Recomendo que os senhores executem testes com seus próprios casos de uso).
Há uma infinidade de recursos interessantes com os quais o senhor pode brincar na API do GreenSock. Este é o primeiro de uma série de artigos. Começaremos com o foco em seu plug-in Bezier. Esse plug-in está incluído no TweenMax; se o senhor estiver usando o TweenLite, terá de carregá-lo separadamente.
Movimento ao longo de um caminho
O movimento ao longo de um caminho é realmente vital para o movimento realista na animação. A interpolação de valores únicos nas direções x, y e z só o levará até certo ponto. Considere o movimento de um vaga-lume em um frasco. Os seres vivos raramente navegam de forma linear. Atualmente, o movimento ao longo de um caminho não é suportado no CSS (embora seja em fase de desenvolvimentoe o senhor pode votar para apoiar sua implementação no Microsoft Edge). O SMIL oferece movimento ao longo de um caminho, mas o nenhum suporte a SMIL é oferecido no IEnem parece ser compatível com o navegador Edge, que será lançado em breve. O GreenSock oferece uma maneira estável de criar esse efeito com o BezierPlugin, incluído no TweenMax, que oferece suporte até mesmo no IE8, diferentemente das tecnologias nativas. Portanto, essa é atualmente a maneira mais compatível com suporte total e com versões anteriores para trabalhar com movimento ao longo de um caminho.
Para criar um movimento ao longo de um caminho, passe uma matriz de x, y como valores na definição de bezier. As coordenadas referem-se a pontos relativos à posição do elemento, não à tela em si. Em outras palavras, se o senhor especificar x:5, y:10, o movimento será definido a partir de 5 para a direita e 10 para baixo de onde o elemento está atualmente. Os pontos subsequentes ainda são definidos pela posição inicial do elemento, não pela última coordenada. Isso torna a plotagem de pontos em uma área muito mais fácil de mapear ao redor do elemento. No caso desses vaga-lumes em particular, eu ajustei o caminho para que ficasse dentro dos limites da lâmpada e também parecesse um pouco irregular, pois o movimento realista dos insetos tende a saltar 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");
Veja a caneta Iluminação Steampunk por Sarah Drasner (@sdras) em CodePen.
Digamos que o senhor não esteja animando vaga-lumes. Talvez o senhor queira 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 type para soft- isso pegará os caminhos que o senhor fornecer e se curvará em direção a esses pontos como se estivesse sendo puxado na direção deles, em vez de interpolar valores para um conjunto e depois para o próximo. A outra maneira, mais sutil e que oferece mais controle, é definir o tipo como thru (esse é o padrão) e definir um curviness valor. 0 não define nenhuma curvatura, 1 é normal, 2 é duas vezes mais curvilínea, e assim por diante – essa caneta mostra os efeitos de cada configuração:
Veja a caneta Demonstração de curvatura no GreenSock Bezier por Sarah Drasner (@sdras) em CodePen.
Observe que, após o valor 3, a curvatura começa a parecer menos suave em geral, porque cada ponto está começando a girar em torno de seu próprio eixo.
Além de thru e soft, temos duas outras especificações para os tipos de bezier: quadratic, e cubic. O Quadratic permite definir um ponto de controle entre cada âncora. Isso significa que o senhor pode definir um ponto de controle (mas apenas um) entre as coordenadas. Cubic é semelhante, mas o senhor pode especificar dois pontos de controle. Tanto no caso do quadrático quanto do cúbico, o usuário deve começar e terminar a matriz com uma âncora, embora possa usar quantas iterações quiser.
Por enquanto, o senhor passa uma matriz de coordenadas, embora eu não me surpreenderia se, no futuro, o GSAP adicionasse a capacidade de usar um caminho SVG como a definição do movimento. Essa biblioteca sempre adiciona novos recursos, e o senhor pode observar seu repositório para obter atualizações e ver o que foi adicionado no ano passado.
Na caneta anterior, estou simplesmente usando autoRotate: truepara que eu possa fazer com que os vaga-lumes girem em seu próprio eixo, que se correlaciona com a direção da linha enquanto eles percorrem a matriz. O senhor pode ser mais específico definindo autoRotate como um número inteiro em vez de um booleano para definir o grau inicial do elemento antes que ele comece a girar. O senhor também pode passar uma matriz para ajustar essas opções:
- Propriedade de posição 1 (normalmente “x”)
- Propriedade de posição 2 (normalmente “y”)
- Propriedade rotacional (normalmente “rotation”, mas também pode ser “rotationX” ou “rotationY”)
- Número de graus (ou radianos/Math.PI) a serem adicionados à nova rotação no início (opcional)
- Valor booleano que indica se a propriedade de rotação deve ou não ser definida em radianos em vez de graus (o padrão é false, que resulta em graus)
Definindo a matriz para autoRotate: ["x","y","rotation",0,false] é a mesma coisa que autoRotate:true, como fiz na caneta abaixo, e o elemento seguirá a trajetória de rotação do caminho que está seguindo. Forneci uma alternância para autoRotate:true e false, para que o senhor possa ver exatamente o efeito que esse parâmetro tem na animação:
Veja a caneta Demonstração de autoRotate true/false por Sarah Drasner (@sdras) em CodePen.
O pequeno personagem parece muito mais vivo dessa forma do que se tivesse sido definido estaticamente para qualquer ângulo durante o curso da interpolação. O senhor também pode ver que eu defini a rotação inicial dele para que ficasse voltado para baixo, na direção em que ele faria a autoRotação – isso porque, se eu não tivesse feito isso, haveria um pequeno “salto” quando ele tentasse se endireitar ao longo da origem e do eixo corretos. Eu também poderia ter passado isso como uma opção no autoRotate, conforme especificado acima, de qualquer forma funciona.
O movimento ao longo de um caminho não se refere apenas à animação de personagens, é claro. Quando combinados com outros tipos de opacidade e animações de transformação, há infinitas possibilidades de controle expressivo e refinado sobre as animações.
Esta é a primeira parte de uma série de várias partes. À medida que avançarmos no aprendizado de cada uma dessas técnicas, começaremos a unir diferentes maneiras de trabalhar para criar trabalhos cada vez mais complexos e envolventes. Fique ligado!
