Question

我是FramerJS和Coffee Script的新手，但我不是编程的新手。我正在创建一些初学者项目，以了解FramerJS中的移动应用程序原型。我正在使用带有“卡片”的滚动应用程序。单击一张卡时，它应该缩放到屏幕大小。当你再次点击它时，它将回到它之前的帧位置。

然而，当点击任何卡片时，会发生什么情况，列表中的最后一张卡片是缩放到屏幕中心的卡片。我不确定到底发生了什么。任何人都可以看看代码，看看发生了什么？

提前致谢！

# 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
        ...

在旁注中，当我期望它将是副本时，您正在设置原始图层的动画。这是你的意图吗？

希望这足以让你前进！

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

1 个答案: