0

为什么LayerA和LayerB在Framerjs中拖拽结束时不做动画,附代码:

我创建layerAlayerB然后layerC我拖动LayerC

Event DragMove中,我用 ' 的偏移量更改LayerALayerB的道具LayerC,我一直想在它的时候做一个动画EndDrag,但它不起作用。

有人知道为什么吗?

# 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

你能举一个更好的例子来说明你想要实现的目标吗?您的代码(在修复格式后)它工作正常 - 很好,它正确触发 DragEnd 事件,如果偏移量小于 360,则调用动画。

如果您告诉我们您想要实现的目标,并分享成帧器项目,我们可以更快、更准确地为您提供帮助。

*抱歉请求信息,我还不能评论。

于 2015-10-19T14:57:50.810 回答
0

你的错误不是你的想法,你只是忘记了正确地打算使用 CoffeScript 代码layerA'slayerB's动画。这是我认为的工作示例:

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

来自德国的问候,丹尼斯

PS:根据 FramerJS / Framer Studio 提出问题的最佳方式是我们专门的 Facebook-Group

于 2015-10-20T06:56:37.150 回答