framerjs - 如何使用 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()

在这里，它正在发挥作用。