Animation

Enhancing a 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 users 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)

1. Animation hierarchy

This section shows all animations in the project:

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

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 allows users to 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

---

ⓘ INFO Users 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

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 the animation

Animation configuration

After selecting a new or existing animation, clicking on the time indicator allows the following to be configured:

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

Timeline navigation

The timeline allows users 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.)