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

Question

如何使用 animate 连续循环动画？在这个例子中，我只想不停地旋转一个白色方 block 。

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

使用新动画的其他解决方案

您可以使用状态或动画函数来执行此操作，从而使代码更清晰:

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