Animação no desenvolvimento móvel: o que é, quais os tipos e como usar

Animação no Android: Property Animation e View Animation

O Android fornece dois sistemas principais de animação: View Animation (legado) e Property Animation (moderno). View Animation (ou Tween Animation) funciona apenas com a representação visual — altera a exibição da View mas não suas propriedades reais (por exemplo, as coordenadas de clique permanecem no lugar). Property Animation, introduzida no Android 3.0, altera as propriedades reais do objeto através de Animator — ValueAnimator, ObjectAnimator ou AnimatorSet.

ObjectAnimator e ValueAnimator

ObjectAnimator é a classe mais popular de Property Animation. Anima uma propriedade específica do objeto (por exemplo, translationX, alpha, scaleY) durante um tempo determinado com um Interpolator específico.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator não está vinculado a um objeto específico — gera valores que podem ser usados para qualquer propriedade ou lógica personalizada.

View Animation e animações XML

View Animation é descrita em arquivos XML res/anim/. Quatro tipos são suportados: scale, translate, rotate, alpha. A desvantagem é que a animação não altera os parâmetros reais da View. Para efeitos simples (piscar, girar) View Animation ainda é aplicável, mas para novos projetos recomenda-se Property Animation.

Animação no Jetpack Compose

Jetpack Compose oferece uma API de animação moderna: animateAsState, Animatable, AnimatedVisibility e AnimatedContent. A animação no Compose é reativa: quando o estado muda, a animação é iniciada automaticamente.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Animação no iOS: Core Animation e UIView.animate

O iOS fornece uma poderosa pilha de animação baseada em Core Animation — um framework de baixo nível que trabalha com CALayer. UIKit é construído sobre Core Animation com métodos convenientes UIView.animate e UIViewPropertyAnimator.

UIView.animate

UIView.animate é a forma mais simples de animar no iOS. Permite animar frame, alpha, transform, backgroundColor e outras propriedades de UIView.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — um framework para animação física: gravidade, colisões, molas, forças de atração. Permite criar comportamentos realistas de objetos sem cálculo manual de física. Usado para transições personalizadas, menus animados e elementos de jogo.

CAAnimation e Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — uma API de baixo nível para animação de CALayer. Suporta transformações 3D, animação de caminho (keyframe), mascaramento e composição. SwiftUI usa Core Animation internamente através dos modificadores animation e withAnimation.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Para a maioria dos projetos iOS, utiliza-se SwiftUI com sua animação incorporada. Por exemplo, withAnimation envolve mudanças de estado em um contexto animado.

Animação vetorial: Lottie e Rive

Animações complexas (personagens, transições, carregadores) são difíceis de implementar com código. Lottie e Rive resolvem esse problema permitindo que designers criem animações em editores visuais e desenvolvedores as incorporem no aplicativo como um componente pronto.

Lottie

Lottie — uma biblioteca da Airbnb (agora LottieFiles) que renderiza animações do Adobe After Effects exportadas em formato JSON. Suportada no Android, iOS, Flutter, React Native e Web. As animações Lottie são vetoriais, escalam sem perda de qualidade e podem ser personalizadas programaticamente (velocidade, progresso, cores).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (anteriormente 2Dimensions) — uma ferramenta mais avançada para animação vetorial. Ao contrário do Lottie, Rive suporta animação interativa: estados, gatilhos, transições. A animação é criada no Rive Editor e controlada no aplicativo através de State Machine. Rive é adequado para interfaces de jogo, ícones animados e transições complexas com feedback.

Na IT Sectr usamos Lottie para animações decorativas (carregadores, operações bem-sucedidas, estados vazios) e Rive para elementos interativos de telas de onboarding. Isso reduz o tempo de desenvolvimento de animações em 60% em comparação com a implementação manual em UIKit ou Canvas.

Shared Element Transition e Hero Animation

Shared Element Transition — animação onde um elemento (imagem, texto, cartão) se move e se transforma suavemente ao fazer a transição entre telas. Isso cria a ilusão de continuidade: o usuário não "vai" para uma nova tela, mas "mergulha" no elemento.

Android Shared Element Transition

No Android, a transição é implementada através de ActivityOptionsCompat e atributos transitionName. FragmentTransaction suporta addSharedElement para transições dentro de uma Activity. Compose usa SharedTransitionLayout com SharedContentState.

iOS Hero Transition

O iOS não possui uma Hero Transition integrada, mas a biblioteca Hero (de Luke Zhao) implementa esse padrão no UIKit. Basta atribuir um ID aos elementos em ambas as telas — Hero criará automaticamente uma transição suave. No SwiftUI, a animação de transição é integrada através de NavigationStack e matchedGeometryEffect.

Flutter Hero

Flutter tem um widget Hero integrado com um parâmetro tag. Quando duas páginas contêm Hero com a mesma tag, Flutter anima automaticamente a transição entre elas. Esta é uma das formas mais simples de implementar animação complexa em um aplicativo móvel.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator e Easing

Para que a animação pareça natural, são usadas curvas de velocidade — Interpolator no Android e Easing no iOS. Elas determinam como a velocidade da animação muda do início ao fim.

Interpoladores Android

O Android suporta vários Interpolators integrados: LinearInterpolator (uniforme), AccelerateDecelerateInterpolator (lento-rápido-lento), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (com ultrapassagem) e BounceInterpolator (com quique). Um Interpolator personalizado pode ser criado através de XML ou da classe TimeInterpolator.

Spring Animation

Spring Animation (animação de mola) modela a física da mola com parâmetros de amortecimento (damping) e rigidez (stiffness). Amortecimento 0 — oscilações infinitas, 1 — sem oscilações. Rigidez determina a velocidade de retorno. Spring Animation está disponível no iOS (UIViewPropertyAnimator com UISpringTimingParameters), Android (SpringAnimation do physics2) e SwiftUI (spring()).

A documentação Spring Animation no Android contém exemplos detalhados de configuração.

Animação de linha do tempo

Timeline (linha do tempo) — uma abordagem onde a animação é dividida em quadros ao longo do tempo. Usada para sequências complexas onde AnimationSet ou animação em grupo não são flexíveis o suficiente. Android suporta AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval no AnimationController.