Descubre opciones avanzadas de las animaciones de SFSymbols

Marcelo Laprea

12 julio, 20233min de lectura

Ya descubrimos como animar los SFSymbols gracias al modificador symbolEffect(_:options:value:). Veamos que otras opciones tenemos para las animaciones.

Definiendo los SymbolEffectOptions

Podemos definir en el modificador symbolEffect(_:options:value:) las opciones SymbolEffectOptions, que son opciones de configuración de como los efectos son aplicados a los iconos.

• repeat(_ count: Int).
• speed(_ speed: Double).
• nonRepeating.
• repeating.

Veamos cada uno de ellos:

1. repeat(_ count: Int):

Luego de definir el tipo de animación, definimos la opción de repeat con la cantidad de veces que queremos que se repita la animación. Veamos un ejemplo:

struct ContentView: View {
  @State var cart: Int = 0

  var body: some View {
    VStack(spacing: 13) {
      Image(systemName: "cart")
        .symbolEffect(
          .bounce,
          options: .repeat(2),
          value: cart
        )
        .font(.system(size: 30))
      Button("Añadir producto") {
        cart += 1
      }
    }
  }
}

2. speed(_ speed: Double):

Definimos el multiplicador para aumentar o disminuir la velocidad de la animación. El valor por defecto del multiplicador es 1.0. Veamos un ejemplo:

struct ContentView: View {
  var body: some View {
    VStack(spacing: 18) {
      Image(systemName: "magnifyingglass")
        .symbolEffect(
          .pulse,
          options: .speed(2.0))
        .font(.system(size: 30))
    }
  }
}

3. nonRepeating:

Podemos definir que una animación no se repita al colocar la opción nonRepeating. Por ejemplo, el tipo de animación .pulse es de tipo Indefinite, es decir, que se repetirá hasta que se le indique, pero si definimos la animación con la opción nonRepeating, solo animará una vez. Veamos un ejemplo:

struct ContentView: View {
  var body: some View {
    VStack(spacing: 18) {
      Image(systemName: "magnifyingglass")
        .symbolEffect(
          .pulse,
          options: .nonRepeating)
        .font(.system(size: 30))
    }
  }
}

4. repeating:

Caso contrario a nonRepeating, en el cual definimos esta opción si queremos que la animación se repita indefinidamente. Veamos un ejemplo:

struct ContentView: View {
  @State var cart: Int = 0

  var body: some View {
    VStack(spacing: 13) {
      Image(systemName: "cart")
        .symbolEffect(
          .bounce,
          options: .repeating,
          value: cart
        )
        .font(.system(size: 30))
      Button("Añadir producto") {
        cart += 1
      }
    }
  }
}

Usando SFSymbols app

Con la aplicación de SFSymbols 5.0 Beta, que podemos descargarla aquí, vamos a poder previsualizar las animaciones y copiar el código con la animación que queramos. Veamos como:

1. Abrimos la aplicación.
2. Seleccionamos un icono.
3. En el menú ubicado a la derecha, vamos a seleccionar la opción de Animation Inspector.

4. Podemos configurar la animación con las diferentes opciones, y previsualizar la animación.

5. Le damos al botón copiar, copy configuration for Swift, siendo este el resultado: .variableColor.cumulative.dimInactiveLayers.nonReversing. Ahora lo copiamos en el tipo de symbolEffect de la siguiente forma.

struct ContentView: View {
  var body: some View {
    VStack(spacing: 13) {
      Image(systemName: "wifi")
        .symbolEffect(.variableColor.cumulative.dimInactiveLayers.nonReversing)
        .font(.system(size: 40))
    }
  }
}

Gracias a la aplicación de SFSymbols, podemos ahorrar tiempo a la hora de configurar la animación que queremos en nuestra app.