Crea animaciones por fases usando Phase Animator

Libranner Santos

13 noviembre, 20242min de lectura

Agregar animaciones a nuestra app puede hacer una gran diferencia en la forma en que los usuarios perciben su funcionalidad. SwiftUI nos ofrece una serie de herramientas para que los cambios de estado en nuestras vistas se produzcan de manera animada. Una de las herramientas que ofrece mayor control es el modificador phaseAnimator(_:content:animation:).

A diferencia de otros modificadores como animation, phaseAnimator permite controlar la animación a través de fases preestablecidas. SwiftUI se encarga de recorrer cada una de estas fases, y nosotros podemos definir cómo queremos animar cada una.

Definiendo las fases

Primero, definamos las fases, para esto crearemos un enum de la siguiente forma:

enum AnimationPhase: CaseIterable {
  case identity, scaled, moved
}

Podemos nombrar nuestras fases como queramos; en este caso hemos creados tres:

• identity, esta será la primera fase y no tendrá ningún efecto.
• scaled en esta fase, aumentaremos el tamaño de la vista.
• moved en esta fase, moveremos la vista de lugar.

Creando una animación por fases

Ahora usaremos las fases para crear la animación. Escribe el siguiente código:

import SwiftUI

struct PhaseAnimation: View {
    // 1
    @State private var phase: AnimationPhase = .identity

    var body: some View {
        Circle()
        .fill(.green)
        .frame(width: 100, height: 100)
        // 2
        .phaseAnimator(
            [
                AnimationPhase.identity,
                AnimationPhase.scaled,
                AnimationPhase.moved
            ]
        ) {
            content,
            phase in
                // 3
                content
                    .scaleEffect(phase == .scaled ? 2.5 : 1)
                    .offset(y: phase == .moved ? -200 : 0)
        }
    }
}

En este código:

1. Declaramos una variable de estado donde guardaremos la fase actual, y por defecto asignamos identity.
2. Usamos el modificador phaseAnimator y pasamos un arreglo de fases.
3. Dentro del closure del modificador, definimos cómo se comportarán los modificadores scaleEffect y offset según la fase en la que se encuentre la animación.

Esto daría como resultado:

Usando CaseIterable

Una pequeña mejora que podemos hacer al código es sustituir:

[
    AnimationPhase.identity,
    AnimationPhase.scaled,
    AnimationPhase.moved
]

Por la siguiente línea:

AnimationPhase.allCases

Esto gracias a que hicimos que AnimationPhase conformara CaseIterable.

Conclusión

Con esta herramienta, podemos crear animaciones más personalizadas y tener mayor control sobre cada fase que atraviesan las vistas a lo largo del tiempo.

Si deseas leer más sobre cómo agregar animaciones a las vistas en SwiftUI, puedes consultar nuestros artículos.