單擊事件只能從層列表中的最後一個對象觸發，而不是點擊對象

我是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

來源

2016-08-11 Armin

在你的最後一個循環，你點擊事件添加到每個卡像這樣：

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-11 15:58:43 kazzyt

單擊事件只能從層列表中的最後一個對象觸發，而不是點擊對象

回答

相關問題