Animation script

An animation script describes a more complex animation than a transition animation. To do this, additional properties are added to Animation:

"property" property

The "property" property (constant PropertyTag) describes property changes.[]AnimatedProperty or AnimatedProperty is assigned as a value. The AnimatedProperty structure describesthe change script of one property. She is described as

type AnimatedProperty struct {
	Tag       string
	From, To  any
	KeyFrames map[int]any
}

where Tag is the name of the property, From is the initial value of the property,To is the final value of the property, KeyFrames is intermediate property values (keyframes).

The required fields are Tag, From, To. The KeyFrames field is optional, it can be nil.

The KeyFrames field describes key frames. As a key of type int, the percentage of time elapsedsince the beginning of the animation is used (exactly the beginning of the animation itself,the time specified by the "delay" property is excluded).And the value is the value of the property at a given moment in time. For example

prop := rui.AnimatedProperty {
	Tag:       rui.Width,
	From:      rui.Px(100),
	To:        rui.Px(200),
	KeyFrames: map[int]interface{
		90: rui.Px(220),
	}
}

In this example, the "width" property will grow from 100px to 220px 90% of the time.In the remaining 10% of the time, it will decrease from 220px to 200px.

The "property" property is assigned to []AnimatedProperty, which means that you can animate several properties at once.

You must set at least one "property" element, otherwise the animation will be ignored.

"id" property

The "id" string property (constant ID) specifies the animation identifier.Passed as a parameter to the animation event listener. If you do not plan to use event listeners for animation,then you do not need to set this property.

"iteration-count" property

The "iteration-count" int property (constant IterationCount) specifies the number of animation repetitions.The default is 1. A value less than zero causes the animation to repeat indefinitely.

"animation-direction" property

The "animation-direction" int property (an AnimationDirection constant) specifies whetherthe animation should play forward, backward, or alternately forward and backward between forward andbackward playback of the sequence. It can take the following values:

Value Constant Description
0 NormalAnimation The animation plays forward every iteration, that is, when the animation ends, it is immediately reset to its starting position and played again.
1 ReverseAnimation The animation plays backwards, from the last position to the first, and then resets to the final position and plays again.
2 AlternateAnimation The animation changes direction in each cycle, that is, in the first cycle, it starts from the start position, reaches the end position, and in the second cycle, it continues from the end position and reaches the start position, and so on.
3 AlternateReverseAnimation The animation starts playing from the end position and reaches the start position, and in the next cycle, continuing from the start position, it goes to the end position.

Animation start

To start the animation script, you must assign the interface created by Animation to the "animation" property(the AnimationTag constant). If the View is already displayed on the screen, then the animation starts immediately(taking into account the specified delay), otherwise the animation starts as soon as the View is displayedon the screen.

The "animation" property can be assigned Animation and [] Animation, ie. you can run several animationsat the same time for one View

Example,

prop := rui.AnimatedProperty {
	Tag:       rui.Width,
	From:      rui.Px(100),
	To:        rui.Px(200),
	KeyFrames: map[int]interface{
		90: rui.Px(220),
	}
}
animation := rui.NewAnimation(rui.Params{
	rui.PropertyTag:    []rui.AnimatedProperty{prop},
	rui.Duration:       2,
	rui.TimingFunction: LinearTiming,
})
rui.Set(view, "subview", rui.AnimationTag, animation)

"animation-paused" property

The "animation-paused" bool property of View (AnimationPaused constant) allows the animation to be paused.In order to pause the animation, set this property to "true", and to resume to "false".

Attention. When you assign a value to the "animation" property, the "animation-paused" property is set to false.

Animation events

The animation script generates the following events

Event Constant Description
"animation-start-event" AnimationStartEvent Animation started
"animation-end-event" AnimationEndEvent Animation finished
"animation-cancel-event" AnimationCancelEvent Animation interrupted
"animation-iteration-event" AnimationIterationEvent A new iteration of animation has begun

Attention! Not all browsers support the "animation-cancel-event" event. This is currently only Safari and Firefox.

The main event data listener has the following format:

func(View, string)

where the second argument is the id of the animation.

You can also use a listener in the following format:

func()
func(string)
func(View)

Get lists of animation event listeners using functions:

func GetAnimationStartListeners(view View, subviewID ...string) []func(View, string)
func GetAnimationEndListeners(view View, subviewID ...string) []func(View, string)
func GetAnimationCancelListeners(view View, subviewID ...string) []func(View, string)
func GetAnimationIterationListeners(view View, subviewID ...string) []func(View, string)
❮ Transition animation
Contents
Session ❯