Lottie con SwiftUI

Marcelo Laprea
16 enero, 20233min de lectura
¿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 SwiftUIimport Lottiestruct LottieView: UIViewRepresentable {let animationName: Stringvar loopMode: LottieLoopMode = .playOncevar contentMode: UIView.ContentMode = .scaleAspectFitfunc makeUIView(context: Context) -> UIView {let view = UIView()let animationView = LottieAnimationView()animationView.animation = LottieAnimation.named(animationName)animationView.contentMode = contentModeanimationView.loopMode = loopModeanimationView.play()animationView.translatesAutoresizingMaskIntoConstraints = falseview.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, sucontentMode
y elloopMode
. - 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 SwiftUIstruct 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.
