Daniel Toranzo Pérez

Daniel Toranzo Pérez

Herramientas Tools

Animador de gradientes de SwiftUI SwiftUI gradient animator

Colores de malla Mesh colors

El borde queda fijo; solo se mueven los puntos interiores.

The border stays fixed; only interior points move.

Geometría y animación Geometry and animation
Presets
Cómo leer la animación How to read the animation
  • Linear: la dirección oscila alrededor del ángulo base. El código anima startPoint y endPoint.
  • Angular: el gradiente gira una vuelta completa cada duración. El código anima startAngle y endAngle.
  • Radial: el centro se desplaza en círculo. El código anima center.
  • Mesh: solo se mueven los puntos interiores; el borde queda fijo para conservar el encuadre. El código anima points.
  • La vista previa de Mesh usa un canvas aproximado; comprueba el resultado en un dispositivo.
  • Linear: the direction oscillates around the base angle. The code animates startPoint and endPoint.
  • Angular: the gradient rotates a full turn every duration. The code animates startAngle and endAngle.
  • Radial: the center drifts in a circle. The code animates center.
  • Mesh: only interior points move; the border stays fixed to preserve the frame. The code animates points.
  • The Mesh preview uses an approximate canvas; check the result on a device.
Vista previa Preview MeshGradient · iOS 18+
0%
SwiftUI 
—

La vista previa es una aproximación. El código usa TimelineView(.animation) (iOS 15+); para cambios puntuales, valora withAnimation y verifica el resultado en un dispositivo.

The preview is an approximation. The code uses TimelineView(.animation) (iOS 15+); for one-off state changes, consider withAnimation and check the result on a device.

Cómo se anima en SwiftUI How it animates in SwiftUI

TimelineView(.animation) vuelve a evaluar la vista en cada fotograma. Es la forma más directa de animar un MeshGradient o de calcular puntos y ángulos manualmente. Para cambios de estado puntuales, withAnimation suele ser más barato si los valores son animables. TimelineView requiere iOS 15+.

  • MeshGradient requiere iOS 18+, iPadOS 18+, macOS 15+, tvOS 18+, watchOS 11+ y visionOS 2+.
  • Los puntos se ordenan de izquierda a derecha y de arriba abajo. Los bordes deben cubrir 0...1 para no dejar huecos; si no lo hacen, usa background.
  • smoothsColors controla la interpolación suave y colorSpace decide si se mezcla en dispositivo o perceptual.
  • Anima pocos puntos y mantén la malla pequeña. Un TimelineView a la frecuencia de refresco puede costar más que una animación de estado; para cambios lentos, valora TimelineView(.periodic).
  • Respeta Reduce Motion: si está activo, muestra un gradiente estático o reduce la animación.

Referencias: MeshGradient, TimelineView y Create custom visual effects with SwiftUI (WWDC24).

TimelineView(.animation) re-evaluates the view every frame. It is the most direct way to animate a MeshGradient or to calculate points and angles manually. For one-off state changes, withAnimation is usually cheaper when the values are animatable. TimelineView requires iOS 15+.

  • MeshGradient requires iOS 18+, iPadOS 18+, macOS 15+, tvOS 18+, watchOS 11+, and visionOS 2+.
  • Points are ordered left to right and top to bottom. Border points should cover 0...1 to avoid gaps; if they do not, use background.
  • smoothsColors controls smooth interpolation, and colorSpace chooses device or perceptual blending.
  • Animate few points and keep the mesh small. A display-rate TimelineView can cost more than a state animation; for slow changes, consider TimelineView(.periodic).
  • Respect Reduce Motion: show a static gradient or reduce the animation when it is enabled.

References: MeshGradient, TimelineView, and Create custom visual effects with SwiftUI (WWDC24).