Gradientes de malla

Los gradientes de malla crean transiciones de color complejas y multidireccionales con una cuadrícula bidimensional de parches. A diferencia de los gradientes lineales o radiales, los gradientes de malla interpolan los colores de forma fluida en una cuadrícula. Usa gradientes de malla para crear elementos estéticos fluidos y orgánicos en tu interfaz de usuario.

Figura 1: Un ejemplo de degradado de malla con una visualización de sus puntos de degradado de malla actuales.

Conceptos clave

Para construir un gradiente de malla, define las dimensiones de la cuadrícula, los vértices y las transiciones de color entre los puntos:

• Dimensiones de la cuadrícula: La malla se divide en parches a lo largo de los ejes vertical y horizontal. Una cuadrícula de rows y columns contiene (filas + 1) ×(columnas + 1) vértices. Por ejemplo, una malla de 1 × 1 consta de 4 vértices que forman un parche.
• Coordenadas normalizadas: Todas las posiciones de los vértices usan un sistema de coordenadas normalizadas en el que (0f, 0f) representa la parte superior izquierda y (1f, 1f) representa la parte inferior derecha de los límites del dibujo.
• Puntos de control de Bézier (tangentes): Cada vértice contiene hasta cuatro puntos de control de Bézier opcionales. Estas tangentes especifican la curvatura del borde entre los vértices adyacentes. Si usas Offset.Unspecified, Compose infiere las tangentes para garantizar transiciones suaves entre parches. Cada celda de la cuadrícula formada por 4 vértices junto con sus puntos de control genera un parche de Bézier.
• Interpolación de color: El framework calcula los colores entre los vértices principales. Establece hasBicubicColor en true para la interpolación de Catmull-Rom para cambios de color más suaves o en false para la interpolación bilineal.

Dibuja con MeshGradientPainter

En Jetpack Compose, usa MeshGradientPainter para renderizar un gradiente de malla. MeshGradientPainter dibuja en el lienzo.

Cómo crear un degradado de malla simple

Para crear un gradiente de malla estático básico, inicializa un MeshGradientPainter especificando sus dimensiones y usando la función setVertex dentro del bloque de configuración para posicionar los puntos de esquina y asignarles colores.

val rows = 1
val columns = 1

val gradientPainter = remember {
    MeshGradientPainter(rows, columns) {
        // Parameters: row, column, position, color
        setVertex(0, 0, Offset(0f, 0f), Color.Red)     // Top-Left
        setVertex(0, 1, Offset(1f, 0f), Color.Blue)    // Top-Right
        setVertex(1, 0, Offset(0f, 1f), Color.Green)   // Bottom-Left
        setVertex(1, 1, Offset(1f, 1f), Color.Yellow)  // Bottom-Right
    }
}

Box(
    modifier = modifier
        .aspectRatio(16/9f)
        .fillMaxWidth()
        .paint(gradientPainter)
)
MeshGradientSnippets.kt

Figura 2: Un gradiente de malla básico con cuatro colores, en el que cada esquina se establece en uno de los cuatro.

Cómo usar puntos de control de Bézier específicos

De forma predeterminada, el generador de malla controla los cálculos complejos para mantener las transiciones de la cuadrícula sin problemas. Sin embargo, puedes personalizar de forma explícita las tangentes en cualquier vértice si deseas empujar, tirar o pellizcar de forma selectiva ciertas secciones de color.

Los desplazamientos de control se miden en relación con la posición del vértice host.

val customTangentPainter = remember {
    MeshGradientPainter(rows = 1, columns = 1) {
        // Tweak the top-left vertex to curve outwards to the right and bottom
        setVertex(
            row = 0,
            column = 0,
            position = Offset(0f, 0f),
            color = Color.Magenta,
            rightControlPoint = Offset(0.4f, 0.1f),
            bottomControlPoint = Offset(0.1f, 0.4f)
        )

        // Other points can remain unspecified to use default inferred fallback tangents
        setVertex(0, 1, Offset(1f, 0f), Color.Cyan)
        setVertex(1, 0, Offset(0f, 1f), Color.Blue)
        setVertex(1, 1, Offset(1f, 1f), Color.Black)
    }
}
Box(
    modifier = modifier
        .aspectRatio(16/9f)
        .fillMaxWidth()
        .paint(customTangentPainter)
)
MeshGradientSnippets.kt

Nota: Para inhabilitar por completo la inferencia de tangentes y usar límites lineales nítidos y completamente rectos, asigna una compensación de Offset.Zero a tus puntos de control de vértices.

Figura 3: Curva el vértice superior izquierdo con un punto de control de Bézier.

Cómo crear cuadrículas avanzadas

En este ejemplo, se muestra una cuadrícula de 3 x 3, lo que significa que hay 16 puntos que se deben especificar, con los puntos medios establecidos con diferentes desplazamientos:

val points = remember {
    listOf(
        Offset(0.0f, 0.0f), Offset(0.3f, 0.0f), Offset(0.7f, 0.0f), Offset(1.0f, 0.0f),
        Offset(0.0f, 0.3f), Offset(0.2f, 0.4f), Offset(0.7f, 0.2f), Offset(1.0f, 0.3f),
        Offset(0.0f, 0.7f), Offset(0.3f, 0.8f), Offset(0.7f, 0.6f), Offset(1.0f, 0.7f),
        Offset(0.0f, 1.0f), Offset(0.3f, 1.0f), Offset(0.7f, 1.0f), Offset(1.0f, 1.0f)
    )
}

val gradientPainter = remember {
    MeshGradientPainter(rows = 3, columns = 3) {
        // Row 0
        setVertex(0, 0, points[0], yellow)
        setVertex(0, 1, points[1], orange)
        setVertex(0, 2, points[2], yellow)
        setVertex(0, 3, points[3], purple)

        // Row 1
        setVertex(1, 0, points[4], pink)
        setVertex(1, 1, points[5], yellow)
        setVertex(1, 2, points[6], pink)
        setVertex(1, 3, points[7], purple)

        // Row 2
        setVertex(2, 0, points[8], indigo)
        setVertex(2, 1, points[9], pink)
        setVertex(2, 2, points[10], purple)
        setVertex(2, 3, points[11], indigo)

        // Row 3
        setVertex(3, 0, points[12], purple)
        setVertex(3, 1, points[13], indigo)
        setVertex(3, 2, points[14], pink)
        setVertex(3, 3, points[15], yellow)
    }
}

Box(
    modifier = modifier.padding(32.dp)
        .aspectRatio(16 / 9f)
        .fillMaxWidth()
        .paint(gradientPainter)
        // ...
)
MeshGradientSnippets.kt

Figura 4: Se muestra un degradado de malla con puntos de control de Bézier y colores de onda, y los puntos de malla ilustrados en la parte superior.

Cómo animar un degradado de malla

Dado que el parámetro lambda block de MeshGradientPainter se ejecuta dentro de un DrawScope, puede leer y observar el estado mutable. Puedes animar posiciones o colores a lo largo del tiempo sin reasignar sombreadores ni mapas de bits.

val infiniteTransition = rememberInfiniteTransition(label = "meshMovement")
val animatedOffset by infiniteTransition.animateFloat(
    initialValue = -0.1f,
    targetValue = 0.1f,
    animationSpec = infiniteRepeatable(
        animation = tween(2500, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "offset"
)

val coral = Color(255, 90, 90)
val peach = Color(255, 139, 90)
val amber = Color(255, 169, 90)
val sunshine = Color(255, 212, 90)
val indigo = Color(0xFF5856D6)
val pink = Color(0xFFFF2D55)


val gradientPainter = remember {
    MeshGradientPainter(rows = 3, columns = 3) {
        // Row 0
        setVertex(0, 0, Offset(0.0f, 0.0f), indigo)
        setVertex(0, 1, Offset(0.3f, 0.0f), peach)
        setVertex(0, 2, Offset(0.7f, 0.0f), amber)
        setVertex(0, 3, Offset(1.0f, 0.0f), sunshine)
        // Row 1
        setVertex(1, 0, Offset(0.0f, 0.3f), pink)
        setVertex(1, 1, Offset(0.2f, 0.4f) + Offset(animatedOffset, animatedOffset), coral)
        setVertex(1, 2, Offset(0.7f, 0.2f) + Offset(animatedOffset, animatedOffset), peach)
        setVertex(1, 3, Offset(1.0f, 0.3f), indigo)

        // Row 2
        setVertex(2, 0, Offset(0.0f, 0.7f), coral)
        setVertex(2, 1, Offset(0.3f, 0.8f) + Offset(animatedOffset, 0f), pink)
        setVertex(2, 2, Offset(0.7f, 0.6f) + Offset(animatedOffset, 0f), sunshine)
        setVertex(2, 3, Offset(1.0f, 0.7f), amber)

        // Row 3
        setVertex(3, 0, Offset(0.0f, 1.0f), sunshine)
        setVertex(3, 1, Offset(0.3f, 1.0f), amber)
        setVertex(3, 2, Offset(0.7f, 1.0f), pink)
        setVertex(3, 3, Offset(1.0f, 1.0f), indigo)
    }
}


Box(
    modifier = modifier.padding(32.dp)
        .safeContentPadding()
        .aspectRatio(16 / 9f)
        .fillMaxWidth()
        .paint(gradientPainter)
)
MeshGradientSnippets.kt

Figura 5: Malla de degradado animada con puntos para mostrar la animación.