Skip to main content
Version: ver. 1.0.0

Animation

Enhancing your GUI with animations significantly improves the user experience, making it more engaging and intuitive.

Panel overview​

The Animations panel is located at the bottom of the interface. This panel allows you to:

  • Create new animations
  • Manage existing animations
  • Configure animation properties
  • Set up animation timelines
  • Preview animations in real-time

Panel structure​

The Animations panel consists of three key areas:

  1. List (left side)
  2. Controls (center)
  3. Timeline (right side)

![thermostat](./images/anim_structure.pngÖ

1. List​

This section shows all animations in your project:

  • List of created animations
  • "+" to create new and "-" button to delete animations
  • To rename a new animation, simply double-click on its name
  • Search field for filtering animations

thermostat

2. Controls​

Basic playback controls for animations:

  • Play button - Starts the animation preview
  • Backward button - Moves to the beginning of the animation preview
  • Time indicator - Shows current position and total duration

Basic coordinates for widget elements being animated:

  • Widget element - The selected object being animated
  • X position - Horizontal coordinate of the widget
  • Y position - Vertical coordinate of the widget
  • Diamond markers - Green diamond icons to the right of each value indicating these properties have keyframes
    • To add a keyframe to the X or Y axis:
      1. Enter your desired value in the field
      2. Click on the unfilled diamond icon
  • Collapse/Expand arrow - Triangle icon that lets you collapse or expand the property group
  • Minus button next to widget name - Deletes the widget's animation within the current animation
  • Minus button next to X/Y coordinates - Removes the specific horizontal or vertical transformation from the animation

thermostat

ⓘ INFO You can add any number of widgets to an animation, allowing multiple elements to be animated simultaneously. While in animation mode, only the Hierarchy and Inspector panels remain accessible, with other panels and functions like widget creation, undo/redo, and play mode in the Toolbar being locked.

3. Timeline​

The timeline area visualizes:

  • Frame markers
  • Green position indicator showing the current frame/time
  • Area where keyframes are displayed
  • Scrollbar with zoom function

thermostat

Creating a New animation​

To create a new animation:

  1. Click on the Editor / Animation mode (diamond icon) in the Toolbar
  2. Click the "+" button in the Animation list section
  3. A "New animation" entry will appear in the list
  4. Select this entry to begin configuring your animation

Animation configuration​

When you select a new or existing animation, then clicking on the time indicator you can configure:

Basic properties​

  • Duration: Set how long the animation will last (in frames or seconds)
  • Current: The current frame position for editing
  • FPS: Frames Per Second - controls animation smoothness
  • Apply: Click to apply any changes to these properties

thermostat

Timeline navigation​

The timeline allows you to:

  • Zoom in/out of the timeline using the green handles at the edges
  • Scrub through the animation by dragging the green position indicator
  • Set and adjust keyframes for specific animation properties

The timeline displays frame markers for navigation:

  • Full seconds (0s, 1s, 2s)
  • Frame numbers (7f, 14f, 21f, etc.)