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.

frischmilch · Accepted Answer · 2014-08-31T22:30:51.910

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()

I couldn't get the `new Animation` solution to work. – nipponese Aug 31 '14 at 22:29 — nipponese, Aug 31 '14 at 22:29

score 0 · Answer 2 · edited May 23 '17 at 12:22

As frischmilch suggested, you can also use the new Animation method, but his code was a little off:

# Create animation
animation = new Animation({
    layer: myBall
    properties:
        rotationZ: 360
    time: 1
})
# Start animation
animation.start()
# Loop animation
animation.on Events.AnimationEnd, ->
    # Reset rotation before looping
    myBall.rotationZ = 0
    animation.start()

score 0 · Answer 3 · answered Jun 02 '17 at 04:02

Use `reverse()` to create the reverse animation and trigger it.

animation = new Animation 
    layer: bookmark
    properties:
        scale: 1.08
    time: 1
    curve: Bezier.easeInOut

animation.start()

animation.onAnimationEnd ->
    reversedAnimation = animation.reverse()
    reversedAnimation.start()
    reversedAnimation.onAnimationEnd ->
        animation.start()

And here it is in action.

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

3 Answers3

Other solution using `new Animation`

Use `reverse()` to create the reverse animation and trigger it.

Linked

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

3 Answers3

Other solution using new Animation

Use reverse() to create the reverse animation and trigger it.

Linked

Other solution using `new Animation`

Use `reverse()` to create the reverse animation and trigger it.