Animation events

Animation events are the events emitted by animations, and this means any animation: those started by an animation object, the animate() function, or by state changes.

FYI: onAnimationStop will always be called before onAnimationEnd.

Chaining animations

You can listen to the AnimationEnd event of one animation to start a second one.

This way you can chain as many of them as you want, and create a whole sequence of animations (comparable to setting key frames on a timeline).

Here we listen to the ending of a move animation to trigger moveBack, its reverse (see Reversing an animation):

# start ‘moveBack’ when ‘move’ ends
move.onAnimationEnd ->
    moveBack.start()

By also listening to moveBack we can have both animations run continuously…

# …and start ‘move’ when ‘moveBack’ ends
moveBack.onAnimationEnd ->
    move.start()

…after we trigger the first one:

# start ‘move’
move.start()

In the above example, we listen to the animation objects because both animations happen with the same layer, but when working with different layers, we can listen to the events emitted by the layers.

An example. We now have a green layer on the left and a blue one on the right (the green one is created last so that it’s on top).

blueSquare = new Layer
    borderRadius: 20
    backgroundColor: "rgb(40,175,250)"
    x: Align.center 200
    y: Align.center
greenSquare = new Layer
    borderRadius: 20
    backgroundColor: "rgb(125,221,17)"
    x: Align.center -200
    y: Align.center

We move the green layer to the right, while also rotating it…

# move ‘greenSquare’ to the right
greenSquare.animate
    x: greenSquare.x + 400
    rotation: 180
    options:
        time: 2

…and start an animation on blueSquare when greenSquare’s animation ends.

# animate ‘blueSquare’ after ‘greenSquare‘
greenSquare.onAnimationEnd ->
    blueSquare.animate
        x: blueSquare.x - 400
        rotation: 90
        borderRadius: 100
        options:
            time: 2

Note that we used simple animate() functions instead of animation objects.

Animation events are emitted regardless of how the layer is animated, be it with animate(), an animation object, or a state change like in this example:

# adding a ‘rightside’ state to ‘greenSquare’
greenSquare.states.rightside =
    x: greenSquare.x + 400
    rotation: 180
# animating to the new state
greenSquare.animate "rightside"

# animate ‘blueSquare’ after ‘greenSquare‘
greenSquare.onAnimationEnd ->
    blueSquare.animate
        x: blueSquare.x - 400
        rotation: 90
        borderRadius: 100
        options:
            time: 2

Overview of the animation events