Как сделать непрерывный цикл с помощью метода 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˚ цвет фона изменится на #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

Как предложил Фришмилх, вы также можете использовать 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()

И вот оно в действии.