单击事件仅从层列表中的最后一个对象触发，而不是单击的对象

Question

我是 FramerJS 和 Coffee Script 的新手，但我不是编程新手。我正在创建一些初学者项目，以了解如何在 FramerJS 中制作移动应用程序原型。我正在使用 "cards" 开发滚动应用程序。单击卡片时，它应该缩放到屏幕大小。当您再次点击它时，它会回到之前的帧位置。

但是，当单击任何卡片时，列表中的最后一张卡片会缩放到屏幕中央。我不确定到底发生了什么。谁能看一下代码，看看发生了什么？

提前致谢！

# Project Info
# This info is presented in a widget when you share.
# http://framerjs.com/docs/#info.info

Framer.Info =
    title: ""
    author: ""
    twitter: ""
    description: ""


Screen.backgroundColor = "#000"

scroll = new ScrollComponent
    width: Screen.width, height: Screen.height
    contentInset:
        top: 10
        bottom: 10
        left: 20
        right: 10
scroll.scrollHorizontal = false

numCards = 10
cardHeight = 300
rowPadding = 20
columnPadding = 10
cardBorderRadius = 15
cardColumns = 2
cardWidth = (Screen.width / cardColumns) - (columnPadding *2) - scroll.contentInset.right
totalCardWidth = cardWidth + (columnPadding *2)
totalRowHeight = cardHeight + rowPadding

allCards = []
for i in [0...numCards]
    card = new Layer
        height: cardHeight
        width: cardWidth
        x: totalCardWidth * (i % cardColumns)
        y: if i % cardColumns is 0 then totalRowHeight * (i / cardColumns); lastX = totalRowHeight * (i / cardColumns); else lastX
        opacity: 1
        borderRadius: cardBorderRadius
        superLayer: scroll.content
        html: i + 1
        backgroundColor: Utils.randomColor(0.95)
    card.style = 
        "font-size": "125px",
        "font-weight": "100",
        "text-align": "center",
        "line-height": "#{card.height}px"
    allCards.push card

for c in allCards
    c.on Events.Click, (event, layer) ->
        currentCard = c.copy()
        currentCard.opacity = 1
        currentCard.frame = c.screenFrame
        c.animate
            properties:
                midY: Screen.height / 2
                scale: Screen.width / currentCard.width
                x: Align.center
                y: Align.center
            curve: 'spring(200,20,0)'
            time: 0.2

Answer 1

在最后一个循环中，您向每张卡片添加了一个点击事件，如下所示：

for c in allCards
    c.on Events.Click, (event, layer) ->
        currentCard = c.copy()
        currentCard.opacity = 1
        currentCard.frame = c.screenFrame
        c.animate
        ...

当循环结束时，全局变量 c 被设置为 allCards 数组中的最后一张卡片并保持不变，因此当调用这些点击事件中的任何一个时，最后一张卡片是被复制和动画化的那个。

相反，一种选择是通过块中的本地 layer 变量引用它：

for c in allCards
    c.on Events.Click, (event, layer) ->
        currentCard = layer.copy()
        currentCard.opacity = 1
        currentCard.frame = layer.screenFrame
        layer.animate
        ...

附带说明一下，您正在为原始图层制作动画，而我希望它是副本。这是你的意图吗？

希望这足以让您继续前进！

单击事件仅从层列表中的最后一个对象触发，而不是单击的对象

Click Event only triggered from last object in list of layers, not clicked object

coffeescript

framerjs