0

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

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

提前致谢！

示例 2 列滚动应用程序

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

1 回答 1

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

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

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

于 2016-08-11T15:58:43.983 回答