0

コードを使用して、Framerjs でドラッグを終了すると、LayerA と LayerB がアニメーションを作成しないのはなぜですか。

を作成し、layerAをドラッグします。layerBlayerCLayerC

でとの props をのオフセットでEvent DragMove変更し、 のときはいつもアニメーションにしたいのですが、うまくいきません。LayerALayerBLayerCEndDrag

誰かが理由を知っていますか？

# Create layer
layerA = new Layer
    x: 50
    y: 200
    scale: 0.8
    width: 550
    height: 600
    opacity: 0.6
    borderRadius: 8
    backgroundColor: "#ffffff"

layerB = new Layer
    x: 50
    y: 250
    scale: 0.9
    opacity: 0.8
    width: 550
    height: 600
    borderRadius: 8
    backgroundColor: "#ffffff"

layerC = new Layer
    x: 50
    y: 300
    scale: 1
    width: 550
    height: 600
    borderRadius: 8
    backgroundColor: "#ffffff"

layerC.draggable.enabled = true
layerC.draggable.horizontal = false
layerC.draggable.constraints =
    x: 50
    y: 300
    width: 550
    height: 600
layerC.on Events.DragMove, ->
    print layerC.draggable.constraintsOffset
    layerA.opacity = 0.6 + 0.2 * layerC.draggable.constraintsOffset.y / 360
    layerA.scale = 0.8 + 0.1 * layerC.draggable.constraintsOffset.y / 360
    layerA.y = 200 + 50 * layerC.draggable.constraintsOffset.y / 360
    layerB.opacity = 0.8 + 0.2 * layerC.draggable.constraintsOffset.y / 360
    layerB.scale = 0.9 + 0.1 * layerC.draggable.constraintsOffset.y / 360
    layerB.y = 250 + 50 * layerC.draggable.constraintsOffset.y / 360

layerC.on Events.DragEnd, ->
    print layerC.draggable.constraintsOffset
    if layerC.draggable.constraintsOffset.y < 360
        layerC.animate
            properties: 
                opacity: 1
                scale: 1
                y: 300
            curve: "ease"
            time: 0.4
        layerA.animate 
        properties:
            opacity: 0.6
            scale: 0.8
            y: 200
        curve: "ease"
        time: 0.4
        layerB.animate 
        properties:
            opacity: 0.8
            scale: 0.9
            y: 250
        curve: "ease"
        time: 0.4

私はフレーマーに慣れていないので、助けてください

4

2 に答える 2

0

あなたの間違いはあなたの考えでは何もありませんでした.CoffeScriptコードを適切layerA'sにアニメーション化することを忘れただけです. layerB'sこれは私が考える実例です：

http://share.framerjs.com/2mp2alhvueq4/

ドイツからよろしく、デニス

PS: FramerJS / Framer Studio に関する質問をする最良の方法は、専用の Facebook グループです。

于 2015-10-20T06:56:37.150 に答える
0

あなたが達成したいことのより良い例を挙げていただけますか? あなたのコード（フォーマットを修正した後）はうまくいきました.DragEndイベントを正しく発生させ、オフセットが360未満の場合はアニメーションを呼び出します.

何を達成しようとしているのかを教えていただき、フレーマー プロジェクトを共有していただければ、より迅速かつ正確にお手伝いできます。

*情報を求めて申し訳ありませんが、まだコメントできません。

于 2015-10-19T14:57:50.810 に答える