Qt QML-可翻转矩形动画有一个错误

我正在使用以下示例：。 我用

GridLayout

创建了矩形。我刚刚在示例中添加了我的新状态：

states: [
      State {
        name: 'back'
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
      },
      State {
        name: 'remove'
        PropertyChanges {
          target: card
          visible: false
        }
      }
    ]

我想当我点击矩形时，检查矩形，它们是否打开，它们是否相同。此作业的我的算法：

property int card1: -1
property int card2: -1
property int remaining: 20

function cardClicked(index) {
  var card = repeater.itemAt(index); // Selected card
  if (!card.flipped) { // If selected card is not opened
    card.flipped = true; // Open card
    if (card1 === -1) {  // If card is first selected card
      card1 = index; // Set first selected card
    } else { // If selected card is not first card, I mean that is second card because first card is already selected
      card2 = index; // Set second card
      area.enabled = false; // Disabled GridLayout (area)
      delayTimer.start(); // Start `Timer` QML component
    }
  } else { // If card is opened so, close that card, because that card is opened and player clicked its
      card.flipped = false; // Close that card
      card1 = -1; // first card is not selected
  }
}

function validateCards() {
  var state = ''; // Default state: Close cards
  if (imageIndexes[card1] === imageIndexes[card2]) { // If first card and second card are equal, you found same cards :)
    state = 'remove'; // You found cards so, remove cards
    --remaining; // If this equals 0, you found all cards
  }
  // If cards are not same, close cards but if they are same remove them
  repeater.itemAt(card1).state = state; 
  repeater.itemAt(card2).state = state;
  card1 = -1; // first card is not selected
  card2 = -1; // second card is not selected
  area.enabled = true; // Enabled area (GridLayout)
  if (remaining === 0) { // If you found all cards, game over
    console.log('Game Over!');
  }
}

我将

MouseArea

添加到

矩形中

s：

MouseArea {
  anchors.fill: parent
  onClicked: cardClicked(index) // This index belongs to my `Repeater`.
}

我放置了一个

计时器

，以便动画正常工作并检查卡：

  Timer {
    id: delayTimer
    interval: 1000
    onTriggered: validateCards()
  }

此示例和动画运行良好，但有时运行不正确：
如何解决此动画错误

更新

---

您可以在上找到所有源代码。

我认为使用计时器会使应用程序复杂化，因为您不知道项目是否完成了位置更改，因此在完成字母翻转后执行该任务是合适的

我在代码中看到的另一个错误是，您正在分配一个

状态=”

我对以下部分进行了修改：

游戏区.qml

GridLayout {
    [...]
    property variant imageIndexes: GameUtils.generateCardIndexes(
                                       imageCount, repeatCount)

    property int lastIndex : -1


    Repeater {
        id: repeater
        model: 40
        Card {
            id: card
            backImageSource: 'qrc:/images/img_' + area.imageIndexes[index] + '.jpg'
            onFinished: verify(index)
        }
    }

    function verify(index){
        if(lastIndex == -1){
            lastIndex = index
            return
        }
        area.enabled = false
        var lastItem = repeater.itemAt(lastIndex)
        var currentItem = repeater.itemAt(index)

        if(lastItem.backImageSource === currentItem.backImageSource){
            lastItem.state = "remove"
            currentItem.state = "remove"
        }
        else{
            lastItem.flipped = false
            currentItem.flipped = false
        }
        if(repeater.model === 0){
            console.log("Winning")
        }
        lastIndex = -1
        area.enabled = true
    }
}

Item {
    [...]        
    property alias state: flipable.state
    signal finished()

    Flipable {
        [...]
        transitions: Transition {
            NumberAnimation { target: rotation; property: 'angle'; duration: 400 }
            onRunningChanged: {
                if ((state == "back") && (!running))
                    finished()
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: card.flipped = true
        }
    }
}

卡片.qml

GridLayout {
    [...]
    property variant imageIndexes: GameUtils.generateCardIndexes(
                                       imageCount, repeatCount)

    property int lastIndex : -1


    Repeater {
        id: repeater
        model: 40
        Card {
            id: card
            backImageSource: 'qrc:/images/img_' + area.imageIndexes[index] + '.jpg'
            onFinished: verify(index)
        }
    }

    function verify(index){
        if(lastIndex == -1){
            lastIndex = index
            return
        }
        area.enabled = false
        var lastItem = repeater.itemAt(lastIndex)
        var currentItem = repeater.itemAt(index)

        if(lastItem.backImageSource === currentItem.backImageSource){
            lastItem.state = "remove"
            currentItem.state = "remove"
        }
        else{
            lastItem.flipped = false
            currentItem.flipped = false
        }
        if(repeater.model === 0){
            console.log("Winning")
        }
        lastIndex = -1
        area.enabled = true
    }
}

Item {
    [...]        
    property alias state: flipable.state
    signal finished()

    Flipable {
        [...]
        transitions: Transition {
            NumberAnimation { target: rotation; property: 'angle'; duration: 400 }
            onRunningChanged: {
                if ((state == "back") && (!running))
                    finished()
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: card.flipped = true
        }
    }
}

---

完整的代码可在以下位置找到

请提供有关问题的说明。目前，如果有人想测试此代码，则与此代码无关。现在它看起来像一个逻辑问题。什么是

card

？@folibis I添加了源代码。@eyllansc

card

当前处于选中状态。我正在处理当前选定的卡（或矩形）。这是一个记忆游戏。非常感谢！这是工作！我不明白，为什么我在游戏中使用

计时器时，会出现错误？@İbrahim在卡改变位置后进行验证是正确的，计时器可以在它之前触发。