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.0de 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
LottieAnimationViewy preparamos la animación, añadiendo el nombre de la animación, sucontentModey elloopMode. - Añadimos como
subViewla vista de Lottie creada. - Añadimos los
constraintspara 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.