Animaciones de SF Symbols en SwiftUI: 12 efectos y 5 modos de color

Las animaciones de SF Symbols en SwiftUI han crecido versión a versión. iOS 17 añadió el primer conjunto de efectos, iOS 18 añadió más e iOS 26 añadió Draw. Por eso cuesta recordar qué versión de iOS necesita cada efecto y qué modificador lo reproduce. El desarrollador de iOS @sarunw cuenta 12 formas de animar un símbolo y 5 formas de colorearlo.

Esta guía las reúne todas en un solo lugar: qué hace cada efecto, la versión de iOS que lo introdujo, el modificador que lo reproduce y las cinco opciones de color. Se basa en la documentación de Apple y en las sesiones sobre SF Symbols de la WWDC23, la WWDC24 y la WWDC25. Las API más recientes llegaron en iOS 26, y los detalles pueden cambiar entre versiones.

¿Cómo funcionan las animaciones de SF Symbols en SwiftUI?

Todas las animaciones de símbolos pasan por la misma familia de modificadores, y el que uses depende del comportamiento del efecto. La sesión de Apple de la WWDC23 Animate symbols in your app define cuatro comportamientos:

• Discreto: se reproduce una vez y se detiene, como Bounce.
• Indefinido: cambia el símbolo y lo mantiene cambiado hasta que quitas el efecto, como Scale.
• Transición: anima la entrada o la salida de un símbolo, como Appear y Disappear.
• Transición de contenido: anima el paso de un símbolo a otro, como Replace.

Cada comportamiento es un protocolo del framework Symbols, y cada efecto declara los comportamientos que admite. SwiftUI los asocia a llamadas distintas. Los efectos discretos usan symbolEffect(_:options:value:), que reproduce el efecto cada vez que cambia el valor. Los efectos indefinidos usan symbolEffect(_:options:isActive:), donde isActive es true por defecto. Ambos modificadores llegaron en iOS 17 y funcionan en cualquier vista que contenga imágenes de símbolos, no solo en una única Image.

¿Qué efectos de SF Symbols existen y qué versión de iOS añadió cada uno?

Estos son los 12 efectos que enumera @sarunw, con los comportamientos que la documentación de Apple muestra hoy para cada uno. Appear aparece junto a Disappear porque forman un par.

El conjunto de iOS 17 llegó con SF Symbols 5. Wiggle, Rotate y Breathe se presentaron en la WWDC24 con SF Symbols 6, y Draw y Variable Draw en la WWDC25 con SF Symbols 7. Variable Draw es la excepción: Apple lo llama un preajuste de renderizado más que una animación, pero cambia la forma en que un símbolo muestra el progreso, así que tiene su lugar en la lista.

¿Cómo reproduzco efectos puntuales y en bucle con symbolEffect?

Usa un efecto discreto cuando ocurre algo: llega un mensaje nuevo, termina una descarga o se toca un botón. Pasa un valor y el efecto se reproducirá cada vez que cambie.

struct InboxButton: View {
    @State private var newMessages = 0

    var body: some View {
        Button("Inbox", systemImage: "bell") { newMessages += 1 }
            .symbolEffect(.bounce, value: newMessages)
    }
}

Wiggle y Rotate, ambos nuevos en iOS 18, usan la misma llamada. La sesión de Apple de la WWDC24 sugiere Wiggle para un cambio o una llamada a la acción que podría pasar desapercibida, y Rotate para una tarea en curso, como unas flechas que giran.

Image(systemName: "bell.badge")
    .symbolEffect(.wiggle, value: newMessages)

Image(systemName: "arrow.triangle.2.circlepath")
    .symbolEffect(.rotate, isActive: isSyncing)

La segunda línea muestra la forma indefinida. Con isActive, el efecto se mantiene hasta que el indicador pasa a false, lo que encaja con estados más que con eventos: sincronizando, grabando, esperando una conexión. Pulse, Variable Color y Breathe encajan aquí. Apple explica la diferencia entre los dos más parecidos: Pulse cambia la opacidad, mientras que Breathe cambia la opacidad y el tamaño. Scale mantiene un símbolo en un tamaño nuevo mientras está activo.

Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative, isActive: isSearching)

Image(systemName: "mic.fill")
    .symbolEffect(.breathe, isActive: isRecording)

Image(systemName: "heart.fill")
    .symbolEffect(.scale.up, isActive: isFavorite)

La mayoría de los efectos tienen variantes. .variableColor tiene los estilos de relleno .iterative y .cumulative, Bounce y Scale tienen .up y .down, y muchos efectos se pueden aplicar .byLayer o a .wholeSymbol. El parámetro options recibe SymbolEffectOptions, que define la repetición y la velocidad.

¿Cómo hago que un símbolo entre, salga o se convierta en otro?

Appear y Disappear admiten dos comportamientos. Como efecto indefinido, .symbolEffect(.disappear, isActive: isHidden) oculta un símbolo hasta que el indicador pasa a false. Como transición, el efecto se reproduce cuando SwiftUI inserta o elimina la vista.

if isConnected {
    Image(systemName: "antenna.radiowaves.left.and.right")
        .transition(.symbolEffect(.appear))
}

Draw On y Draw Off, nuevos en iOS 26, siguen el mismo patrón. La documentación de Apple describe SymbolEffectTransition como la aplicación de la animación Appear, Disappear, DrawOn o DrawOff. Draw traza un símbolo a lo largo de sus trazados, en la dirección que define cada símbolo. Hacking with Swift muestra las tres opciones de reproducción una al lado de otra:

Image(systemName: "signature")
    .symbolEffect(.drawOn, isActive: isSigned)

Image(systemName: "signature")
    .symbolEffect(.drawOn.wholeSymbol, isActive: isSigned)

Image(systemName: "signature")
    .symbolEffect(.drawOn.individually, isActive: isSigned)

Por capas es el comportamiento por defecto y escalona cada trazado. Símbolo completo dibuja todas las capas a la vez, e individualmente dibuja una capa tras otra. Draw Off también tiene .reversed y .nonReversed. Los símbolos personalizados necesitan anotaciones de dibujo en la app SF Symbols antes de poder usar Draw.

Replace cambia un símbolo por otro. Aplícalo como transición de contenido y cambia el nombre del sistema:

Image(systemName: isMuted ? "speaker.slash.fill" : "speaker.wave.2.fill")
    .contentTransition(.symbolEffect(.replace.magic(fallback: .replace.downUp)))

Magic Replace, de iOS 18, conserva las partes que comparten dos símbolos relacionados y anima solo lo que difiere, como una barra diagonal o una insignia. La sesión de Apple de la WWDC24 dice que pasó a ser el comportamiento por defecto de Replace, y que los símbolos no relacionados recurren a un Replace estándar. magic(fallback:) te permite elegir esa alternativa. En iOS 26, Apple añadió la coincidencia de contornos y Draw: la barra diagonal saliente se borra con Draw Off y la entrante se dibuja con Draw On.

¿Cómo muestro el progreso con Variable Color y Variable Draw?

Algunos símbolos admiten un valor variable de 0.0 a 1.0, que se pasa con Image(systemName:variableValue:). Por defecto, el símbolo lo muestra con Variable Color, activando o desactivando cada capa variable según un umbral. En iOS 26, Variable Draw dibuja cada capa hasta una longitud que corresponde al valor, sobre una copia atenuada del trazado. Los ejemplos de Apple son el progreso de una descarga, la temperatura y una sesión cronometrada.

// El símbolo debe admitir Variable Draw; compruébalo en la app SF Symbols.
Image(systemName: "thermometer.high", variableValue: temperatureLevel)
    .symbolVariableValueMode(.draw)

symbolVariableValueMode(_:) recibe .color o .draw. Apple señala que un símbolo puede admitir ambos, pero solo se aplica uno al renderizarlo.

¿Cuáles son los 5 modos de renderizado de SF Symbols en SwiftUI?

El color es la otra mitad del aspecto de un símbolo. Cuatro modos son casos de SymbolRenderingMode, que se definen con symbolRenderingMode(_:) desde iOS 15. Si no defines ninguno, SwiftUI elige un modo a partir de la imagen y del estilo de primer plano actual.

Hierarchical y palette usan ambos foregroundStyle. Hierarchical necesita un estilo; palette admite hasta tres, uno por capa.

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

Image(systemName: "person.crop.circle.badge.plus")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.white, .blue)

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.multicolor)

Técnicamente, el degradado es otro tipo de ajuste. Es un caso de SymbolColorRenderingMode, cuyo otro caso es .flat, así que rellena las capas en lugar de elegirlas. La sesión de Apple de la WWDC25 dice que el degradado se genera a partir de un único color de origen y funciona con todos los modos de renderizado, así que puedes combinarlo con cualquiera de los cuatro.

Image(systemName: "flame.fill")
    .symbolRenderingMode(.hierarchical)
    .symbolColorRenderingMode(.gradient)
    .foregroundStyle(.orange)

Apple dice que los degradados se ven bien en cualquier tamaño, pero destacan más en los símbolos grandes, así que úsalos donde quieras resaltar la profundidad de un símbolo.

¿Por qué importan más los SF Symbols en iPhone Duo?

En iPhone Duo, las apps compiladas con el SDK de iOS 27.1 reciben una barra vertical a lo largo de un borde lateral. El Tech Talk de Apple Raise the bar with iPhone Duo describe su ancho como fijo, y @sarunw señala que eso favorece los elementos que solo muestran un símbolo. Los elementos de la barra de herramientas con icono pasan a la barra vertical; los elementos solo de texto siguen en horizontal.

Por eso, un símbolo claro para cada acción de la barra de herramientas importa más que antes. Elige símbolos que se entiendan sin etiqueta y mantén también el título, porque el sistema lo sigue usando en los menús de desbordamiento. Nuestra guía de la barra de herramientas vertical en iPhone Duo explica cómo se mueven los elementos, cómo pasan al desbordamiento y cómo se fijan.

Las charlas de Apple sobre iPhone Duo no dicen nada específico sobre los efectos de símbolos ni los modos de renderizado en la barra vertical. Nada de lo que recoge esta guía cambia en el dispositivo, y se aplican los mismos modificadores. Para ver cómo Liquid Glass agrupa y tiñe los elementos de la barra de herramientas en iOS 26, consulta nuestra guía de la barra de herramientas de SwiftUI con Liquid Glass.

Puntos clave

• Anima los símbolos con .symbolEffect: pasa value: para efectos puntuales e isActive: para efectos que se mantienen hasta que los detienes.
• Bounce, Pulse, Variable Color, Scale, Appear y Disappear, y Replace necesitan iOS 17. Wiggle, Rotate, Breathe y Magic Replace necesitan iOS 18. Draw y Variable Draw necesitan iOS 26.
• Usa .transition(.symbolEffect(...)) para Appear, Disappear y Draw, y .contentTransition(.symbolEffect(.replace)) para cambiar de símbolo.
• Colorea los símbolos con monochrome, hierarchical, palette o multicolor, y añade .symbolColorRenderingMode(.gradient) en iOS 26.
• En iPhone Duo, la barra vertical favorece los elementos con solo un símbolo, así que da a cada acción de la barra de herramientas un símbolo claro y un título.

A continuación, lee cómo dispone esos símbolos la barra de herramientas vertical de iPhone Duo y después mira juegos que aprovechan de verdad el plegado en Built for the fold.