Transition animation

Transition animation can be applied to properties of the type: SizeUnit, Color, AngleUnit, float64 and composite properties that contain elements of the listed types (for example, "shadow", "border", etc.).

If you try to animate other types of properties (for example, bool, string), no error will occur,there will simply be no animation.

There are two types of transition animations:

  • single-fold;
  • constant;

A one-time animation is triggered using the SetAnimated function of the View interface.This function has the following description:

SetAnimated(tag string, value any, animation Animation) bool

It assigns a new value to the property, and the change occurs using the specified animation.For example,

view.SetAnimated(rui.Width, rui.Px(400), rui.NewAnimation(rui.Params{
	rui.Duration:       0.75,
	rui.TimingFunction: rui.EaseOutTiming,
}))

There is also a global function for animated one-time change of the property value of the child View

func SetAnimated(rootView View, viewID, tag string, value any, animation Animation) bool

A persistent animation runs every time the property value changes.To set the constant animation of the transition, use the "transition" property (the Transition constant).As a value, this property is assigned rui.Params, where the property name should be the key,and the value should be the Animation interface.For example,

view.Set(rui.Transition, rui.Params{
	rui.Height: rui.NewAnimation(rui.Params{
		rui.Duration:       0.75,
		rui.TimingFunction: rui.EaseOutTiming,
	},
	rui.BackgroundColor: rui.NewAnimation(rui.Params{
		rui.Duration:       1.5,
		rui.Delay:          0.5,
		rui.TimingFunction: rui.Linear,
	},
})

Calling the SetAnimated function does not change the value of the "transition" property.

To get the current list of permanent transition animations, use the function

func GetTransition(view View, subviewID ...string) Params

It is recommended to add new transition animations using the function

func AddTransition(view View, subviewID, tag string, animation Animation) bool

Calling this function is equivalent to the following code

transitions := rui.GetTransition(view, subviewID)
transitions[tag] = animation
rui.Set(view, subviewID, rui.Transition, transitions)

Transition animation events

The transition animation generates the following events

Event Constant Description
"transition-run-event" TransitionRunEvent The transition animation loop has started, i.e. before the delay
"transition-start-event" TransitionStartEvent The transition animation has actually started, i.e. after delay
"transition-end-event" TransitionEndEvent Transition animation finished
"transition-cancel-event" TransitionCancelEvent Transition animation interrupted

The main event listener has the following format:

func(View, string)

where the second argument is the name of the property.

You can also use a listener in the following format:

func()
func(string)
func(View)

Get lists of listeners for transition animation events using functions:

func GetTransitionRunListeners(view View, subviewID ...string) []func(View, string)
func GetTransitionStartListeners(view View, subviewID ...string) []func(View, string)
func GetTransitionEndListeners(view View, subviewID ...string) []func(View, string)
func GetTransitionCancelListeners(view View, subviewID ...string) []func(View, string)