animation - 如何在 Framer.js 中使用 CoffeeScript 制作动画无限循环？

Question

我正在尝试在 Framer.js 中制作一个屏幕元素的简单脉冲动画，现在它看起来像这样：

element.animate
    properties: scale:1.3
element.on Events.AnimationEnd,->
    this.scale = 1
    locationUn.animate
        properties: scale:1.3

基本上，当屏幕加载时，元素会被放大，动画结束时，它会被强制回到比例 1 并再次运行动画；但是这个解决方案并不优雅，动画看起来很突然。

我是 CoffeeScript 的新手……有没有写一个无限循环来检查这样的情况？

checker = true

while(checker == true){
    run animation
    if(some events occurs){
        checker = false
    }
}
....

如何在 CoffeeScript 中实现这一点？

Answer 1

您可以像这样创建一个循环脉冲：

circle = new Layer()
circle.style.borderRadius = "100%"
circle.backgroundColor = "white"
circle.center()

outwards = new Animation({
    layer: circle,
    properties: {scale: 1.3},
    curve: "ease-in-out"
})

inwards = outwards.reverse()

outwards.on(Events.AnimationEnd, inwards.start)
inwards.on(Events.AnimationEnd, outwards.start)

outwards.start()