qml做的一个Memory Game 其中动画效果值得参考。

main.qml  Code:

import QtQuick 1.1
import "Functions.js" as Script

Rectangle {
    id: mainScreen
     800
    height: 600
    Component.onCompleted: mainScreen.state = "MainMenu"

    /*Main Menu*/
    Rectangle{
        id: startGame
         parent.width
        height: parent.height
        anchors.left: parent.left
        color: "#08FC39"
        Text{
            id: mainTitle
            text: "Memory Game"
            color: "#FF7417"
            font{bold: true; family: "Segoe UI Bold"; pointSize: 30}
            anchors{
                top: parent.top
                topMargin: 200
                horizontalCenter: parent.horizontalCenter
            }
        }
        Text{
            id: txtStartGame
            text: "Start Game"
            anchors{
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            color: "White"
            font{bold: true; family: "Segoe UI Bold"; pointSize: 15}
            MouseArea{
                id: maStartGame
                anchors.fill: parent
                hoverEnabled: true
                onEntered: txtStartGame.color = "#6017FF"
                onExited: txtStartGame.color = "white"
                onClicked: {
                    Script.randomPict();
                    mainScreen.state="StartGame"
                }
            }
        }
        Text{
            id: exit
            text: "X"
            anchors{
                top: parent.top
                right: parent.right
                rightMargin: 10
            }
            font{bold: true; pointSize: 30}
            MouseArea{
                anchors.fill: parent
                onClicked: Qt.quit()
            }
        }
    }
    /*------------------------------*/

    /*StartGame*/
    Text{
        id: startGameTitle
        visible: false
        anchors{
            top: mainScreen.top
            topMargin: 30
            horizontalCenter: mainScreen.horizontalCenter
        }
        text: "Choose This Picture"
        color: "white"
        font{bold:true; family: "Segoe UI Bold"; pointSize: 20}
    }

    Image{
        id: thePicture
        visible: false
         70
        height: 70

        anchors{
            left: startGameTitle.right
            leftMargin: 20
            verticalCenter: startGameTitle.verticalCenter
        }
        source: ""
    }

    Flipable{
        id:card1
         150
        height: width
        visible: false
        x:-width
        y:100
        enabled: false
        transform: Rotation {
            id: rot1
            origin.x: card1.width/2
            origin.y: 0
            axis.x: 0; axis.y: 1; axis.z: 0;
            angle: 0
            onAngleChanged: img1.source = "../../images/models/"+Script.getPict(0)+".jpg";
            Behavior on angle {PropertyAnimation{}}
        }
        front:
            Rectangle {
                color: "#FAFF70"
                 150
                height: width
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        cekPict1.start();
                    }
                }
        }

        back:
            Image {
                id: img1
                 150
                height: width
        }
    }

    Flipable{
        id:card2
         150
        height: width
        visible: false
        x: mainScreen.width
        y: 100
        enabled: false
        transform: Rotation {
            id: rot2
            origin.x: card2.width/2
            origin.y: 0
            axis.x: 0; axis.y: 1; axis.z: 0;
            angle: 0
            onAngleChanged: img2.source = "../../images/models/"+Script.getPict(1)+".jpg";
            Behavior on angle {PropertyAnimation{}}
        }
        front:
            Rectangle {
                color: "#FAFF70"
                 150
                height: width
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        cekPict2.start();
                    }
                }
        }

        back:
            Image {
                id: img2
                 150
                height: width
        }
    }

    Flipable{
        id:card3
         150
        height: width
        visible: false
        x: -width
        y: mainScreen.height - width - 50
        enabled: false
        transform: Rotation {
            id: rot3
            origin.x: card3.width/2
            origin.y: 0
            axis.x: 0; axis.y: 1; axis.z: 0;
            angle: 0
            onAngleChanged: img3.source = "../../images/models/"+Script.getPict(2)+".jpg";
            Behavior on angle {PropertyAnimation{}}
        }
        front:
            Rectangle {
                color: "#FAFF70"
                 150
                height: width
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        cekPict3.start();
                    }
                }
        }

        back:
            Image {
                id: img3
                 150
                height: width
        }
    }

    Flipable{
        id:card4
         150
        height: width
        visible: false
        x: mainScreen.width
        y: mainScreen.height - width - 50
        enabled: false
        transform: Rotation {
            id: rot4
            origin.x: card4.width/2
            origin.y: 0
            axis.x: 0; axis.y: 1; axis.z: 0;
            angle: 0
            onAngleChanged: img4.source = "../../images/models/"+Script.getPict(3)+".jpg";
            Behavior on angle {PropertyAnimation{}}
        }
        front:
            Rectangle {
                color: "#FAFF70"
                 150
                height: width
                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        cekPict4.start();
                    }
                }
        }

        back:
            Image {
                id: img4
                 150
                height: width
        }
    }
    /*------------------------------*/
    /*End Game*/
    Rectangle{
        id: blackRect
        visible: false
        opacity: 0
        color: "black"
         mainScreen.width
        height: mainScreen.height
    }
    Text{
        id: blackRectText
        color: "#FF7417"
        visible: false
        anchors{
            horizontalCenter: blackRect.horizontalCenter
            verticalCenter: blackRect.verticalCenter
        }
        font{bold:true; family: "Segoe UI Bold"; pointSize:50}
    }
    Text{
        id: playAgain
        color: "white"
        visible: false
        text: "Play Again"
        anchors{
            horizontalCenter: blackRect.horizontalCenter
            top: blackRectText.bottom
            topMargin: 20
        }
        font{bold:true; family: "Segoe UI Bold"; pointSize:30}
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true;
            onEntered: playAgain.color = "#6017FF"
            onExited: playAgain.color = "white"
            onClicked: mainScreen.state = "MainMenu"
        }
    }
    /*------------------------------*/
    states:[
        State{
            name: "MainMenu"
            PropertyChanges{
                target: startGame
                 mainScreen.width
            }
            PropertyChanges{
                target: mainTitle
                visible: true
            }
            PropertyChanges{
                target: blackRect
                visible: false
            }
            PropertyChanges{
                target: blackRectText
                visible: false
            }
            PropertyChanges{
                target: playAgain
                visible: false
            }
            PropertyChanges {
                target: thePicture
                visible: false
            }
        },
        State{
            name: "StartGame"
            PropertyChanges{
                target: rot1
                angle: 0
            }
            PropertyChanges{
                target: rot2
                angle: 0
            }
            PropertyChanges{
                target: rot3
                angle: 0
            }
            PropertyChanges{
                target: rot4
                angle: 0
            }
            PropertyChanges{
                target: thePicture
                visible: false
            }
            PropertyChanges {
                target: blackRect
                visible: false
            }
            PropertyChanges {
                target: blackRectText
                visible: false
            }
            PropertyChanges {
                target: playAgain
                visible: false
            }
            PropertyChanges {
                target: startGame
                 mainScreen.width
            }
            PropertyChanges {
                target: mainTitle
                visible: false
            }
            PropertyChanges {
                target: startGameTitle
                visible: true
            }
            PropertyChanges {
                target: txtStartGame
                visible: false
            }
            PropertyChanges{
                target: maStartGame
                enabled: false
            }
            PropertyChanges {
                target: card4
                visible: true
                x: 550
            }
            PropertyChanges {
                target: card2
                visible: true
                x: 550
            }
            PropertyChanges {
                target: card3
                visible: true
                x: 100
            }
            PropertyChanges {
                target: card1
                visible: true
                x: 100
            }
        }
    ]

    transitions:[
        Transition {
            from: "MainMenu"
            to: "StartGame"
            SequentialAnimation{
                PropertyAnimation{
                    properties: "x"
                    duration: 500
                }
                PauseAnimation { duration: 200 }
                ParallelAnimation{
                    PropertyAnimation{target: rot1; property: "angle"; from:0; to: 180; duration: 1000}
                    PropertyAnimation{target: rot2; property: "angle"; from:0; to: 180; duration: 1000}
                    PropertyAnimation{target: rot3; property: "angle"; from:0; to: 180; duration: 1000}
                    PropertyAnimation{target: rot4; property: "angle"; from:0; to: 180; duration: 1000}
                }
                PauseAnimation { duration: 5000 }
                ParallelAnimation{
                    PropertyAnimation{target: rot1; property: "angle"; from:180; to: 0; duration: 1000}
                    PropertyAnimation{target: rot2; property: "angle"; from:180; to: 0; duration: 1000}
                    PropertyAnimation{target: rot3; property: "angle"; from:180; to: 0; duration: 1000}
                    PropertyAnimation{target: rot4; property: "angle"; from:180; to: 0; duration: 1000}
                }
                PauseAnimation { duration: 1000 }
                ScriptAction{
                    script: Script.randomAnimation();
                }
                PauseAnimation { duration: 2000 }
                ScriptAction{
                    script: Script.randomAnimation();
                }
                PauseAnimation { duration: 2000 }
                ScriptAction{
                    script: Script.randomAnimation();
                }
                PauseAnimation { duration: 2000 }
                ScriptAction{
                    script: Script.randomAnimation();
                }
                PauseAnimation { duration: 2000 }
                ScriptAction{
                    script: Script.randomAnimation();
                }
                PauseAnimation { duration: 1000 }
                ScriptAction{
                    script: {
                        card1.enabled = true;
                        card2.enabled = true;
                        card3.enabled = true;
                        card4.enabled = true;
                        thePicture.source = "../../images/models/"+Script.getRandPict()+".jpg";
                        thePicture.visible = true;
                    }
                }
            }
        }
    ]
    ParallelAnimation{
        id: anim1
        PropertyAnimation{
            target: card1
            property: "x"
            to: card1.x==100?550:100
            duration: 700
        }
        PropertyAnimation{
            target: card3
            properties: "x"
            to: card3.x==100?550:100
            duration: 700
        }
        PropertyAnimation{
            target: card2
            properties: "x"
            to: card2.x==100?550:100
            duration: 700
        }
        PropertyAnimation{
            target: card4
            properties: "x"
            to: card4.x==100?550:100
            duration: 700
        }
    }

    ParallelAnimation{
        id: anim2
        PropertyAnimation{
            target: card1
            property: "y"
            to: card1.y==100?400:100
            duration: 700
        }
        PropertyAnimation{
            target: card3
            properties: "y"
            to: card3.y==100?400:100
            duration: 700
        }
        PropertyAnimation{
            target: card2
            properties: "y"
            to: card2.y==100?400:100
            duration: 700
        }
        PropertyAnimation{
            target: card4
            properties: "y"
            to: card4.y==100?400:100
            duration: 700
        }
    }

    ParallelAnimation{
        id: anim3
        NumberAnimation{
            target: card2
            property: "y"
            from: card2.y
            to: card2.y==100?400:100
            duration: 700
        }
        NumberAnimation{
            target: card4
            property: "y"
            from: card4.y
            to: card4.y==100?400:100
            duration: 700
        }
    }

    ParallelAnimation{
        id: anim4
        NumberAnimation{
            target: card1
            property: "y"
            from: card1.y
            to: card1.y==100?400:100
            duration: 700
        }
        NumberAnimation{
            target: card3
            property: "y"
            from: card3.y
            to: card3.y==100?400:100
            duration: 700
        }
    }

    ParallelAnimation{
        id: anim5
        NumberAnimation{
            target: card1
            property: "x"
            from: card1.x
            to: card1.x==100?550:100
            duration: 700
        }
        NumberAnimation{
            target: card2
            property: "x"
            from: card2.x
            to: card2.x==100?550:100
            duration: 700
        }
    }

    ParallelAnimation{
        id: anim6
        NumberAnimation{
            target: card3
            property: "x"
            from: card3.x
            to: card3.x==100?550:100
            duration: 700
        }
        NumberAnimation{
            target: card4
            property: "x"
            from: card4.x
            to: card4.x==100?550:100
            duration: 700
        }
    }

    SequentialAnimation{
        id: cekPict1
        PropertyAnimation{
            target: rot1
            property: "angle"
            to: 180
            duration: 1000
        }
        ScriptAction{
            script:Script.cekPict(Script.getPict(0))===true?match.start():mismatch.start();
        }
    }

    SequentialAnimation{
        id: cekPict2
        PropertyAnimation{
            target: rot2
            property: "angle"
            to: 180
            duration: 1000
        }
        ScriptAction{script: Script.cekPict(Script.getPict(1))===true?match.start():mismatch.start();}
    }

    SequentialAnimation{
        id: cekPict3
        PropertyAnimation{
            target: rot3
            property: "angle"
            to: 180
            duration: 1000
        }
        ScriptAction{script: Script.cekPict(Script.getPict(2))===true?match.start():mismatch.start();}
    }

    SequentialAnimation{
        id: cekPict4
        PropertyAnimation{
            target: rot4
            property: "angle"
            to: 180
            duration: 1000
        }
        ScriptAction{script: Script.cekPict(Script.getPict(3))===true?match.start():mismatch.start();}
    }

    SequentialAnimation{
        id: match
        ScriptAction{
            script: {
                card1.enabled = false;
                card2.enabled = false;
                card3.enabled = false;
                card4.enabled = false;
                blackRect.visible = true;
                blackRectText.text = "You Win!";
            }
        }
        PropertyAnimation
        {
            target: blackRect
            property: "opacity"
            from: 0
            to: 0.5
            duration: 1000
        }
        PauseAnimation { duration: 500 }
        ScriptAction{
            script: {
                blackRectText.visible = true;
                playAgain.visible = true;
                playAgain.enabled = true;
            }
        }
    }

    SequentialAnimation{
        id: mismatch
        ScriptAction{
            script: {
                card1.enabled = false;
                card2.enabled = false;
                card3.enabled = false;
                card4.enabled = false;
                blackRect.visible = true;
                blackRectText.text = "You Lose!";
            }
        }
        PropertyAnimation
        {
            target: blackRect
            property: "opacity"
            from: 0
            to: 0.5
            duration: 1000
        }
        PauseAnimation { duration: 500 }
        ScriptAction{
            script: {
                blackRectText.visible = true;
                playAgain.visible = true;
            }
        }
    }
}

Functions.js  Code:

var pict = new Array(0,0,0,0);
var randPict = 0;
function randomPict(){
        var i=0;
        var idx = 0;
        for(i=0;i<4;i++){
            if(i==0)
            {
                idx = Math.ceil(Math.random()*12);
                pict[i] = idx;
            }
            else
            {
                var flag = 0;
                while(flag == 0)
                {
                    var a = 0;
                    idx = Math.ceil(Math.random()*12);
                    for(var j=0;j<i;j++)
                    {
                        if(pict[j] == idx)
                        {
                            a = 1;
                            break;
                        }
                    }
                    if(a==0)
                    {
                        pict[i] = idx;
                        flag = 1;
                    }
                }
            }
        }
    }

    function getRandPict(){
        var idx = Math.ceil(Math.random()*4)-1;
        randPict = pict[idx];
        return randPict;
    }

    function getPict(idx){
        return pict[idx];
    }

    function randomAnimation(){
        var flag = true;
        while(flag)
        {
            switch(Math.ceil(Math.random()*6))
            {
                case 1:
                    if(card1.y == card3.y && card2.y == card4.y)
                    {
                        anim1.start();
                        flag = false;
                    }
                    break;
                case 2:
                    if(card1.x == card3.x && card2.x == card4.x)
                    {
                        anim2.start();
                        flag = false;
                    }
                    break;
                case 3:
                    if(card2.x == card4.x)
                    {
                        anim3.start();
                        flag = false;
                    }
                    break;
                case 4:
                    if(card1.x == card3.x)
                    {
                        anim4.start();
                        flag = false;
                    }
                    break;
                case 5:
                    if(card1.y == card2.y)
                    {
                        anim5.start();
                        flag = false;
                    }
                    break;
                case 6:
                    if(card3.y == card4.y)
                    {
                        anim6.start();
                        flag = false;
                    }
                    break;
            }
        }
    }
function cekPict(a)
{
    if(a === randPict)return true;
    else return false;
}