如何使用animate方法进行连续循环？

Question

如何使用animate连续循环播放动画？在这个例子中，我想做的就是无休止地旋转一个白色方块。

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"

在第一次360˚z旋转后，背景颜色将更改为＃666，但动画将停止。我认为如果repeat: -1表示连续而不必听AnimationEnd，那将是理想的。

Answer 1

在第一个动画将图层旋转到360°后，您会尝试将其再次旋转到360°，然后以可视的不存在的动画返回。 解决方法是在再次开始旋转之前设置myBall.rotationZ = 0。在你的代码中：

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

使用new Animation

的其他解决方案

您可以使用状态或动画功能执行此操作，从而产生更清晰的代码：

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

Answer 2

正如frischmilch建议的那样，您也可以使用new Animation方法，但他的代码有点偏离：

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

Answer 3

使用reverse()创建反向动画并触发它。

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

here it is正在行动中。