Descubre las nuevas animaciones de SFSymbols anunciadas en el WWDC24
Marcelo Laprea
03 julio, 20243min de lectura
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) {// 1Image(systemName: "square.and.arrow.up").symbolEffect(.wiggle.up)// 2Image(systemName: "alarm.waves.left.and.right").symbolEffect(.wiggle.clockwise)// 3Image(systemName: "paperplane").symbolEffect(.wiggle.custom(angle: 315))// 4Image(systemName: "airplane").symbolEffect(.wiggle.left)}.font(.system(size: 30))}
- Definimos que nuestra animación vaya de arriba hacia abajo. Para lograr el efecto contrario (de abajo hacia arriba) podemos usar
.symbolEffect(.wiggle.down)
. - Definimos que nuestra animación vaya en sentido horario. El efecto contrario se logra escribiendo
.symbolEffect(.wiggle.counterClockwise)
. - 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.
- Definimos que nuestra animación vaya de izquierda a derecha. Para lograr el efecto contrario usamos
.symbolEffect(.wiggle.right)
.
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 SwiftUIstruct ContentView: View {// 1@State var animate = falsevar body: some View {VStack(spacing: 13) {// 2Image(systemName: "square.and.arrow.up").symbolEffect(.wiggle.up, value: animate).font(.system(size: 30))Button {// 3animate.toggle()} label: {Text("Animate")}}}}
- Creamos una variable de estado llamada
animate
, que será de tipoBool
. - 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. - Creamos el botón cuya acción será cambiar el estado de nuestra variable.
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) {// 1Image(systemName: "airplane").symbolEffect(.rotate)// 2Image(systemName: "fan.desk").symbolEffect(.rotate.byLayer)// 3Image(systemName: "line.3.crossed.swirl.circle").symbolEffect(.rotate.counterClockwise)// 4Image(systemName: "gearshape.2").symbolEffect(.rotate.clockwise)}.font(.system(size: 30))
- Animación por defecto, simplemente añadimos
.symbolEffect(.rotate)
y ya tenemos nuestra animación. - Animación por capa, útil para símbolos que tienen diferentes capas, como es el caso de "fan.desk".
- Animación en sentido antihorario.
- Animación en sentido horario.
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) {// 1Image(systemName: "heart").symbolEffect(.breathe)// 2Image(systemName: "heart").symbolEffect(.pulse)}.font(.system(size: 30))
- Vemos la animación
.breathe
. - Vemos la animación
.pulse
.
En este tipo de animación, tambien podemos pasar la variable de estado .symbolEffect(.breathe, value: animate)
.