Más allá de las IU estáticas: Crea animaciones dinámicas de carga con la clase Graphics de Xojo

A continuación encontrarás traducido al Castellano el artículo escrito por Gabriel Ludosanu y publicado originalmente en el Blog Oficial de Xojo.

¿Alguna vez te has preguntado cómo crear esas animaciones de aspecto profesional que ves en las aplicaciones modernas?

En este artículo veremos como desatar la potencia del control DesktopCanvas de Xojo, así como las capacidades de la clase Graphics para recrear una de las populares animaciones de carga SpinKit creada originalmente por Tobias Ahlin. Implementaremos la animación de “tres puntos rebotando”, transformando dicha animación CSS en código nativo Xojo.

No sólo aprenderás como crear esta animación en concreto, sino que también ganarás un conocimiento valioso sobre los principios de la animación en Xojo que podrás utilizar a la hora de crear tus propias animaciones personalizadas. Cuando termines este tutorial habrás aprendido a:

Utilizar la potencia de DesktopCanvas a la hora de crear gráficos personalizados.
Crear animaciones suaves mediante los Timer.
Implementar animaciones basadas en fase.
Usar los métodos de Graphics para dibujar formas dinámicas.
Gestionar los ciclos de la animación correctamente.

Por qué importa todo esto

La animaciones de carga son algo más que un atractivo visual; suponen elementos de la interfaz de usuario esenciales para mantener a los usuarios informados cuando tu app esté procesando datos. En vez de utilizar imágenes estáticas o bien usar librerías de terceros, la creación de tus propias animaciones te proporciona un control completo sobre el aspecto y sensación transmitidas por tu aplicación al tiempo que se reducen las dependencias al mínimo.

¿Qué estamos creando?

Crearemos la animación suave y de aspecto profesional consistente en tres puntos que escalarán su tamaño aumentando y reduciéndose en secuencia. El resultado será un indicador de carga personalizable y ligero que podrás soltar y utilizar en cualquiera de tus proyectos Xojo. Esto es lo que hace especial a esta implementación:

Código puro en Xojo, sin dependencias externas.
Una animación suave y fluida.
Colores y tiempos fácilmente personalizables.
Uso eficiente de los recursos.
Un diseño claro y orientado a objetos.

Bien, comencemos a crear nuestra clase de animación genial.

Paso 1: Configurar la Clase base

En primer lugar, crea una nueva clase (Insert > Class) que herede de DesktopClass:

Protected Class SpinKitClass Inherits DesktopCanvas

Paso 2: Definir las propiedades Fundamentales

Añade estas propiedades esenciales para controlar la animación:

Private animationPhases() As Double      // Almacena lo offset de fase para cada punto
Private animationSpeed As Integer = 60   // Velocidad de refresco de la animación en milisegundos
Private animationTimer As Timer         // Temporizador encargado de realizar la animación
Private currentPhase As Double = 0.0    // Fase actual de la animación
Private dotSize As Integer = 20         // Tamaño de cada punto
Private dotSpacing As Integer = 20      // Espacio entre puntos

Paso 3: Definir las Constantes

Define las constantes que controlan el comportamiento de la animación:

Private Const kDefaultColor As Color = &c333333 // Color del punto
Private Const kPhaseIncrement As Double = 0.05 // Velocidad de la animación

Paso 4: Implementar los métodos de control de la animación

Añade los métodos para iniciar y detener la animación:

Public Sub StartAnimation()
  /// Inicializa y da inicio a la animación
  /// Configura los offset iniciales de fase para los puntos
  /// Crea y configura el Timer de la animación
  
  If animationTimer = Nil Then
    animationPhases = Array(0.0, 0.16, 0.32)
    
    animationTimer = New Timer
    AddHandler animationTimer.Action, AddressOf UpdateAnimation
    animationTimer.Period = animationSpeed
    animationTimer.RunMode = Timer.RunModes.Multiple
  End If
End Sub

Public Sub StopAnimation()
  /// Detiene la animación en curso
  /// Elimina el handler del temporizador y otras tareas de finalización
  /// Actualiza el canvas para borrar la animación
  
  If animationTimer <> Nil Then
    RemoveHandler animationTimer.Action, AddressOf UpdateAnimation
    animationTimer = Nil
    Refresh
  End If
End Sub

Paso 5: Crear la lógica para actualizar la animación

Implementa el método del temporizador que gestiona la animación:

Private Sub updateAnimation(sender As Timer)
  /// Este es el método que actualiza el estado de la animación
  /// Incrementa la fase y dispara la actualización (redibujado)
  /// @param sender: El Timer que ha disparado este método
  
  #Pragma Unused sender
  
  // Incrementa la fase actual (spin08)
  currentPhase = currentPhase + kPhaseIncrement
  // Resetea currentPhase si supera 1.0
  If currentPhase > 1.0 Then currentPhase = 0
  
  // Invalida el canvas para forzar su redibujado
  Refresh()
End Sub

Step 6: Implementar la lógica de dibujado

Añade el código encargado de dibujar la animación propiamente dicha:

Private Sub animation08(g As Graphics)
  /// Dibuja un frame de la animación de carga de tres puntos
  /// Dibuja 3 puntos que aumentan y disminuyen en secuencia
  /// @param g El contexto gráfico sobre el que se va a dibujar
  
  Var centerX As Integer = Me.Width / 2
  Var centerY As Integer = Me.Height / 2
  
  For i As Integer = 0 To 2
    Var phase As Double = currentPhase + animationPhases(i)
    
    // Se asegura de que la fase este entre 0 y 1
    If phase > 1.0 Then phase = phase - 1.0
    
    Var scale As Double
    If phase < 0.4 Then
      scale = phase / 0.4
    Else
      scale = (1.0 - phase) / 0.6
    End If
    
    Var size As Integer = dotSize * scale
    Var x As Integer = centerX + (i - 1) * dotSpacing - size / 2
    Var y As Integer = centerY - size / 2
    
    g.DrawingColor = kDefaultColor
    g.FillOval(x, y, size, size)
  Next
End Sub

Paso 7: Gestionar el Evento Paint

Implementa el evento Paint para lanzar el dibujado de la animación:

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  /// Evento Paint encargado de dibujar la animación
  /// Invocado automáticamente cada vez que es preciso actualizar el Canvas
  /// Si la animación está en funcionamiento, llama a animation08; de lo contrario limpia el canvas
  
  If animationTimer <> Nil Then
    animation08(g)
  Else
    g.ClearRectangle(0, 0, Width, Height)
  End If
End Sub

¿Cómo funciona?

La animación utiliza un sistema basado en cambio de fase donde cada punto es incrementado en su ciclo de animación.
Los puntos aumentan y reducen su tamaño basándose en la fase actual.
Un temporizador (Timer) dirige la animación aumentando la fase y forzando el redibujado.
Los puntos se ubican horizontalmente con un espacio equivalente entre sí sobre el centro.
El tamaño de cada punto se calcula en función de su fase actual durante la animación.

Usando la animación

Para utilizar esta animación en tu proyecto, todo lo que has de hacer es arrastrar y soltar simplemente la clase sobre una DesktopWindow, e iniciar y detener la animación cuando sea preciso.

// Inicia la animación
SpinKit1.StartAnimation()
 
// Detiene la animación cuando se haya finalizado el proceso
SpinKit1.StopAnimation()

Personalización

Puedes personalizar la animación ajustando:

dotSize para tener puntos más grandes o pequeños.
dostSpacing para cambiar la separación entre puntos.
animationSpeed para que la animación sea más rápida o lenta.
kDefaultColor para cambiar el color del punto.
kPhaseIncrement para ajustar la velocidad de la animación.

Más allá

La animación de “Tres puntos que botan” creada es sólo una de las múltiples e increíbles animaciones disponibles en la colección SpinKit. Ahora que comprendes los fundamentos, ¿por qué no intentas recrear otra de las animaciones de SpinKit? Estos son algunos de los interesantes retos que puedes acometer:

Modificar la animación en curso para utilizar diferentes formas (cuadrados, rectángulos).
Experimentar con las diferentes funciones de tiempo para variar los efectos de la animación.
Intentar implementar las animaciones “Rotating Plane” o la animación “Chasing Dots” de SpinKit.
Crear tus propias variaciones únicas mediante la combinación de lo que has aprendido.
Optimizar aun más la clase.

¡Comparte tus creaciones!

¿Has creado una variación increíble o has implementado alguna otra animación de SpinKit con Xojo? ¡Compártela con la comunidad! Los foros de Xojo y los canales sociales son unos excelentes sitios en los que puedes mostrar tus creaciones e inspirar a otros desarrolladores.

Recursos y futuras exploraciones

Animaciones SpinKit originales de Tobias Ahlin: https://tobiasahlin.com/spinkit/
Documentación Xojo sobre la clase Graphics: https://documentation.xojo.com/api/graphics/graphics.html
Documentación Xojo sobre el control DesktopCanvas: https://documentation.xojo.com/api/user_interface/desktop/desktopcanvas.html

Recuerda: Cada gran aplicación se merece el uso de animaciones geniales, ¡y tienes las herramientas para crearlas! Sigue experimentando, sigue creando y, lo más importante, ¡sigue animando!