Time, Delay, Repeat and Looping

Since these settings are not properties of the layer but refer to the animation itself, you always put them in their special options object (which is added automatically when you use Auto-Code).

Time

The time argument sets the duration of the animation in seconds. The default value is quite long—one second—so you’ll often shorten it after having tested your animation.

But here, as an example, we increase it:

# animate the layer for 2 seconds
tealCircle.animate
    borderRadius: 0
    scale: 1.5
    rotation: 180
    options:
        time: 2

Delay

The delay after which the animation should start, also defined in seconds.

# animate the layer for 2 seconds,
# after a delay of 1 second
tealCircle.animate
    borderRadius: 0
    scale: 1.5
    rotation: 180
    options:
        time: 2
        delay: 1

Repeat

How often an animation should play. The default value is 0 (zero repeats); the animation will play only once.

# animate the layer for 2 seconds,
# 4 times,
# with a delay of 1 second every time
tealCircle.animate
    borderRadius: 0
    scale: 1.5
    rotation: 180
    options:
        time: 2
        delay: 1
        repeat: 3

Note that repeat does not reverse an animation. The layer will jump back to its original size, wait one second, and then animate again.

Looping: Never stop repeating

Have an animation play forever by setting its looping to yes.

# keep rotating
purpleSquare.animate
    rotation: 360
    options:
        time: 6
        looping: yes
        curve: Bezier.linear

I gave the animation a linear curve so that it’s a steady rotation at a constant speed.