Descubre las nuevas animaciones de SFSymbols anunciadas en el WWDC24

Es necesario utilizar Xcode 16 Beta o superior y iOS 18 Beta o superior para hacer uso de las nuevas animaciones.

El año pasado en la WWD23, Apple anunció animaciones en los SFSymbols. Este año en la WWDC24 se anunciaron 3 nuevas animaciones:

  • Wiggle
  • Rotate
  • Breathe

Veamos como usar cada una de ellas.

Animación Wiggle

Esta animación nos permite resaltar cambios o puntos de acción en nuestra app. Los símbolos pueden realizar la animación de izquierda a derecha, de arriba a abajo, en sentido horario y antihorario, o hacia un ángulo de inclinación que podemos definir. Veamos un ejemplo:

var wiggleAnimation: some View {
VStack(spacing: 13) {
// 1
Image(systemName: "square.and.arrow.up")
.symbolEffect(.wiggle.up)
// 2
Image(systemName: "alarm.waves.left.and.right")
.symbolEffect(.wiggle.clockwise)
// 3
Image(systemName: "paperplane")
.symbolEffect(.wiggle.custom(angle: 315))
// 4
Image(systemName: "airplane")
.symbolEffect(.wiggle.left)
}
.font(.system(size: 30))
}
  1. Definimos que nuestra animación vaya de arriba hacia abajo. Para lograr el efecto contrario (de abajo hacia arriba) podemos usar .symbolEffect(.wiggle.down).
  2. Definimos que nuestra animación vaya en sentido horario. El efecto contrario se logra escribiendo .symbolEffect(.wiggle.counterClockwise).
  3. Definimos el ángulo en el que queremos que vaya la animación. En nuestro caso, colocamos un ángulo de 315, pero pueden variar este ángulo con el valor que deseen.
  4. Definimos que nuestra animación vaya de izquierda a derecha. Para lograr el efecto contrario usamos .symbolEffect(.wiggle.right).
Ejemplo de la animación Wiggle de los SFSymbols

En el ejemplo anterior, las animaciones se ejecutan de manera indefinida. Si queremos que se ejecuten a partir de una acción, podemos hacer lo siguiente:

import SwiftUI
struct ContentView: View {
// 1
@State var animate = false
var body: some View {
VStack(spacing: 13) {
// 2
Image(systemName: "square.and.arrow.up")
.symbolEffect(.wiggle.up, value: animate)
.font(.system(size: 30))
Button {
// 3
animate.toggle()
} label: {
Text("Animate")
}
}
}
}
  1. Creamos una variable de estado llamada animate, que será de tipo Bool.
  2. Usamos el inicializador del symbolEffect que nos permite añadir como parámetro nuestra variable de estado, lo cual hará que se ejecute la animación cuando esta variable cambie.
  3. Creamos el botón cuya acción será cambiar el estado de nuestra variable.
Ejemplo de la animación Wiggle a partir de una acción

Animación Rotate

Con .rotate, los símbolos pueden hacer la animación en sentido horario, antihorario y por capas. Veamos un ejemplo de cada uno:

VStack(spacing: 13) {
// 1
Image(systemName: "airplane")
.symbolEffect(.rotate)
// 2
Image(systemName: "fan.desk")
.symbolEffect(.rotate.byLayer)
// 3
Image(systemName: "line.3.crossed.swirl.circle")
.symbolEffect(.rotate.counterClockwise)
// 4
Image(systemName: "gearshape.2")
.symbolEffect(.rotate.clockwise)
}
.font(.system(size: 30))
  1. Animación por defecto, simplemente añadimos .symbolEffect(.rotate) y ya tenemos nuestra animación.
  2. Animación por capa, útil para símbolos que tienen diferentes capas, como es el caso de "fan.desk".
  3. Animación en sentido antihorario.
  4. Animación en sentido horario.
Ejemplo de la animación Rotate

Al igual que con la animación .wiggle, pasando como parámetro nuestra variable de estado, podemos empezar la animación al ejecutar una acción. .symbolEffect(.rotate.byLayer, value: animate).

Animación Breathe

Por último, tenemos la animación .breathe, que es muy similar a la animación .pulse, donde la diferencia es que .breathe anima tanto la opacidad como el tamaño del símbolo y la animación .pulse solo anima la opacidad. Veamos un ejemplo de ambos para notar la diferencia:

VStack(spacing: 13) {
// 1
Image(systemName: "heart")
.symbolEffect(.breathe)
// 2
Image(systemName: "heart")
.symbolEffect(.pulse)
}
.font(.system(size: 30))
  1. Vemos la animación .breathe.
  2. Vemos la animación .pulse.
Ejemplo de la animación Breathe

En este tipo de animación, tambien podemos pasar la variable de estado .symbolEffect(.breathe, value: animate).

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn