How do I make a continuous loop with the animate method?

Question

How does one continuous loop an animation using animate? In this example, all I want to do is endlessly rotate a white square.

myBall = new Layer
    x: 100
    y: 100
    width: 200
    height: 200
    borderRadius: "20px"
    backgroundColor: "#FFF"

myBall.animate
    properties:
        rotationZ: 360
    time: 1
myBall.on Events.AnimationEnd, ->
    this.animate
        properties:
            rotationZ: 360
        time: 1
    this.backgroundColor = "#666"

After the first 360˚ z rotation, the background color will be changed to #666, but the animations will cease. I think it would be ideal if repeat: -1 indicated continuous without having to listen for AnimationEnd.

Answer 1

After the first animation rotates the layer to 360° you try to rotate it again to 360°, which returns in a visual non-existing animation. the solution for this is to set myBall.rotationZ = 0 right before you start rotating again. in your code:

myBall.on Events.AnimationEnd, ->
    this.rotationZ = 0 # reset to back to zero
    this.animate
        properties:
            rotationZ: 360
        time: 1

Other solution using new Animation

you can do this with states or an animation function, which results in cleaner code:

rotateAnim = new Animation
    layer: myBall
    properties:
        rotationZ: 360
    time: 1

rotateAnim.start() # kick if off once

rotateAnim.on "end", ->
    myBall.rotationZ = 0 # need to reset to zero so we can animate to 360 again
    rotateAnim.start()