Descubre lo nuevo de Lottie 4.3.0 en SwiftUI

Marcelo Laprea

11 octubre, 20233min de lectura

La versión 4.3.0 de Lottie cuenta con soporte oficial para SwiftUI. Ya no tendremos que crear un UIViewRepresentable como vimos en este artículo sino que podremos usar directamente su nueva vista LottieView. Para probar esta nueva vista hay que seguir los siguientes pasos:

• Instalar Lottie con Swift Package Manager.
• Descargar una animación.
• Usar la animación.

Instalar Lottie con Swift Package Manager

• En Xcode ir a File > Swift Packages > Add Package Dependency.
• Añadir esta url: https://github.com/airbnb/lottie-ios.
• Usaremos la versión 4.3.0.

Descargar una animación

Aquí puedes encontrar animaciones: https://lottiefiles.com/featured

Una vez descargado el JSON, añadirlo al proyecto.

Usar la animación

import Lottie

struct ContentView: View {
  var body: some View {
    LottieView(animation: .named("animationFile"))
  }
}

Usando directamente la vista LottieView y pasando como parámetro el nombre de la animación .named("animationFile) podemos mostrar la animación.

Si ejecutas el proyecto en un simulador o dispositivo, te darás cuenta de que la animación no empieza, está estático. Para poder empezar la animación, Lottie nos proporciona varias formas, veamos como:

// La animación es ejecutada una vez y luego se detiene.
LottieView(animation: .named("animationFile")) 
  .play()
  
// La animación entrará en un bucle, una vez termine, repetirá la animación desde el comienzo.
LottieView(animation: .named("animationFile")) 
  .looping()
  
// Muestra la animación pausada en el punto que indiques, en este caso en la mitad de la animación.
LottieView(animation: .named("animationFile")) 
  .currentProgress(0.5)

Probemos a empezar nuestra animación:

import Lottie

struct ContentView: View {
  var body: some View {
    LottieView(animation: .named("animationFile"))
     .play()
  }
}

Nuevas vistas de Lottie en SwiftUI

Además de LottieView, en esta nueva actualización vamos a poder usar LottieButton y LottieSwitch.

LottieButton

Para usar el nuevo botón de Lottie, solo hay que usar la vista LottieButton usando nuestra animación, y ejecutando la acción que queramos en el completionHandler.

import Lottie
import SwiftUI

struct ContentView: View {
  var body: some View {
      LottieButton(animation: .named("button")) {
        // Action
      }
  }
}

LottieSwitch

Para usar la nueva vista switch de Lottie, solo hay que usar la vista LottieSwitch usando nuestra animación y usando el modificador isOn. Además, dependiendo de la animación que usemos, vamos a tener que configurar cuando empieza la animación cuando isOn es true usando .onAnimation(fromProgress: 0.0, toProgress: 0.5) y configurar cuando termina la animación cuando isOn es false usando .offAnimation(fromProgress: 0.5, toProgress: 1.0).

import Lottie
import SwiftUI

struct ContentView: View {
  @State var isOn = false
  
  var body: some View {
    LottieSwitch(animation: .named("switch"))
      .isOn($isOn)
      .onAnimation(fromProgress: 0.0, toProgress: 0.5)
      .offAnimation(fromProgress: 0.5, toProgress: 1.0)
  }
}