Degradados y Animaciones en iOS 18 con Mesh Gradient y Timeline View

¿Qué es Mesh Gradient en iOS 18?

Una de las características interesantes de iOS 18 es el uso de 'mesh gradient', el cual nos permite crear degradados personalizados a partir de una matriz de colores. Esta función amplía las posibilidades de diseño en las aplicaciones, ya que podemos generar degradados complejos con múltiples colores en diferentes coordenadas.

Creación básica de un Rectángulo

Para comenzar, tenemos la base de código en Swift donde iniciamos con un cuerpo sencillo que potencialmente trabajará con animaciones utilizando TimelineView. Si deseamos agregar un elemento geométrico como un rectángulo, podemos hacerlo de la siguiente manera:

Rectangle()
    .fill(Color.red)
    .frame(width: 300, height: 300)
    .clipShape(RoundedRectangle(cornerRadius: 15))

En este ejemplo, hemos definido un rectángulo de 300 unidades de ancho y alto, con el color rojo y esquinas redondeadas.

¿Cómo implementar Mesh Gradient en Swift?

Definiendo un Mesh Gradient

Para agregar un degradado más avanzado, utilizamos mesh gradient. Aquí, dejamos de lado la simple opción de un color único y presentamos una matriz de colores con coordenadas específicas:

let meshGradient = MeshGradient(
    columns: 3,
    rows: 3,
    points: [
        .init(x: 0, y: 0), .init(x: 0.5, y: 0), .init(x: 1, y: 0),
        .init(x: 0, y: 0.5), .init(x: 0.5, y: 0.5), .init(x: 1, y: 0.5),
        .init(x: 0, y: 1), .init(x: 0.5, y: 1), .init(x: 1, y: 1)
    ],
    colors: [
        .cyan, .blue, .red,
        .yellow, .green, .purple,
        .brown, .orange, .pink
    ]
)

Aquí se crea una matriz de 3x3 columnas y filas, donde se asignan coordenadas de color que van del 0 al 1 para la disposición de los colores.

Aplicación del Mesh Gradient

Finalmente, aplicamos este mesh gradient al rectángulo anteriormente definido para visualizar los resultados:

Rectangle()
    .fill(meshGradient)
    .frame(width: 300, height: 300)
    .clipShape(RoundedRectangle(cornerRadius: 15))

Este código genera un rectángulo que muestra una combinación de colores, cada uno colocado según las coordenadas definidas, creando un degradado entre ellos.

¿Cómo animar un Mesh Gradient?

Uso de TimelineView para animar

Mediante el uso de TimelineView, podemos crear animaciones dinámicas que modifican la apariencia del degradado con el tiempo. Este ejemplo presentará cómo animar un círculo con colores que varían:

@State private var x: CGFloat = 0.5
@State private var y: CGFloat = 0.5

var body: some View {
    TimelineView(.animation) { context in
        let time = context.date.timeIntervalSinceReferenceDate
        let cosTime = CGFloat(cos(time))
        let sinTime = CGFloat(sin(time))
        
        Circle()
            .fill(MeshGradient(
                columns: 3,
                rows: 3,
                points: [
                    .init(x: 0, y: 0), .init(x: x, y: 0), .init(x: 1, y: 0),
                    .init(x: 0, y: y), .init(x: x, y: y), .init(x: 1, y: y),
                    .init(x: 0, y: 1), .init(x: x, y: 1), .init(x: 1, y: 1)
                ],
                colors: [.cyan, .blue, .red, .yellow, .green, .purple, .brown, .orange, .pink]
            ))
            .frame(width: 300, height: 300)
    }
}

Aquí, las variables x y y se actualizan en función del tiempo, creando un efecto animado a medida que el degradado cambia constantemente.

Conclusiones prácticas

Mesh Gradient en iOS 18 ofrece una poderosa herramienta para crear gráficos dinámicos y estéticamente atractivos en tus aplicaciones. Experimenta con diferentes configuraciones y observa las nuevas posibilidades creativas que este recurso puede ofrecerte. ¡No olvides compartir tus creaciones y seguir explorando las emocionantes funcionalidades de iOS!