By the end of this tutorial, you will learn how to:

• Create a desktop game application in Xojo
• Use DesktopCanvas for game board rendering
• Implement game logic and state management
• Handle user interactions
• Add visual effects and animations

Setting Up the Project

Launch Xojo and Create a New Project

• Open Xojo IDE
• Select “Desktop” project type
• Set an Application Name (e.g., “TicTacToe”)
• Click “Create”

Creating the TicTacToeGame Custom Control

To have a clear and modular code structure, the game logic and user interface will be implemented in a subclassed DesktopCanvas control.

Here are several key advantages for this approach:

• Encapsulation: It neatly bundles all the game’s logic (like checking for wins or handling player turns) and visual elements (drawing the board, animating moves) into a single, self-contained unit. This makes your code cleaner, easier to understand, and simpler to maintain. You can reuse this control in other projects without rewriting everything.
• Organization: A custom control promotes better code organization by separating the game’s functionality from the rest of your application’s code. This reduces complexity, especially if your application grows larger and includes other features.
• Reusability: Once you’ve created the TicTacToeGame control, you can easily reuse it in other Xojo projects. Just drag and drop it onto a window!
• Abstraction: The custom control provides an abstraction layer. The rest of your application doesn’t need to know the internal workings of the TicTacToe game; it only needs to interact with the control’s interface (like starting a new game or getting the current score). This makes it easier to modify or update the game logic without affecting other parts of your application.

Now, here are the steps to create this custom control based on DesktopCanvas:

1. Click the “Insert” menu
2. Select “Class”
3. Name the class “TicTacToeGame”
4. Set the “Super” to “DesktopCanvas”

TicTacToeGame Class Structure

First, we start by defining some important constants and properties that will be used by the game class.

Constants

1. Private Const kBoardSize as Number = 3
   • Defines the grid dimensions (3×3)
   • Used for iterating through board cells
   • Provides flexibility for potential future grid size changes
2. Private Const kCellsPadding as Number = 40
   • Controls spacing around X and O symbols
   • Ensures symbols don’t touch cell borders
   • Provides visual breathing room in cell drawings

Properties

Game State Properties

1. Public Property boardState(2,2) As Integer
   • 2D array representing game board
   • Values:
     • 0 = Empty cell
     • 1 = Player X
     • 2 = Player O
2. Public Property currentPlayer As Integer = 1
   • Tracks current turn
   • 1 = Player X
   • 2 = Player O
3. Public Property isGameOver As Boolean = False
   • Indicates game completion status
   • Prevents further moves after game ends

Rendering Properties

Public Property CellHeight As Integer
Get
  Return Height / 3
End Get

Set
  
End Set
End Property

Public Property CellWidth As Integer
Get
  Return Width / 3
End Get

Set
  
End Set
End Property

1. CellHeight, CellWidth As Integer
   • Computed properties
   • Dynamically calculate cell dimensions based on canvas size
   • Divide width/height by 3 for equal grid cells
2. ColorBoard, ColorX, ColorOAs Color
   • Store color schemes for board elements
   • Support dark/light mode themes

Animation Properties

1. Public Property animationProgress As Double
   • Tracks symbol drawing animation
   • Ranges from 0 to 1
   • Controls symbol scaling during placement
2. Public Property animationTimer As Timer
   • Manages animation timing
   • Triggers smooth symbol rendering

Interaction Tracking

1. Public Property HoverCol As Integer = -1and Public Property HoverCol As Integer = -1
   • Track mouse position over grid
   • Enable hover effect on empty cells
   • Provide visual feedback during gameplay

Scoring Properties

1. scoreX and scoreOAs Integer
   • Track win counts for each player
   • Updated after each game

The constants and properties defined above will be crucial in the next steps, allowing us to implement the key features: encapsulation of game logic and rendering, flexible customization, responsive dynamic sizing and interactions, and an enhanced user experience through animations and hover effects.

Event Definitions

To make sure our game class is complete, we will create two custom event definitions that will be used later throughout the game.

GameStatus Event

Event GameStatus(info As String, playerTurn As String = "", scoreX As Integer, scoreO As Integer)

• Purpose: Tracks and communicates the current state of the game
• Parameters:
  1. info: A string describing the current game status
  2. playerTurn: Optional parameter indicating which player’s turn it is
  3. scoreX: Current score for Player X
  4. scoreO: Current score for Player O

GameOver Event

Event GameOver(result As String, scoreX As Integer, scoreO As Integer)

• Purpose: Signals the conclusion of the game with a winner or draw
• Parameters:
  1. result: A string describing the game’s final outcome (e.g., “X Wins”, “O Wins”, “Draw”)
  2. scoreX: Final score for Player X
  3. scoreO: Final score for Player O

Event Handlers in Tic-Tac-Toe Game

Closing Event

Sub Closing() Handles Closing
  // This event ensures that the animation timer is properly disabled and its handler is removed to prevent memory leaks or unexpected behavior.
  // Clean up the animation timer when the control is closing
  If animationTimer <> Nil Then
    animationTimer.Enabled = False
    RemoveHandler animationTimer.Action, AddressOf AnimationStep
    animationTimer = Nil
  End If
End Sub

• Ensures clean resource management
• Disables and removes timer to prevent memory leaks
• Called when the control is being destroyed

MouseDown Event

Function MouseDown(x As Integer, y As Integer) Handles MouseDown as Boolean
  // This event handles mouse click actions on the game board.
  // It checks if the game is over; if not, it calculates the row and column of the click.
  // If the clicked cell is empty, it records the player's move, checks for a winner, and toggles the current player.
  
  // Handle mouse clicks on the game board
  If isGameOver Then
    Return True
  End If
  
  // Calculate the row and column based on the click position
  Var row As Integer = y \ CellHeight
  Var col As Integer = x \ CellWidth
  
  // If the clicked cell is empty, make a move
  If boardState(row, col) = 0 Then
    boardState(row, col) = currentPlayer
    StartAnimation(row, col)
    
    // Reset hover position after a move
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the affected cell
    Refresh(col * CellWidth, row * CellHeight, CellWidth, CellHeight)
    
    // Check for a winner or a draw
    Var winner As Integer = CheckWinner()
    If winner > 0 Then
      UpdateScore(winner)
      GameStatus("Player " + PlayerSymbol(winner) + " wins!", scoreX, scoreO)
      isGameOver = True
      GameOver("Player " + PlayerSymbol(winner) + " wins!", scoreX, scoreO)
      
      // Refresh the entire board to show the winning line
      Refresh(True)
    ElseIf Me.IsBoardFull() Then
      GameStatus("It's a draw!", scoreX, scoreO)
      isGameOver = True
      GameOver("Draw", scoreX, scoreO)
    Else
      // Switch to the other player
      currentPlayer = If(currentPlayer = 1, 2, 1)
      GameStatus("Player " + PlayerSymbol(currentPlayer) + "'s turn", PlayerSymbol(currentPlayer), scoreX, scoreO)
    End If
  End If
  
  Return True
End Function

• Handles player moves
• Validates move legality
• Checks for win/draw conditions
• Switches players

MouseExit and MouseMove Events

Sub MouseExit() Handles MouseExit
  // This event is triggered when the mouse cursor exits the game board area.
  // It clears the hover effect to avoid leaving any visual artifacts on the board when the mouse is moved away.
  
  If hoverRow >= 0 And hoverRow < kBoardSize And hoverCol >= 0 And hoverCol < kBoardSize Then
    Var oldHoverRow As Integer = hoverRow
    Var oldHoverCol As Integer = hoverCol
    
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the cell that was previously hovered
    Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
  End If
End Sub

Sub MouseMove(x As Integer, y As Integer) Handles MouseMove
  // This event handles mouse movement over the game board.
  // It updates the hover effect when the mouse moves to a new cell, providing visual feedback.
  
  If Not isGameOver Then
    Var newHoverRow As Integer = y \ CellHeight
    Var newHoverCol As Integer = x \ CellWidth
    
    If newHoverRow <> hoverRow Or newHoverCol <> hoverCol Then
      Var oldHoverRow As Integer = hoverRow
      Var oldHoverCol As Integer = hoverCol
      
      hoverRow = newHoverRow
      hoverCol = newHoverCol
      
      // Refresh the old hover cell (if it was valid)
      If oldHoverRow >= 0 And oldHoverRow < 3 And oldHoverCol >= 0 And oldHoverCol < 3 Then
        Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
      End If
      
      // Refresh the new hover cell
      Refresh(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

• Provides visual hover feedback
• Tracks mouse movement across grid
• Refreshes only changed cells

Opening Event

Sub Opening() Handles Opening
  // This event initializes the board colors based on the current system theme (dark mode or light mode) and starts a new game.
  
  // Set up colors of the board lines, for the X's and O's
  If Color.IsDarkMode = True Then
    ColorBoard = Color.RGB(178, 161, 149)
    ColorX = Color.RGB(228, 182, 88)
    ColorO = Color.RGB(253, 161, 97)
  Else
    ColorBoard = Color.RGB(130, 110, 92)
    ColorX = Color.RGB(228, 182, 88)
    ColorO = Color.RGB(253, 161, 97)
  End If
  
  NewGame()
End Sub

• Initializes color theme
• Supports dark and light modes
• Starts a new game automatically

Paint Event

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  // This event is responsible for drawing the game board, hover effects, player symbols (X's and O's), and the winning line.
  // It is called whenever the game board needs to be redrawn.
  
  // Draw the board
  g.DrawingColor = ColorBoard
  g.DrawLine(Width/3, 0, Width/3, Height)
  g.DrawLine(2*Width/3, 0, 2*Width/3, Height)
  g.DrawLine(0, Height/3, Width, Height/3)
  g.DrawLine(0, 2*Height/3, Width, 2*Height/3)
  
  // Draw hover effect
  DrawHoverEffect(g)
  
  // Draw X's and O's
  g.PenSize = 8
  For row As Integer = 0 To 2
    For col As Integer = 0 To 2
      If boardState(row, col) = 1 Then
        DrawX(g, row, col)
      ElseIf boardState(row, col) = 2 Then
        DrawO(g, row, col)
      End If
    Next
  Next
  
  // Draw winning line if the game is over
  If isGameOver Then
    DrawWinningLine(g)
  End If
End Sub

• Renders game board
• Draws grid lines
• Manages visual game state
• Supports dynamic rendering

Animation and Drawing Methods

1. AnimationStep

Public Sub AnimationStep(sender As Timer)
  // This method is called by the animation timer (animationTimer property) to progress the animation of a newly placed symbol.
  // It increments the animation progress and stops the timer once the animation is complete.
  
  // Progress the animation
  animationProgress = animationProgress + 0.1
  If animationProgress >= 1 Then
    animationTimer.Enabled = False
    animationProgress = 1
  End If
  
  // Refresh only the cell being animated
  Refresh(lastPlayedCol * CellWidth, lastPlayedRow * CellHeight, CellWidth, CellHeight)
  
  // If the animation is complete, stop the timer
  If animationProgress >= 1 Then
    animationTimer.Enabled = False
  End If
End Sub

• Manages symbol placement animation
• Gradually scales symbol from 0 to 1
• Updates only the recently played cell

2. DrawX and DrawO

Sub MouseExit() Handles MouseExit
  // This event is triggered when the mouse cursor exits the game board area.
  // It clears the hover effect to avoid leaving any visual artifacts on the board when the mouse is moved away.
  
  If hoverRow >= 0 And hoverRow < kBoardSize And hoverCol >= 0 And hoverCol < kBoardSize Then
    Var oldHoverRow As Integer = hoverRow
    Var oldHoverCol As Integer = hoverCol
    
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the cell that was previously hovered
    Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
  End If
End Sub

Sub MouseMove(x As Integer, y As Integer) Handles MouseMove
  // This event handles mouse movement over the game board.
  // It updates the hover effect when the mouse moves to a new cell, providing visual feedback.
  
  If Not isGameOver Then
    Var newHoverRow As Integer = y \ CellHeight
    Var newHoverCol As Integer = x \ CellWidth
    
    If newHoverRow <> hoverRow Or newHoverCol <> hoverCol Then
      Var oldHoverRow As Integer = hoverRow
      Var oldHoverCol As Integer = hoverCol
      
      hoverRow = newHoverRow
      hoverCol = newHoverCol
      
      // Refresh the old hover cell (if it was valid)
      If oldHoverRow >= 0 And oldHoverRow < 3 And oldHoverCol >= 0 And oldHoverCol < 3 Then
        Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
      End If
      
      // Refresh the new hover cell
      Refresh(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

• Draws X and O symbols with animation
• Centers symbol in cell
• Scales symbol based on animation progress

3. DrawHoverEffect

Public Sub DrawHoverEffect(g As Graphics)
  // This method draws a semi-transparent hover effect over the cell that the mouse is currently hovering over.
  // It only draws the effect if the game is not over and the hovered cell is empty.
  
  If Not isGameOver And hoverRow >= 0 And hoverRow < 3 And hoverCol >= 0 And hoverCol < 3 Then
    If boardState(hoverRow, hoverCol) = 0 Then
      g.DrawingColor = Color.RGB(255, 255, 255, 250) // Semi-transparent white
      g.FillRectangle(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

• Provides visual feedback on hoverable cells
• Applies semi-transparent white overlay
• Only affects empty, unplayed cells

4. DrawWinningLine

Public Sub DrawWinningLine(g As Graphics)
  // This method draws a semi-transparent green line over the winning combination on the board if a player has won.
  
  // Draw the winning line if there is a winner
  If winningLine.Count = 6 Then
    g.DrawingColor = Color.RGB(0, 255, 0, 128) // Semi-transparent green
    g.PenSize = 2
    
    Var startX As Integer = winningLine(1) * cellWidth + cellWidth / 2
    Var startY As Integer = winningLine(0) * cellHeight + cellHeight / 2
    Var endX As Integer = winningLine(5) * cellWidth + cellWidth / 2
    Var endY As Integer = winningLine(4) * cellHeight + cellHeight / 2
    
    g.DrawLine(startX, startY, endX, endY)
  End If
End Sub

• Draws a semi-transparent green line
• Highlights the winning combination

Game Logic Methods

1. CheckWinner

Public Function CheckWinner() As Integer
  // This method checks the board for a winner by evaluating rows, columns, and diagonals.
  // It returns the winning player (1 or 2) or 0 if there is no winner.
  
  
  // Check rows
  For i As Integer = 0 To kBoardSize - 1
    If boardState(i, 0) <> 0 And boardState(i, 0) = boardState(i, 1) And boardState(i, 1) = boardState(i, 2) Then
      winningLine = Array(i, 0, i, 1, i, 2)
      Return boardState(i, 0)
    End If
  Next
  
  // Check columns
  For j As Integer = 0 To 2
    If boardState(0, j) <> 0 And boardState(0, j) = boardState(1, j) And boardState(1, j) = boardState(2, j) Then
      winningLine = Array(0, j, 1, j, 2, j)
      Return boardState(0, j)
    End If
  Next
  
  // Check diagonals
  If boardState(0, 0) <> 0 And boardState(0, 0) = boardState(1, 1) And boardState(1, 1) = boardState(2, 2) Then
    winningLine = Array(0, 0, 1, 1, 2, 2)
    Return boardState(0, 0)
  End If
  
  If boardState(0, 2) <> 0 And boardState(0, 2) = boardState(1, 1) And boardState(1, 1) = boardState(2, 0) Then
    winningLine = Array(0, 2, 1, 1, 2, 0)
    Return boardState(0, 2)
  End If
  
  winningLine.ResizeTo(-1)
  Return 0 // No winner yet
End Function

• Scans board for winning combinations
• Returns winning player or 0
• Stores winning line coordinates

2. IsBoardFull

Public Function IsBoardFull() As Boolean
  // This method checks if the board is completely filled with no empty cells.
  // It returns true if the board is full, otherwise false.
  
  // Check if the board is full (no empty cells)
  For i As Integer = 0 To kBoardSize - 1
    For j As Integer = 0 To kBoardSize - 1
      If boardState(i, j) = 0 Then
        Return False
      End If
    Next
  Next
  Return True
End Function

• Checks if all cells are occupied
• Determines if game is a draw

3. NewGame

Public Sub NewGame()
  // This method resets the game state to start a new game.
  // It clears the board, resets the current player to Player 1, and updates the game status.
  
  // Reset the game state for a new game
  For i As Integer = 0 To 8
    boardState(i \ 3, i Mod 3) = 0
  Next
  currentPlayer = 1
  isGameOver = False
  animationProgress = 1
  If animationTimer <> Nil Then
    animationTimer.Enabled = False
  End If
  GameStatus("Player " + PlayerSymbol(currentPlayer) + "'s turn", scoreX, scoreO)
  winningLine.ResizeTo(-1)
  Refresh()
End Sub

• Resets game to initial state
• Clears board
• Resets player turn

4. UpdateScore

Public Sub UpdateScore(winner As Integer)
  // This method updates the score for the winning player by incrementing the respective score counter.
  
  // Update the score for the winning player
  If winner = 1 Then
    scoreX = scoreX + 1
  ElseIf winner = 2 Then
    scoreO = scoreO + 1
  End If
End Sub

• Increments score for winning player

Utility Methods

1. PlayerSymbol

Public Function PlayerSymbol(player As Integer) As String
  // This method returns the symbol ('X' or 'O') corresponding to the player number (1 or 2).
  Return If(player = 1, "X", "O")
End Function

• Converts player number to symbol

2. StartAnimation

Public Sub StartAnimation(row As Integer, col As Integer)
  // This method initializes and starts the animation for a newly placed symbol,
  // by setting the target cell and resetting the animation progress.
  
  // Start the animation for a newly placed symbol
  lastPlayedRow = row
  lastPlayedCol = col
  animationProgress = 0
  
  If animationTimer = Nil Then
    animationTimer = New Timer
    animationTimer.Period = 16 // equivalent of 60 FPS
    AddHandler animationTimer.Action, AddressOf AnimationStep
  End If
  
  animationTimer.Enabled = True
  animationTimer.RunMode = Timer.RunModes.Multiple
End Sub

• Initializes symbol animation
• Sets up timer for smooth rendering

Usage Instructions

To use the TicTacToeGame control in your Xojo project:

1. Drag and Drop: Drag the TicTacToeGame icon (it should look like a small canvas) from the Navigator (the left side of the IDE) onto your Window1 or any other window you want to use.
   • A TicTacToeGame instance will appear on the window. You can resize and position it as needed.
2. Initialize: While not strictly required, you might want to initialize the game in the Window1.Open event handler. This ensures the game is ready to play as soon as the window opens. You can do this by adding the following code to the Window1.Open event:
   // Assuming 'TicTacToeGame1' is the name of your control instance on the window
TicTacToeGame1.NewGame
   This will call the NewGame method of your custom control, setting up the board and starting a new game.
3. Run the Project: Run your Xojo project. You should see the TicTacToe board on your window, ready to play!

I highly suggest downloading the complete TicTacToe Xojo project for the game. If you find anything unclear, refer to this tutorial for explanations. Download the Xojo project.

Next Steps:

Congratulations! You’ve successfully built a fully functional, modern tic-tac-toe game in Xojo. This project is a great foundation for exploring more advanced game development concepts, animations and how to make custom UI elements based on Xojo’s powerful DesktopCanvas control.

Now that you understand the basics, here are some ideas to take your TicTacToe game to the next level:

• Artificial Intelligence (AI): Implement a simple AI opponent so players can play against the computer. You could start with a random move generator and then explore more sophisticated algorithms like Minimax. Xojo already provides fully working AI integration examples.
• Different Game Modes: Add options for different board sizes (e.g., 4×4, 5×5) or variations of tic-tac-toe.
• Online Multiplayer: Enable players to challenge each other online using Xojo’s networking capabilities.
• Enhanced UI/UX: Improve the user interface with custom graphics, sound effects, and a more polished look and feel. Consider adding a timer.
• Go Multiplatform: Port the TicTacToeGame class to Mobile and Web projects.

We encourage you to experiment, get creative, and explore these possibilities. Share your creations and connect with other Xojo developers in the forums to learn and grow together. Happy coding!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

In this blog post, we’re going to unlock the power of Xojo’s DesktopCanvas and its Graphics capabilities to recreate one of the popular SpinKit loading animations originally created by Tobias Ahlin. We’ll be implementing the “Three Bounce” animation, transforming this beloved CSS animation into native Xojo code!

Not only will you learn how to create this specific animation, but you’ll also gain valuable insights into animation principles in Xojo that you can use to create your own custom animations. By the end of this tutorial, you’ll understand how to:

• Harness the power of DesktopCanvas for custom graphics
• Create smooth animations using Timers
• Implement phase-based animations
• Use Graphics methods to draw dynamic shapes
• Manage animation lifecycles properly

Why This Matters

Loading animations are more than just eye candy – they’re essential UI elements that keep users engaged while your app processes data. Instead of using static images or third-party libraries, creating your own animations gives you complete control over the look and feel of your application while keeping your dependencies minimal.

What We’re Building

We’ll create a smooth, professional-looking three-dot loading animation where dots gracefully scale up and down in sequence. The result is a lightweight, customizable loading indicator that you can drop into any Xojo project. Here’s what makes this implementation special:

• Pure Xojo code – no external dependencies
• Smooth, fluid animation
• Easily customizable colors and timing
• Efficient resource usage
• Clean, object-oriented design

Ok, let’s start building our awesome animation class.

Step 1: Setting Up the Base Class

First, create a new class (Insert > Class) that inherits from DesktopCanvas:

Protected Class SpinKitClass Inherits DesktopCanvas

Step 2: Defining Core Properties

Add these essential properties to control the animation:

Private animationPhases() As Double      // Stores phase offsets for each dot
Private animationSpeed As Integer = 60   // Animation refresh rate in milliseconds
Private animationTimer As Timer         // Timer to drive the animation
Private currentPhase As Double = 0.0    // Current animation phase
Private dotSize As Integer = 20         // Size of each dot
Private dotSpacing As Integer = 20      // Space between dots

Step 3: Setting Up Constants

Define the constants that control the animation behavior:

Private Const kDefaultColor As Color = &c333333    // Dot color
Private Const kPhaseIncrement As Double = 0.05    // Animation speed

Step 4: Implementing Animation Control Methods

Add methods to start and stop the animation:

Public Sub StartAnimation()
  /// Initializes and starts the animation
  /// Sets up initial phase offsets for the dots
  /// Creates and configures the animation timer
  
  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()
  /// Stops the running animation
  /// Removes the timer handler and cleans up
  /// Refreshes the canvas to clear the animation
  
  If animationTimer <> Nil Then
    RemoveHandler animationTimer.Action, AddressOf UpdateAnimation
    animationTimer = Nil
    Refresh
  End If
End Sub

Step 5: Creating the Animation Update Logic

Implement the timer callback that drives the animation:

Private Sub updateAnimation(sender As Timer)
  /// Timer callback that updates the animation state
  /// Increments the phase and triggers a redraw
  /// @param sender The Timer that triggered this callback
  
  #Pragma Unused sender
  
  // Increment the current phase (spin08)
  currentPhase = currentPhase + kPhaseIncrement
  // Reset currentPhase if it exceeds 1.0
  If currentPhase > 1.0 Then currentPhase = 0
  
  // Invalidate the canvas to trigger a repaint
  Refresh()
End Sub

Step 6: Implementing the Drawing Logic

Add the core animation rendering code:

Private Sub animation08(g As Graphics)
  /// Renders a single frame of the three-dot loading animation
  /// Draws 3 dots that scale up and down in sequence
  /// @param g The graphics context to draw into
  
  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)
    
    // Ensure phase is within 0 to 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

Step 7: Handling the Paint Event

Implement the Paint event to trigger the animation rendering:

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  /// Paint event handler that renders the animation
  /// Called automatically when the canvas needs to be redrawn
  /// If animation is running, calls animation08, otherwise clears the canvas
  
  If animationTimer <> Nil Then
    animation08(g)
  Else
    g.ClearRectangle(0, 0, Width, Height)
  End If
End Sub

How It Works

1. The animation uses a phase-based system where each dot is offset in its animation cycle.
2. The dots scale up and down based on their current phase.
3. A timer drives the animation by incrementing the phase and triggering redraws.
4. The dots are positioned horizontally with equal spacing around the center.
5. Each dot’s size is calculated based on its current phase in the animation.

Using the Animation

To use this animation in your project, all you have to do is simply drag and drop the class on a DesktopWindow and then start or stop the animation when needed.

// Start the animation
SpinKit1.StartAnimation()

// Stop the animation when done
SpinKit1.StopAnimation()

Customization

You can customize the animation by adjusting:

• dotSize for larger or smaller dots
• dotSpacing to change the spread of the dots
• animationSpeed to make it faster or slower
• kDefaultColor to change the dot color
• kPhaseIncrement to adjust the animation speed

Taking It Further

The “Three Bounce” animation we’ve created is just one of many amazing animations in the SpinKit collection. Now that you understand the fundamentals, why not try recreating other SpinKit animations? Here are some exciting challenges to tackle:

• Modify the current animation to use different shapes (squares, rectangles).
• Experiment with different timing functions for varied animation effects.
• Try implementing the “Rotating Plane” or “Chasing Dots” animations from SpinKit.
• Create your own unique variations by combining what you’ve learned.
• Optimize the class further.

Share Your Creations!

Have you created an awesome variation or implemented another SpinKit animation in Xojo? Share it with the community! The Xojo Forums and social media are great places to showcase your work and inspire others.

Resources for Further Exploration

• Original SpinKit animations by Tobias Ahlin: https://tobiasahlin.com/spinkit/
• Xojo Graphics documentation: https://documentation.xojo.com/api/graphics/graphics.html
• Xojo DesktopCanvas documentation: https://documentation.xojo.com/api/user_interface/desktop/desktopcanvas.html

Remember: Every great application deserves great animations and now you have the tools to create them! Keep experimenting, keep creating, and most importantly, keep animating!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube