简单缩放示例。

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

我是这样做的。它使用单个动画变量而不是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()

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

here it is正在行动中。

Answer 6

您也可以使用州。 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()

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

6 个答案:

简单缩放示例。