为什么LayerA和LayerB在Framerjs中结束Drag时不做动画
Why does not LayerA and LayerB make animation when it end Drag in Framerjs
为什么在Framerjs中LayerA和LayerB结束Drag时不做动画,附代码:
我创建 layerA
、layerB
和 layerC
,然后我拖动 LayerC
。
在Event DragMove
中,我把LayerA
和LayerB
的props改成了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
我是 framer 的新手,请帮忙
你能举一个更好的例子来说明你想要实现的目标吗?
您的代码(在修复格式后)有效 - 好吧,它正确地触发了 DragEnd 事件,并在偏移量小于 360 时调用动画。
如果您告诉我们您想要实现的目标,并分享 framer 项目,我们可以更快、更准确地帮助您。
*抱歉请求信息,我还不能发表评论。
你的想法并没有错,你只是忘记了为 layerA's
和 layerB's
动画正确设计 CoffeScript 代码。这是我认为的工作示例:
http://share.framerjs.com/2mp2alhvueq4/
来自德国的问候,
丹尼斯
PS: 根据 FramerJS / Framer Studio 提问的最佳方式是我们专用的 Facebook-Group.
为什么在Framerjs中LayerA和LayerB结束Drag时不做动画,附代码:
我创建 layerA
、layerB
和 layerC
,然后我拖动 LayerC
。
在Event DragMove
中,我把LayerA
和LayerB
的props改成了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
我是 framer 的新手,请帮忙
你能举一个更好的例子来说明你想要实现的目标吗? 您的代码(在修复格式后)有效 - 好吧,它正确地触发了 DragEnd 事件,并在偏移量小于 360 时调用动画。
如果您告诉我们您想要实现的目标,并分享 framer 项目,我们可以更快、更准确地帮助您。
*抱歉请求信息,我还不能发表评论。
你的想法并没有错,你只是忘记了为 layerA's
和 layerB's
动画正确设计 CoffeScript 代码。这是我认为的工作示例:
http://share.framerjs.com/2mp2alhvueq4/
来自德国的问候, 丹尼斯
PS: 根据 FramerJS / Framer Studio 提问的最佳方式是我们专用的 Facebook-Group.