Lottie con SwiftUI

¿Qué es Lottie?

Lottie es una biblioteca móvil para Android e iOS que renderiza de forma nativa animaciones basadas en vectores y arte en tiempo real con un código mínimo. Lottie carga y renderiza animaciones y vectores exportados en formato JSON. Lottie

1. 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.
  • Este artículo está probado con la versión 4.0.0 de Lottie

2. Descargar una animación

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

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

3. Crear un UIViewRepresentable con Lottie

import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
let animationName: String
var loopMode: LottieLoopMode = .playOnce
var contentMode: UIView.ContentMode = .scaleAspectFit
func makeUIView(context: Context) -> UIView {
let view = UIView()
let animationView = LottieAnimationView()
animationView.animation = LottieAnimation.named(animationName)
animationView.contentMode = contentMode
animationView.loopMode = loopMode
animationView.play()
animationView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationView)
NSLayoutConstraint.activate([
animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
])
return view
}
func updateUIView(_ uiView: UIView, context: Context) {}
}

Para usar LottieView necesitamos especificar:

  • AnimationName: nombre del archivo que se descargó.
  • LoopMode: es el comportamiento de la animación. (playOnce, loop, autoReverse, repeat, repeatBackwards)
  • ContentMode: UIView.ContentMode

Y los tipos de LoopMode son:

public enum LottieLoopMode {
/// La animación es ejecutada una vez y luego se detiene.
case playOnce
/// La animación entrará en un bucle, una vez termine, repetirá la animación desde el comienzo.
case loop
/// La animación empezará, una vez termine, retrocederá y así hasta que sea detenida.
case autoReverse
/// La animación entrará en un bucle, una vez termine, repetirá la animación desde el comienzo una N cantidad de veces.
case `repeat`(Float)
/// La animación empezará, una vez termine, retrocederá y así una N cantidad de veces.
case repeatBackwards(Float)
}

Luego en el método func makeUIView(context: Context) -> UIView vamos a crear una instancia de UIView donde vamos a añadir como subView la vista de Lottie. Los pasos son:

  • Creamos la instancia del UIView.
  • Creamos la instancia del LottieAnimationView y preparamos la animación, añadiendo el nombre de la animación, su contentMode y el loopMode.
  • Añadimos como subView la vista de Lottie creada.
  • Añadimos los constraints para el ancho y alto de la vista.
  • Retornamos la instancia del UIView.

4. Usar LottieView

import SwiftUI
struct SwiftUIView: View {
var body: some View {
LottieView(name: "notification",
loopMode: .loop,
contentMode: .scaleAspectFit)
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}

Al instalar el paquete de Lottie y al crear el UIViewRepresentable ya se puede usar la nueva vista LottieView pasando sus respectivos parámetros, en cualquier vista de nuestro código.

Ejemplo de cargar una animación usando Lottie

Más recursos para seguir aprendiendo

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn