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.
Tabla de contenido
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()
}
}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()
}
}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.
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 {
}
}
}
}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)
}
}
}
}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.0Esta 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
}
}
}
}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
}
}
}
}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])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
}
}
}
}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.
