Objetivo

Esse tutorial tem objetivo de auxiliar em animações do After Effects para o Xcode
de forma simples, existe uma gama de possibilidades utilizando After Effects,
dependência e plugin citados no tutorial, por isso será apresentado noções das
ferramentas para o uso.

Tutorial

Instalação Creative Cloud e After Effects

O primeiro passo é instalar o Adobe Creative Cloud, que é o gerenciador de todos

os softwares Adobe.

Link: https://www.adobe.com/br/creativecloud/desktop-app.html

Logo após faça o login. Em seguida instale o After Effects.

Instalação do plugin Bodymovin

Bodymovin é um plugin que vai fazer toda a “mágica”, transformando as

animações que você fizer no After Effects ser compatível para o XCode. Então após a
instalação por completo do After Effects, clique em Free.
Link: https://www.adobeexchange.com/creativecloud.details.12557.html

Download do projeto After Effects

Para exemplificar o uso do Bodymovin, faça o download do Sample e abra-o no

After Effects.

http://bit.ly/PinJumpDownload

Após isso Vai em After Effects CC > Preferências > Geral

E ative: Permitir que scripts gravem arquivos e acessem a rede
Isso permitirá que o Bodymovin atue gerando o script.
Agora sim clique em Janela>Extensões>Bodymovin ou
Window>Extensions>Bodymovin
Abrirá a janela para renderização, mas antes você pode configurar e ativar alguns itens
dependendo do projeto. Clique em Settings, e verá varias opções:

Configurações:

Slit - Composições em vários arquivos json a cada X segundos

Glifos - Se selecionado, converte fontes em formas
Oculto - Selecione se você precisa de camadas ESCONDIDAS para serem exportadas
Guias - Selecione se você precisa de camadas Guias para serem exportadas
Comps extras - Selecionam se as expressões estão apontando para composições
externas
Assets - Configurações de ativos rasterizados (jpg, png)
Standalone - Gera um html junto com os arquivo para visualizar a animação
AVD - Exportações avd e XML para vetor de animação Android.

Dicas:

• Se no projeto você utilizar imagens (jpg, png) ative o Assets (exibirá uma lista de
opções, clique em Original Assets Name);
• Se no projeto você utilizar texto, converta para formas na timeline do projeto e seleciona
Glifos. Pois o plugin não exporta fontes e sim curvas.

No caso deste Sample, não é necessário selecionar nenhum item de configurações.

Agora só selecionar o local destino para salvar. O Bodymovin converterá todas as

animações para Json, essa é a “mágica” de conversão. E depois clicar em Render.

2. Renderização

1.Destino

Dependencia Lottie iOS

Lottie é um biblioteca móvel para Android e iOS que analisa as animações do

Adobe After Effects exportadas como json com Bodymovin e renderiza as animações
vetorizadas nativamente no celular.

Vamos a instalação!

Obs: Verifique se você tem instalado o gerenciador de dependências CocoaPods.

(Está instalado!)

Caso contrário, faça a instalação:

https://cocoapods.org/

Crie um novo projeto no Xcode.

Fecha o Xcode, e vai até o diretório do projeto. Crie um arquivo pod file.

Abra o arquivo pod file e adicione:

 # Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'testHive' do
# Comment the next line if you're not using Swift and don't want to use dynamic
frameworks
use_frameworks!

# Pods for testHive

pod 'lottie-ios'

end

Salva e volta ao terminal e digita: pod Install, com isso instalará a dependência.

Após a instalação abra no projeto o .xcworkspace

Importe o Lottie no ViewController

Import Lottie
Adicione uma View em Main.storyboard do tamanho de width: 150px e height:150px.
Logo depois crie uma outlet em ViewController.swift.

@IBOutlet weak var myView: UIView!

Sabe aquele arquivo json gerado pelo Bodymovin? Então, agora basta copiar para o
projeto

E finalmente chegou a hora de colocar para funcionar!

Agora é necessário utilizar a classe do Lottie. Crie uma variável do tipo

LOTAnimationView.

var animation: LOTAnimationView?

E no viewDidLoad adicione:

override func viewDidLoad() {

super.viewDidLoad()

animation = LOTAnimationView(name: "data")

self.myView.addSubview(animation!)
animation?.play()

E o que quer dizer isso?

Após super.viewDidLoad(), utilizo o LOTAnimationView para passar aquele json que já

esta no projeto, não é necessário colocar a extensão .json.

E depois adiciono na view o que criei na storyboard, e por fim a animação começa pela
função .play()

Existe vários métodos para animação, inclusive .stop(), . loopAnimation entre outros.

Referências

Adobe Creative Cloud: https://www.adobe.com/br/creativecloud/desktop-app.html

Lottie-iOS: https://github.com/airbnb/lottie-ios

Cocoa Pods: https://cocoapods.org/