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 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
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
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
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
# 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.