Animaciones y Transiciones en SwiftUI con ProgressView

Animaciones y uso del ProgressView

En esta clase aprenderás cómo usar animaciones para dar dinamismo a tus interfaces. Veremos cómo mostrar y ocultar elementos con transiciones y cómo usar animaciones asimétricas para lograr efectos visuales más complejos. También exploraremos el uso del componente ProgressView para mostrar estados de carga. ¡Comencemos!

1. Introducción a las Animaciones en SwiftUI

Las animaciones en SwiftUI son herramientas poderosas que permiten transformar una interfaz estática en algo dinámico e interactivo. Pueden hacer que los usuarios se sientan más conectados con la aplicación y ayudan a guiar su atención a elementos clave.

En SwiftUI, las animaciones se implementan con modificadores como withAnimation y transiciones, lo que simplifica su uso. Ahora veremos cómo crear animaciones simples y cómo aplicar transiciones dinámicas a nuestros elementos.

---

2. Ejemplo Práctico: Mostrar y Ocultar con Animaciones

El siguiente ejemplo ilustra cómo usar animaciones para mostrar y ocultar un elemento:

Paso 1: Crear dos círculos

• Un círculo azul estático.

• Un círculo verde que aparece y desaparece al interactuar con el círculo azul.

  import SwiftUI

  struct AnimationsPractice: View { @State var showGreen: Bool = false

  var body: some View {
      VStack {
          // Círculo azul
          Circle()
              .foregroundStyle(Color.cyan)
              .frame(width: 200, height: 200)
              .onTapGesture {
                  withAnimation {
                      showGreen.toggle()
                  }
              }
  
          // Círculo verde (visible si showGreen es true)
          if showGreen {
              Circle()
                  .foregroundStyle(Color.green)
                  .frame(width: 200, height: 200)
                  .transition(.slide)
          }
      }
  }

  }

  #Preview { AnimationsPractice() }

Paso 2: Añadir una transición

Al usar el modificador .transition, puedes definir cómo un elemento aparece y desaparece. SwiftUI ofrece varias opciones de transición:

1. .slide:

   • El elemento aparece deslizándose desde un borde.

     .transition(.slide)

2. .scale:

   • El elemento aparece escalándose desde el centro.

     .transition(.scale)

3. .move:

   • El elemento aparece moviéndose desde un borde específico.

     .transition(.move(edge: .leading))

4. .asymmetric:

   • Permite definir diferentes transiciones para la entrada y salida del elemento.

     .transition(.asymmetric(insertion: .slide, removal: .scale))

Actualizando el código con una transición asimétrica:

if showGreen {
    Circle()
        .foregroundStyle(Color.green)
        .frame(width: 200, height: 200)
        .transition(.asymmetric(insertion: .slide, removal: .scale))
}

En este caso, el círculo verde aparecerá con un deslizamiento (.slide) y desaparecerá escalándose hacia afuera (.scale).

---

3. Uso del ProgressView

El componente ProgressView en SwiftUI se utiliza para indicar estados de carga o progreso en tu aplicación. Es simple de implementar y puede personalizarse según tus necesidades.

Ejemplo básico de ProgressView

import SwiftUI

struct ProgressExample: View {
    @State private var progress: Double = 0.3

    var body: some View {
        VStack {
            Text("Cargando...")
                .font(.headline)

            // Barra de progreso
            ProgressView(value: progress)
                .progressViewStyle(LinearProgressViewStyle())
                .padding()

            // Botón para simular progreso
            Button("Aumentar Progreso") {
                withAnimation {
                    progress = min(progress + 0.1, 1.0)
                }
            }
            .padding()
        }
    }
}

#Preview {
    ProgressExample()
}

En este ejemplo:

• ProgressView muestra una barra de progreso basada en el valor de progress.
• Un botón permite incrementar el progreso, simulando una carga.

Tipos de estilos en ProgressView

1. CircularProgressViewStyle:

   • Muestra un indicador circular de progreso.

     ProgressView() .progressViewStyle(CircularProgressViewStyle())

2. LinearProgressViewStyle:

   • Muestra una barra de progreso horizontal.

     ProgressView(value: 0.5) .progressViewStyle(LinearProgressViewStyle())

---

4. Conclusión

En esta clase, aprendiste:

• Cómo usar withAnimation para animar cambios en tus vistas.
• Cómo aplicar transiciones a elementos visibles u ocultos (.slide, .scale, .move, .asymmetric).
• Cómo implementar y personalizar un ProgressView para mostrar estados de carga.

Las animaciones y transiciones son herramientas fundamentales para diseñar interfaces atractivas e interactivas. Sigue experimentando con estas técnicas para dominar su uso y crear experiencias de usuario únicas.

¡Con esto cerramos el módulo de Interacción de Usuario! Nos vemos en el próximo módulo.