Primeiras aulas do curso iOS Animações: Core animation e transições

iOS Animações: Core animation e transições

Movimentando elementos - Introdução

Olá, pessoal, meu nome é Ândriu, bem-vindos ao curso de animações para iOS aqui na Alura.

E para que você consiga aproveitar todo o conteúdo desse curso, eu aconselho que você já tenha estudado o curso onde a gente fala de layouts, que é o curso iOS layout parte um.

Nesse curso, pessoal, eu vou explicar para vocês como a gente trabalha com telas responsivas através de constraints.

Então é muito importante que você se sinta familiarizado com esse conteúdo antes de avançar para a parte de animações.

Então, é bem legal esse curso, eu aconselho que você saiba utilizar as constraints e depois volte, para que a gente siga, então, com o nosso curso de animações.

Esse curso, pessoal, a gente vai iniciar desde o começo, onde eu vou explicar para vocês como a gente faz para mover elementos de um lugar para o outro de forma animada.

Então a gente vai aprender a mexer com a classe CGRect, a gente vai aprender o famoso método UI View.animate e as suas variações.

E depois que a gente entender como esses métodos funcionam, como que a gente trabalha movimentando elementos, a gente vai partir para o nosso projeto Alura Viagens, que é o projeto que você já conhece, que a gente estudou nos cursos de iOS layout parte um e dois.

O que a gente vai fazer nesse curso, pessoal? A gente vai montar uma tela de inicialização do app, que é a launch screen, de forma animada.

Então, se eu abrir o aplicativo, repara que a label Alura Viagens, a gente consegue movimentar essa label, só que dessa vez através de constraints.

Então a gente vai ver que é possível a gente movimentar elementos que estão presos com constraints.

Depois a gente vai avançar, pessoal, e a gente vai trabalhar com transições de ViewController, então a gente vai aprender a trabalhar com o protocolo de UINavigationControllerDelegate, que nos permite interceptar alguns métodos que a gente já conhece, que é o push e o pop.

Ou seja, quando a gente vai exibir um novo ViewController ou quando a gente vai voltar. Então, nesse caso a gente vai aprender a criar animação de encaixe.

Então a gente vai levar a imagem que a gente selecionar aqui, por exemplo, Natal. Repare que a gente levou a imagem para cima e apresentou o ViewController da direita para a esquerda.

E na hora que a gente volta, também a gente volta a imagem para o ponto inicial onde a gente clicou, e a gente desaparece com o ViewController.

Então, com isso, pessoal, a gente tem esse efeito de encaixe. Olha que bacana que fica. A gente clica e é como se a tela estivesse se encaixando.

Também a gente vai aprender a trabalhar com algumas classes do Core Animation, como a CABasicAnimation, onde a gente vai aprender a criar esse efeito de tremer o Text Field quando o usuário não preencheu.

E também, pessoal, a gente vai aprender a criar o efeito de pulsar, através da classe CASpringAnimation, então a gente vai aprender a utilizar também essas classes do framework Core Animation.

Esse é o conteúdo que a gente vai ver durante esse curso, pessoal. E eu espero você.

Movimentando elementos - Iniciando o projeto

Olá, pessoal, essa é a primeira aula do nosso curso de animações para iOS, mas antes de a gente abrir o Xcode e começar a criar o nosso projeto, como é de costume, eu gostaria de te fazer uma pergunta: o que você entende pela palavra animação?

Vamos dar uma olhada no significado dessa palavra no dicionário, para nos ajudar a identificar o que a gente vai estudar durante esse curso, pessoal?

Eu já tenho aqui duas definições e a gente vai dar uma olhada.

Então, animação: ato ou efeito de animar; movimento de idas e vindas, entradas e saídas; técnica que permite dar a desenhou ou bonecos a ilusão de movimento.

Eu tenho aqui a outra definição: ato ou efeito de animar; movimento, aceleração; técnica cinematográfica, que se baseia em fotografar uma sequência de imagens fixas de desenhos ou bonecos, visando a sugestão de movimento.

Então aqui pessoal, tem algumas palavrinhas que nos ajudam a entender mais ou menos o que a gente vai começar a estudar.

Olha só: movimento; aceleração; sugestão de movimento. Então, tudo isso a gente vai traduzir agora para aplicativos iOS.

Qual a importância de a gente utilizar animações nos nossos apps?

Aumenta o engajamento do usuário, deixa o nosso aplicativo mais bonito.

Então a gente vai começar nessa aula desde o começo, a estudar essas técnicas para, durante o decorrer do curso, a gente conseguir fazer algumas bem bacanas.

Então vamos começar.

Agora sim eu vou voltar aqui para a área de trabalho, eu vou abrir o meu Xcode. Eu sugiro, pessoal, que você faça esse curso utilizando a mesma versão do Xcode que eu estou utilizando, que é a versão 10.1.

Então vamos lá. Eu vou clicar aqui em criar um novo projeto no Xcode, ele vai abrir essa caixa de diálogo, eu vou manter selecionado a primeira opção, que é Single View App.

Vou dar um next.

O nome do nosso projeto, pessoal, vai ser Animações. Eu vou deixar o resto do jeito que tá aqui mesmo, vou dar um next e um create.

Eu vou salvar o meu projeto na área de trabalho.

Bacana, pessoal. Logo de cara eu já vou lá no storyboard para a gente começar a incluir então alguns elementos no ViewController, então cliquei no storyboard aqui no lado esquerdo, aí ele está carregando.

E ele me traz aí então o primeiro ViewController, que já vem por padrão.

Vou ocultar essa barra porque eu não vou utilizar agora.

Se você tiver utilizando essa versão do Xcode, a 10.1, ocorreu algumas mudanças. A primeira diz respeito ao object library, que aquela coleção de objetos que a gente utiliza para montar então a interface do nosso app.

Antigamente, ela ficava aqui embaixo, a partir de agora ele fica nesse iconezinho aqui.

E aqui eu consigo ter acesso aos mesmos elementos, a única diferença é que antes ficava aqui do lado direito na parte inferior e agora ele fica nesse botãozinho aqui, onde eu estou passando o cursor do mouse.

Então vou clicar aqui na biblioteca e eu vou pesquisar por view.

Ele vai me trazer vários resultados, provavelmente é um dos últimos, e eu vou selecionar esse elemento aqui, que é a view. Vou clicar e arrastar para dentro do ViewController.

Legal. Ele é um quadradão branco. Eu vou começar, então, alterando essas propriedades de largura e altura. Como é que eu faço isso?

Eu vou clicar aqui nessa reguinha, que é o penúltimo ícone, que se chama size inspector.

Cliquei aqui, ele vai me trazer algumas coisas como posição, X e Y, altura e largura. Então eu vou mexer aqui na largura, eu vou colocar 50 e a altura 50.

Beleza. Ficou um quadradinho branco ainda na tela, mas já está aí do tamanho que eu quero.

Agora o que eu vou fazer, pessoal? Eu vou alterar a cor, então eu vou clicar aqui no quarto ícone e vou vir em background. Repara que ele está white color, ou seja, branco. E eu vou alterar então para roxo, vou clicar aqui no roxo.

Legal, pessoal. Agora o que eu vou fazer? Eu vou colocar um outro elemento na tela.

Eu vou colocar um botão.

Button, tem que ser em inglês, button. Vou clicar aqui e arrastar para dentro do meu ViewController. Eu vou alterar o tamanho da fonte para 20.

Deixar um pouquinho maior, vou colocar aqui 22.

E vou alterar o título, pessoal. O título está button mesmo, eu vou colocar iniciar animação.

Iniciar animação.

Legal. Agora, o que eu vou fazer, pessoal? A ideia é: quando a gente rodar nesse aplicativo aqui, no iPhone e eu clicar no botão iniciar animação, eu vou querer primeiro pegar essa view e arrastar ela para o outro lado.

Então esse é o primeiro desafio que a gente vai ter, arrastar a view de um lado para o outro.

Só que para a gente conseguir ter acesso a esses elementos via código, porque a gente vai precisar utilizar eles aqui ViewController, para a gente conseguir fazer alguma coisa, a gente precisa então criar os seus outlets.

Como é que eu crio os outlets? Eu clico em cima do elemento. Vou só ocultar essas barras aqui para ficar melhorar a visualização.

E vou dividir a tela, selecionando essa opção aqui.

Aí repara que do lado esquerdo ele me traz o storyboard e do lado direito ele traz o arquivo do ViewController.

Então vamos começar pessoal, criando seus outlets. Eu vou criar aqui alguns marcadores para ajudar a deixar o nosso código um pouquinho mais organizado.

Então aqui mark IBOutlets, então eu vou clicar em cima da viewzinha roxa que a gente criou, vou segurar a tecla ctrl do teclado e vou arrastar para cá.

Repara que ele fica essa linha indicando.

E eu vou soltar. Aí ele me pede um nome, pessoal. Eu vou colocar aqui, por exemplo, View Animada.

E vou clicar em connect.

Beleza. Eu vou clicar aqui no botão animação, só vou apagar esses comentários aqui que a gente não vai utilizar, para deixar o nosso código mais organizado.

Aqui eu vou criar outro marcador, que é o View life cycle, que é o ciclo de vida do app, que é o método viewDidLoad.

E aqui embaixo eu vou criar então outro marcador, que vai ser os IBaction.

IBaction, na verdade, são as ações, pessoal, dos botões que a gente coloca no ViewController.

Então eu vou clicar aqui, seguro a tecla ctrl novamente e arrasto para cá.

Aí ele me traz uma série de opções, não é, pessoal? Connection, o tipo de conexão; o nome que a gente precisa preencher, então vou colocar aqui botão iniciar animação e o tipo. O tipo aqui eu vou trocar para UIButton.

Cliquei em connect, legal. Agora eu já tenho acesso a todos os elementos que a gente colocou no storyboard no meu arquivo do ViewController, então eu já consigo começar a manipular essa view.

Vou voltar para a visualização única e vou clicar aqui, então, no ViewController.

Legal, pessoal. Próximo passo o que é? O próximo passo é: a gente vai ter que rodar o aplicativo e entender como a gente vai fazer para movimentar essa view do lado esquerdo para o lado direito.

Isso a gente vai ver no próximo vídeo.

Movimentando elementos - Movimentando elementos

Continuando, pessoal, agora que a gente tem acesso aos elementos do storyboard no ViewController, a gente precisa achar uma forma de movimentar ele quando o botão iniciar animação for pressionado.

Para a gente ter um Norte de onde a gente deve ir, eu vou abrir aqui o storyboard e eu faço a seguinte pergunta: como eu faço, pessoal, para movimentar esse elemento para lá?

Aqui é fácil. Eu clico na view, eu posso segurar a setinha para a direita e ele vai movimentando.

Quando eu vou movimentando o elemento dessa forma, eu vou abrir aqui a reguinha onde ele mostra a posição X e Y, altura e largura, para a gente ver o que acontece.

Então selecionei a view e vou movimentá-la para a direita.

Qual é o valor que está mudando, pessoal?

Repara que é o valor do X, conforme eu mudo ele aqui, eu altero a posição lá na reguinha. Ou seja, o eixo X, quando eu movimento o elemento, ele altera o seu valor. É isso que está acontecendo.

Então eu já tenho aqui uma dica, pessoal. Para eu conseguir colocar esse elemento para o lado direito, quando o botão iniciar animação for pressionado, o que eu preciso fazer? Eu preciso alterar o valor do eixo X.

Legal, essa é uma informação superimportante. E o eixo Y, pessoal? Eu fiz alguma com ele? O eixo Y continua no mesmo lugar, porque eu não alterei.

Se eu colocar ele para cima ou para baixo, aí sim eu altero a posição do eixo Y.

Olha ele movimentando lá.

Só que nesse momento não é isso que eu quero fazer, eu quero apenas alterar a posição do eixo X.

Legal, agora que a gente entendeu que para movimentar o elemento da esquerda para a direita a gente precisa mexer no eixo X, a gente precisa descobrir como a gente faz isso via código.

Então vou voltar aqui no ViewController e o que eu vou fazer, pessoal? Eu vou pegar a referência da minha viewAnimada e como é que eu tenho acesso ao X e ao Y aqui no código?

Através do ponto frame.

Ele espera um CGRect, que é uma classe do swift que eu consigo passar, por exemplo, uma posição X e Y, uma altura e uma largura e ele altera essas propriedades via código.

Então ele espera uma classe CGRect. Então vou dar um enter, vou falar que ele é igual à classe CGRect que é a que ele nos orientou que vai utilizar.

Quando eu inicializo essa classe, pessoal, ele tem vários inicializadores aqui, o que eu preciso é onde eu passo um novo valor do X e do Y, uma largura e uma altura.

Eu vou pegar esse double, onde eu passo então todas essas informações que eu preciso.

Então vamos começar, aonde eu quero deixar ele na posição X? Vamos voltar lá no storyboard para dar uma olhada?

Então na posição do eixo X, eu vou arrastar ele aqui um pouquinho para a gente ir dando uma olhada.

Está 176, mais um pouco. Eu quero que ele fique nessa posição aqui.

Que é 285.

Legal, então vou voltar aqui no ViewController, agora que eu tenho uma ideia de onde a minha viewzinha vai parar, eu vou colocar aqui 285.

Então 285.

Legal. O eixo Y eu alterei alguma coisa, pessoal?

Vamos ver aqui de novo.

O eixo Y continua com o mesmo valor, que é 95. Então eu não alterei nada.

Eu só vou voltar essa view para posição original que estava, que era 45.

Beleza. Então o eixo Y eu não alterei nada, ele continua no mesmo lugar. Se eu quisesse colocar ele mais para cima ou mais para baixo, aí sim eu alteraria o eixo Y, mas nesse caso não é o que a gente quer fazer.

Quando eu quero manter o mesmo valor, eu não preciso copiar o valor 95 aqui, funcionaria do mesmo jeito, 95.0. Poderia fazer isso.

Só que se por acaso eu alterar essa view no storyboard sem querer, por exemplo, eu quero sei lá, deixar ela aqui mais para baixo, quando eu iniciar a animação, ele vai iniciar daqui. Achando que a minha view ainda está nessa posição.

E não é isso que eu quero fazer, eu quero sempre manter a posição atual do objeto.

Como eu faço isso?

Eu pego a minha referência da view, ponto frame ponto origin, ponto o eixo que eu quero. Nesse caso eu quero o eixo Y.

Então é dessa forma que eu faço.

Na largura é o mesmo esquema, eu vou manter o tamanho que ele tiver lá no storyboard e como é que eu faço isso?

Da mesma forma, viewAnimada.frame. Aqui a gente utilizou o ponto origin porque a gente estava querendo mexer na origem X e Y, no eixo X e Y.

Aqui, pessoal, não é ponto origin, é ponto size. Então ponto size, ponto width, que é a largura.

A mesma coisa com a altura, viewAnimada.frame.size.height, que é a altura.

Ou seja, a gente só vai movimentar o eixo X, o resto a gente vai manter o mesmo valor.

Bacana. Vamos rodar o aplicativo para testar e ver se está funcionando, pessoal?

Então vou gerar um build aqui para a gente testar.

Bacana, pessoal. Eu então estou aqui com o simulador aberto, agora a gente vai testar. Vou clicar aqui no botãozinho iniciar animação. E olha só.

Realmente, eu peguei o objeto do lado esquerdo e coloquei ele do lado direito, alterando a posição do eixo X, que foi o que nós acabamos de aprender.

Parece simples, pessoal, mas com isso a gente já consegue fazer algumas outras coisas bem bacanas, que a gente vai continuar vendo no próximo vídeo.

Sobre o curso iOS Animações: Core animation e transições

O curso iOS Animações: Core animation e transições possui 148 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de iOS em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda iOS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas