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

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

1 个答案: