Animação Segmentada (Tutorial)
Bora desenhar?
Atualmente diversas aplicações como o Uber, Airbnb e Hopper fazem uso de animações para aprimorar a experiência do usuário.
Neste tutorial você vai aprender a desenhar uma linha, e usar alguns tipos de recurso de animação que também podem melhorar as suas aplicações.
Vamos abordar diversos assuntos que envolvem este tópico, como CABasicAnimation, UIBezierPath e suas funções auxiliares. Para entender os conceitos envolvidos neste tutorial, é necessário ter entendimento básico sobre desenvolvimento iOS.
Desenhando uma linha
Para que possamos desenhar uma linha utilizaremos duas classes principais: UIBezierPath() e CAShapeLayer().
Inicialmente, a UIBezierPath() irá apenas definir o formato do caminho que iremos criar e desenhar, sendo que esse caminho pode ter uma forma retangular, oval, de arcos ou até mesmo de polígonos complexos.
Logo abaixo iremos criar um Path que irá representar uma linha que vai do ponto (50,100) até o ponto (200, 100).
Quando utilizamos o método move(to: CGPoint) estamos apenas posicionando o ponto de referência do método em um ponto em questão. No nosso caso esse ponto representa o início da nossa linha.
O método addLine(to: CGPoint), diferentemente do move(to: CGPoint), está efetivamente traçando uma linha até o ponto desejado, que para nós representa o ponto final da linha (200, 100).
Agora que criamos nossa linha em UIBezierPath(), precisamos de fato renderiza-la em nossa view. Para isso iremos criar uma nova layer CAShapeLayer().
Com os atributos strokeColor e lineWidth podemos definir a cor e a largura da nossa linha, respectivamente.
Agora precisamos indicar para a nossa layer qual será o path a ser renderizado. Iremos utilizar o path que criamos para representar nossa linha, e, com isso, adicionar nossa layer à estrutura da view na qual queremos desenhar.
O código a cima gera o seguinte resultado:
Animando a linha
Agora vamos dar vida a nossa linha! Vamos fazer com que ela seja desenhada de forma animada e não simplesmente apareça em nossa tela.
Para isso será necessário trabalhar com mais uma classe, CABasicAnimation().
Esta classe representa uma animação básica, que pode manipular somente um atributo da nossa layer. Para selecionar qual atributo se deseja animar, basta escolhê-lo na inicialização do objeto.
O chamado keyPath é uma string que neste caso vai representar o atributo escolhido. A lista de atributos que esta função pode acessar é encontrada neste link: Key-ValueCodingExtensions
Como a animação vai manipular um UIBezierPath vamos trabalhar com a keyPath strokeEnd. Esta keyPath indica que iremos animar a linha sendo desenhada.
O atributo fromValue varia entre 0 e 1, e indica proporcionalmente ao tamanho do path em que ponto do nosso desenho a animação será iniciada. Por exemplo, se o valor do fromValue for 0.5 isso significa que a primeira metade da nossa linha será desenhada mas NÃO será animada e a segunda metade será tanto desenhada quanto animada.
O atributo toValue também varia entre 0 e 1, e indica proporcionalmente ao tamanho do path em que ponto do nosso desenho a animação se encerrará.
O atributo duration representa a duração total da animação em segundos.
As animações são gerenciadas pelas layers. Logo, nós devemos adicionar as animações criadas às suas respectivas layers:
O parâmetro forKey representa um nome que podemos passar às nossas animações. Esse nome pode ser arbitrário e pode ser usado ao se gerenciar diversas animações ou para gerenciar animações específicas mas não influenciará no resultado desse tutorial.
Ao rodar, você chegará a este resultado:
Fazendo uma animação segmentada
Nesse tópico iremos desenvolver uma animação segmentada de uma linha. Nessa animação nós faremos com que nossa linha se mova horizontalmente pela tela entretanto, o que irá realmente acontecer é que iremos animar a linha sendo desenhada e ao mesmo tempo sendo apagada dando a impressão de movimento.
Para isso iremos criar uma linha da mesma maneira que vimos anteriormente alterando apenas mais um atributo, o strokeStart que indica, relativo ao tamanho do path, em que ponto a animação deve começar. Isso irá influenciar na proporção de linha que permanecerá desenhada no final da animação.
Feito isso, iremos criar nossa animação.
Para esta animação teremos duas animações distintas que serão agrupadas para formar uma única animação, uma que irá desenhar nossa linha e outra que irá apagá-la.
Vamos criar a animação que irá desenhar a linha assim como fizemos anteriormente, bem como a animação que apaga a linha.
É importante notarmos nos diferentes valores para os atributos fromValue e toValue de nossas animações.
- Ao atribuirmos valores maiores ao
fromValuedamyEndAnimationfazemos com que essa animação se inicie em um ponto relativo a frente damyStartAnimation. Dessa forma poderemos ver uma porção de 20% de nossa linha. - Já com os valores de
toValue, o que está acontecendo é que a animação que está desenhando a linha está indo até o final do caminho e a animação que apaga a linha vai até 80% da linha. Com isso, ao final da animação, teremos 20% da linha desenhada.
Para melhor exemplificar, imagine que um lápis está fazendo um traçado em uma folha e que uma borracha está logo atrás seguindo o mesmo caminho apagando o que foi desenhado.
Agora precisamos adicionar essas animações a nossa layer. Para isso iremos criar um grupo de animações utilizando a classe CAAnimationGroup().
O atributo animations recebe como valor um vetor com as animações desejadas. Em nosso caso, são as animações que criamos a cima.
O atributo duration, como já foi dito, representa a duração total das animações em segundos.
Basta agora adicionarmos o grupo de animações a nossa layer e adicionarmos nossa layer a layer de nossa view.
Depois de cumprir todas estas etapas, o resultado será este:
O que fazer agora?
Agora que você já sabe aplicar animações às suas linhas, que tal trabalhar em uma aplicação para se aprofundar mais no assunto? Recomendo fortemente que você baixe e use nosso projeto tutorial no Playground, para aprimorar as suas habilidades com UIBezierPath!
O que ensinamos aqui é só o início, existem infinitas possibilidades de animações, basta estudar o assunto e usar sua imaginação!
