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 に答える