2

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

6 に答える 6

0

素晴らしい..これをありがとう。私はあなたのコードを修正したので、それはすべて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()
于 2015-05-26T23:51:23.907 に答える
0

これに使用できます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/

于 2016-07-28T14:18:35.583 に答える
0

これが私がやった方法です。2 ではなく 1 つのアニメーション変数を使用します。

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()
于 2016-07-25T20:17:12.983 に答える