/ HALion Developer Resource / HALion Tutorials & Guidelines / How-tos /

Animating Switches Using SVGs

(Since HALion 7.0)

On this page:

• Adding an Animation Object
• Defining the Animation
• Animating Switches
  • Example VST Preset
  • Animated Dashed Line
  • Animated Colors
  • Animated Size
  • Animated Brackets

By using SVGs as resources for the different states of a Switch control, you can facilitate state-specific animations to enhance the visibility of each state. The state-specific animations are defined by using Lua expressions in the resource properties of the SVG that is assigned to each state. The SVG resources to be animated require an animation object that defines the duration and number of cycles for the animation. This integration enables the manipulation of SVG objects without necessitating the utilization of UI scripts.

❕ See Animating SVGs with Additional Parameters for details on using UI scripts for animations.

Adding an Animation Object

Before you can define the animation in the SVG resource properties, you must add an additional animation object to the SVG resource you want to animate.

1. Go to the Resource Tree and select the SVG resource you want to animate.
2. In the the Objects line, click +.

3. Set the ID of the object to animation.
4. Add a duration property and set its value to '1'.
5. Add a cycles property and set its value to '200'.

In this example, one cycle of the animation takes 1 second and the animation is played for 200 cycles. The settings should be sufficient to keep the animation running, even if you hover the mouse over the switch for a longer time, for example. Depending on the application of your animation, you can increase or decrease these values.

Defining the Animation

The animations are defined in the SVG resource properties by using Lua expressions. An expression begins with $ followed by (). Everything inside the brackets will be evaluated and returns the effective value for the property.

$(expression)

Assuming the presence of an animation object, you can use the following variables in Lua expressions:

Animating Switches

The subsequent examples are presented as illustrative guides to kickstart your own solution-building process.

Example VST Preset

• Animating Switches Using SVGs.vstpreset

To explore the templates in this example:

1. Load Animating Switches Using SVGs.vstpreset.
2. Open the Macro Page Designer, go to the GUI Tree and select the template you wish to explore.
3. Click Edit Element to examine the template.
4. Inside the template, select the Switch control. Look which Bitmap resources have been assigned to the different states of the switch.
5. Go to the Resources Tree and select the corresponding SVG resource. Look for the IDs, properties and values as listed below.

Animated Dashed Line

Dashes Switch

In this example, the same animation is used for the on and off states of the switch.

Resources: AniRect SW1_Off_Hover, AniRect SW1_On_Hover.

Description: A dashed line moves counterclockwise around the switch when you hold the mouse over the switch. By using $(1-t*20) the dashed line moves clockwise around the switch.

Animated Colors

In this example, different animations are used for the on and off states of the switch.

Colors Switch

Resource: AniRect SW2_Off_Hover.

Description: The color periodically fades between grey and white when you hold the mouse over the switch while the switch is in the off state.

Resource: AniRect SW2_On_Hover.

Description: The color periodically fades between white and blue when you hold the mouse over the switch while the switch is in the on state.

Animated Size

In this example, different animations are used for the on and off states of the switch.

Size Switch

Resource: AniRect SW5_Off_Hover.

Description: The radius of the circle and the deviation of the blur change periodically when you hold the mouse over the switch while the switch is in the off state. The color is grey and the inner circle is smaller than the blur. The 'r' property describes the radius of the 'Circle' element. A negative value for 'r' must be avoided with math.abs. The 'stdDeviation' attribute defines the standard deviation for the blur.

Resource: AniRect SW5_On_Hover.

Description: The radius of the circle and the deviation of the blur change periodically when you hold the mouse over the switch while the switch is in the on state. The color is green and the inner circle is larger than in the off state. The 'r' property describes the radius of the 'Circle' element. A negative value for 'r' must be avoided with math.abs. The 'stdDeviation' attribute defines the standard deviation for the blur.

Animated Brackets

In this example, multiple properties get animated for each state and different animations are used for the on and off states of the switch.

Brackets Switch

Resource: AniRect SW6_Off_Hover.

Description: The switch blinks periodically in white and round brackets are moving from the outside to the inside when you hold the mouse over the switch while the switch is in the off state. The 'r' property describes the radius of the 'Circle' element. A negative value for 'r' must be avoided with math.abs.

Resource: AniRect SW6_On_Hover.

Description: The switch blinks periodically in green and round brackets are moving from the outside to the inside when you hold the mouse over the switch while the switch is in the off state. The 'r' property describes the radius of the 'Circle' element. A negative value for 'r' must be avoided with math.abs.