Aprende a usar el modificador mask en SwiftUI
Aprende a usar el modificador mask en SwiftUI

Modificadores en SwiftUI: mask

El modificador mask en SwiftUI nos permite crear máscaras entre 2 vistas. Al aplicar estas máscaras podemos crear efectos muy atractivos para nuestras aplicaciones como el que vemos en este post.

SwiftBeta

Tabla de contenido


👇 SÍGUEME PARA APRENDER SWIFTUI, SWIFT, XCODE, etc 👇
🤩 ¡Sígueme en Twitter!
▶️ ¡Suscríbete al canal!
📙 COMPRAR EL LIBRO DE SWIFT ⭐️
Video donde explicamos mask uno de los Modificadores de SwiftUI

Hoy en SwiftBeta vamos a aprender otro modificador en SwiftUI llamado mask. Este modificador nos permite crear máscaras de nuestras vistas en SwiftUI. Vamos a crear un muy potente para nuestras aplicaciones, como este que os estoy mostrando. Aquí estamos aplicando una mask con una animación y da la sensación de que estar en un bucle infinito. Vamos a crear este ejemplo en el video de hoy.

Creamos proyecto en Xcode

Para hacerlo, vamos a entender primero qué hace este modificador. Como siempre vamos crear un proyecto en Xcode. Vamos a escoger como Interface SwiftUI. Y una vez creado, vamos a la vista ContentView y allí escribimos el siguiente código:

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.orange)
                .frame(width: 300, height: 200)
                
        }
        .background(.blue)
        .padding()
    }
}
Vista en SwiftUI

Hasta aquí nada nuevo, de momento hemos creado un Rectangle de color orange con un tamaño de 300x200. A continuación, usamos el modificador mask:

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.orange)
                .mask {
                    Text("¡Suscríbete a SwiftBeta!")
                        .font(.system(size: 30, weight: .bold, design: .monospaced))
                }
                .frame(width: 300, height: 200)
                
        }
        .background(.blue)
        .padding()
    }
}
Añadimos el modificador mask

Dentro del modificador mask podemos añadir la vista que queramos. Si añadimos un Text con un texto obtenemos este efecto. Fijate que no hemos especificado el color de nuestro Text, se está usando el orange de nuestro Rectangle. Esto es importante tenerlo en cuenta para la vista que vamos a crear a continuación.

Ejemplo real en SwiftUI

Ahora vamos a construir la siguiente vista con esta animación. Para hacerlo, vamos a usar la siguiente imagen.

Descarga la imagen y úsala en el ejemplo práctico de hoy
Descarga la imagen y úsala en el ejemplo práctico de hoy

Dentro de nuestra vista vamos a añadir un ZStack y un ScrollView:

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            ScrollView {
                
            }
        }
    }
}
Creamos un ZStack y ScrollView en SwiftUI

A continuación vamos a añadir la imagen a nuestro proyecto de Xcode. La arrastramos en la carpeta Assets y seleccionamos Single Scale.

Una vez añadida la imagen, ya la podemos llamar desde nuestro código. Dentro del ScrollView vamos a crear dos Image y vamos a mostrar la imagen que acabamos de añadir.

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            ScrollView {
                VStack(spacing: 0) {
                    Image("swiftbeta")
                        .resizable()
                    Image("swiftbeta")
                        .resizable()
                }
                .scaledToFill()
                .frame(width: 800, height: 500)
            }
        }
    }
}
Añadimos las 2 Image dentro de un VStack con 0 spacing

Ahora vamos a usar una vista landscape del Canvas, ya que queremos que nuestra vista aparezca en horizontal. Perfecto, vamos a continuar, y lo siguiente que vamos hacer es añadir es la animación. Ahora creamos una propiedad de tipo @State.

@State var offsetY = 0.0
Property Wrapper @State para almacenar el offsetY

Esta propiedad la vamos a usar en el ScrollView.

Ahora lo que queremos hacer es que cuando nuestra vista aparezca en la pantalla, queremos empezar la animación. Esto lo podemos hacer dentro del modificador onAppear.

struct ContentView: View {
    @State var offsetY = 0.0
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            ScrollView {
                VStack(spacing: 0) {
                    Image("swiftbeta")
                        .resizable()
                    Image("swiftbeta")
                        .resizable()
                }
                .scaledToFill()
                .frame(width: 800, height: 500)
                .offset(y: offsetY)
            }
        }
        .onAppear {
            withAnimation(.linear(duration: 5).repeatForever(autoreverses: false)) {
                offsetY = -500
            }
        }
    }
}
Creamos la animación de nuestro VStack

Podemos compilar el siguiente código en el simulador y vemos como la animación se repite.

Lo siguiente que vamos hacer es aplicar el modificador mask. El modificador mask lo vamos a aplicar al ScrollView y dentro vamos añadir un Text con "SwiftBeta"

struct ContentView: View {
    @State var offsetY = 0.0
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            ScrollView {
                VStack(spacing: 0) {
                    Image("swiftbeta")
                        .resizable()
                    Image("swiftbeta")
                        .resizable()
                }
                .scaledToFill()
                .frame(width: 800, height: 500)
                .offset(y: offsetY)
            }
            .mask(
                Text("SwiftBeta")
                    .font(.system(size: 140, weight: .bold, design: .monospaced))
            )
        }
        .onAppear {
            withAnimation(.linear(duration: 5).repeatForever(autoreverses: false)) {
                offsetY = -500
            }
        }
    }
}
Aplicamos el modificador mask

Podemos ver en el Canvas o en el simulador el efecto que se aplica. Y podemos ver la animación que aparece, dando un efecto muy chulo para crear dentro de nuestras apps. Antes de acabar, vamos a mejorar un poco esta animación y vamos a añadir un gradient. Creamos una propiedad gradient en nuestra vista:

let gradient = Gradient(colors: [Color(red: 40/255.0, green: 13/255.0, blue: 88/255.0), .black])
Creamos un Gradient en SwiftUI

Usamos este gradient para dar un background color a nuestro ScrollView. Nuestra vista quedaría finalmente con el siguiente código:

struct ContentView: View {
    @State var offsetY = 0.0
    let gradient = Gradient(colors: [Color(red: 40/255.0,
                                           green: 13/255.0,
                                           blue: 88/255.0), .black])
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            ScrollView {
                VStack(spacing: 0) {
                    Image("swiftbeta")
                        .resizable()
                    Image("swiftbeta")
                        .resizable()
                }
                .scaledToFill()
                .frame(width: 800, height: 500)
                .offset(y: offsetY)
            }
            .mask(
                Text("SwiftBeta")
                    .font(.system(size: 140, weight: .bold, design: .monospaced))
            )
            .background(RadialGradient(gradient: gradient,
                                       center: .center,
                                       startRadius: 0,
                                       endRadius: 360))
        }
        .onAppear {
            withAnimation(.linear(duration: 5).repeatForever(autoreverses: false)) {
                offsetY = -500
            }
        }
    }
}
Aplicamos el Gradient al background del ScrollView

Conclusión

Hoy hemos aprendido a usar un ViewModifier de SwiftUI muy útil para crear estos efectos en nuestras aplicaciones. Este es un ejemplo pero se podría aplicar para crear diferentes efectos o animaciones.