Introdução ao Core Animation

Published in

Academy@EldoradoCPS

4 min readAug 21, 2020

Recebi o desafio de estudar Core Animation, e se você não sabe o que é isso, calma que logo abaixo vou explicar. Mas o ponto é: o universo da programação é totalmente novo para mim, e muitas vezes, não sabia por onde começar.

Existe MUITO conteúdo, porém é um tanto difícil seguir uma linha de raciocínio, e eu acabava vendo uma coisa aqui, abria outro link ali, e lendo esse link eu acabava clicando em outro link e por aí vai, é conteúdo que não acaba mais.

Com isso, decidi criar uma linha de raciocínio como se estivesse dando uma "aula" introdutória ao Core Animation, respondendo algumas perguntas como: o que é, pra que serve, quando devo utilizar, quais são as boas práticas, exemplos de aplicação e etc.

Então vamos falar um pouco sobre Core Animation!

Antes de mais nada, o que é Core Animation?

O Core Animation é um framework Cocoa responsável pela maioria das animações iOS e MacOS, um sistema complexo com muitas funcionalidades ocultas e menos conhecidas.
O Core Animation lida com suas animações nos bastidores, e sabendo um pouco mais como funciona, podemos tirar vantagem disso e criar animações bem ajustadas.

Por que utilizar?

O Core Animation é a tecnologia subjacente à interface de usuário do iOS da Apple. Desencadeando todo o poder do Core Animation, você pode aprimorar seu aplicativo com impressionantes efeitos visuais em 2D e 3D e criar novas interfaces interessantes e exclusivas.

O que consigo fazer com Core Animation?

• Camadas e visualizações, desenho de software e composição de hardware
•Geometria da camada, teste de ocorrências e recorte
•Efeitos de camada, transformações e interfaces 3D
•Reprodução de vídeo, texto, imagens lado a lado, OpenGL, partículas e reflexões
•Animações implícitas e explícitas
•Animações de propriedade, quadros-chave e transições
•Flexibilidade, animação quadro a quadro e física
•Ajuste de desempenho e muito mais!

O que o HIG (Human Interface Guidelines) da Apple diz sobre animações?

Antes de sair aplicando animações, vamos ver o que o Human Interface Guidelines da Apple tem a dizer sobre isso?

Segundo o HIG, a animação bonita e sutil em todo o iOS cria um senso visual de conexão entre pessoas e conteúdo na tela. Quando usada adequadamente, a animação pode transmitir status, fornecer feedback, aprimorar o senso de manipulação diretae ajudar os usuários a visualizar os resultados de suas ações.

Use animação e efeitos de movimento criteriosamente. Não use animação para usar animação. Animações excessivas ou gratuitas podem fazer com que as pessoas se sintam desconectadas ou distraídas, especialmente em aplicativos que não oferecem uma experiência imersiva. O iOS usa efeitos de movimento, como um efeito de paralaxe, para criar a percepção de profundidade na tela inicial e em outras áreas. Esses efeitos podem aumentar a compreensão e o prazer, mas o uso excessivo deles pode fazer com que o aplicativo pareça desorientador e difícil de controlar. Se você implementar efeitos de movimento, sempre teste os resultados para garantir que eles funcionem bem.
Esforce-se pelo realismo e credibilidade. As pessoas tendem a aceitar a licença artística, mas podem se sentir desorientadas quando o movimento não faz sentido ou parece desafiar as leis físicas. Se alguém revelar uma visualização deslizando-a para baixo a partir da parte superior da tela, por exemplo, ela poderá dispensar a visualização deslizando-a de volta.
Use animação consistente. Uma experiência familiar e fluente mantém os usuários envolvidos. Eles estão acostumados com a sutil animação usada em todo o iOS, como transições suaves, mudanças fluidas na orientação do dispositivo e rolagem baseada na física. A menos que você esteja criando uma experiência imersiva, como um jogo, a animação personalizada deve ser comparável às animações incorporadas.
Faça animações opcionais. Quando a opção para reduzir o movimento é ativada nas preferências de acessibilidade, seu aplicativo deve minimizar ou eliminar as animações de aplicativos. Para orientação, consulte Motion.

Ok, agora como eu aplico tudo isso?

Sem dúvida, a animação de interfaces ainda pertence aos problemas mais discutíveis entre designers e desenvolvedores. Os elementos animados da interface do usuário geralmente definem o desafio para os desenvolvedores. Assim, para aprimorar a usabilidade de um aplicativo ou de um website, a animação deve se basear na pesquisa do usuário e adicionar seus dois centavos à experiência positiva do usuário.

Aqui estão 2 ótimos exemplos para você entender melhor como funciona o Core Animation e botar a mão na massa:

O primeiro é um estudo de caso prático mostrando o desenvolvimento de animação da interface do usuário para o Upper App e fornecendo exemplos reais e ferramentas de codificação de movimento para aplicativos iOS.
Veja aqui!

O segundo exemplo é um tutorial de como criar uma cena de neve com o Core Animation. Confira clicando aqui!

E quando falamos em animações, quais são as melhores práticas?

O Pablo Stanley, Designer na InVision, publicou um ótimo artigo para o UX Collective onde ele traz dicas práticas para melhorar suas microinterações da interface do usuário.

O artigo traz alguns exemplos de animações da interface do usuário indo de bom a ótimo. Com um pouco de ajustes aqui e ali, você pode elevar seus padrões de interface do usuário com animação.

Para criar as animações do artigo, foi seguida as diretrizes do Material Motion, dos Princípios de animação da IBM e do The UX in Motion Manifesto.
Todas as interações foram feitas usando a versão de acesso antecipado do InVision Studio. Você pode baixar os arquivos de origem aqui.

Leia o artigo completo aqui!