framerjs - 使用 framer.js 重复无限动画循环

Question

我正在尝试使用 framer.js 创建一个脉动、循环的动画效果我已经将一个图像加载到一个图层中，我想不断地放大和缩小它。我不知道如何缩小它并无限期地循环播放动画。这是我目前拥有的：

imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/icon.png"})
imageLayer.center()

animationA = new Animation({
    layer: imageLayer,
    properties: {scale: 2.0},
    curve: "ease-in-out"
})


animationA.start()

Answer 1

像这样解决它：

imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/icon.png"})
imageLayer.x = 100
imageLayer.y = 100

animationA = new Animation({
    layer: imageLayer,
    properties: {scale: 2.0},
    curve: "linear",
    time: 0.4

})

animationB = new Animation({
    layer: imageLayer,
    properties: {scale: 1.0},
    curve: "linear",
    time: 0.2

})

animationA.start()

animationA.on(Events.AnimationEnd, function() {
    animationB.start()
  });

animationB.on(Events.AnimationEnd, function() {
    animationA.start()
  });

Answer 2

太棒了..谢谢你。我修复了你的代码，所以它都在coffeescript中。

imageLayer = new Layer({x:0, y:0, width:128, height:128})
imageLayer.x = 100
imageLayer.y = 100

animationA = new Animation({
    layer: imageLayer,
    properties: {scale: 2},
    curve: "linear",
    time: 0.2
})

animationB = new Animation({
    layer: imageLayer,
    properties: {scale: 1.0},
    curve: "linear",
    time: 0.6
})

animationA.start()

animationA.on Events.AnimationEnd, ->
    animationB.start()

animationB.on Events.AnimationEnd, ->
    animationA.start()

Answer 3

你也可以使用States。 https://framer.com/getstarted/guides/prototype#states

LayerA.states.flashGreen =
    color: "#00F082"
    shadowColor: "#00F082"
    shadowBlur: 10
    shadowSpread: 3
    animationOptions:
        time: 1
        curve: Bezier.ease

layerA.stateCycle()
layerA.onAnimationStop -> layerA.stateCycle()

Answer 4

您可以Animation.reverse()为此使用：

layerA = new Layer
    point: Align.center

scaling = new Animation
    layer: layerA
    properties: 
        scale: 2
    curve: "ease-in-out"

pulse = ->
    scaling.start()
    scaling.onAnimationEnd ->
        #Reverse the scaling animation
        scaling = scaling.reverse()
        #Sart the animation again
        pulse()

# Start of the pulse animation  
pulse()

但是，如果您有一个动画在其开始的同一点结束，您可以使用最近引入looping: true的参数Animation：

layerA.animate
    properties: 
        rotation: 360
    curve: "linear"
    time: 5
    looping: true

完整原型在这里：http ://share.framerjs.com/hvex1plbkiqt/

Answer 5

简单的缩放示例。

两个关键点：

1)reverse()用于创建反向动画。

2）每个动画结束后，触发另一个动画开始。

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

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

Answer 6

这就是我的做法。它使用单个动画变量而不是 2。

animationTime = 1.8

animation = new Animation
    layer: sketch.spinner
    properties: 
        rotation: 360
    curve: "linear"
    time: animationTime

animation.start()

Utils.interval animationTime, ->
    #reset the animation
    sketch.spinner.rotation = 0
    animation.start()