Sich wiederholende, unendliche Schleife animation mit framer.js

Ich versuche zu schaffen, eine pulsierende, Loop-animation-Effekt mit framer.js
Ich habe ein Bild geladen, in einer Ebene, und ich möchte, um es zu skalieren nach oben und unten ständig. Ich kann nicht herausfinden, wie verkleinere Sie und Durchlaufen Sie die animation auf unbestimmte Zeit. Dies ist, was ich derzeit habe:

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()
  • Wie das? stackoverflow.com/questions/25589805/...
  • Dies scheint zu funktionieren, wenn ich versuche, Sie zu animieren, eine Ebene, die nicht enthalten ein Bild, aber leider nicht mit einem Bild-layer...
InformationsquelleAutor Goren Berdichevsky | 2015-02-14
  1. 3

    löste es so:

    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()
  });
    InformationsquelleAutor Goren Berdichevsky
  2. 0

    Genial.. vielen Dank für diese. Ich fixierte Ihren code so, es ist alles in 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()
    InformationsquelleAutor Brian Ross
  3. 0

    Hier ist, wie ich es Tat. Es verwendet eine einzelne animation-variable anstelle von 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()
    InformationsquelleAutor alexismorin
  4. 0

    Können Sie Animation.reverse() für diese:

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

    Allerdings, wenn Sie haben eine animation, die enden an der gleichen Stelle, wie es beginnt, können Sie mithilfe der kürzlich eingeführten looping: true parameter der Animation:

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

    Komplette Prototyp hier: http://share.framerjs.com/hvex1plbkiqt/

    InformationsquelleAutor Niels
  5. 0

    Einfache Skalierung Beispiel.

    Zwei wichtige Punkte:

    1) Verwenden Sie reverse() zum erstellen der reverse-animation.

    2) Nach jeder animation endet, auslösen die andere animation zu starten.

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

    Und hier ist es in Aktion.

    InformationsquelleAutor Joshua Pinter
  6. 0

    Könnten Sie Staaten zu.
    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()
    InformationsquelleAutor Marcio Toledo
Schreibe einen Kommentar