IconItem.qml

import QtQuick 1.0

Component {
    Item {
        id: main
        width: grid.cellWidth; height: grid.cellHeight
        Rectangle {
            id: item; parent: loc
            x: main.x + 5; y: main.y + 5
            width: main.width - 10; height: main.height - 10;
            color: model.color
            smooth: item.state != ''
            Rectangle {
                anchors.fill: parent;
                border.color: "#326487"; border.width: 6
                color: "transparent"; radius: 5
                visible: item.state == "active"
                smooth: item.state != ''
            }
            Behavior on x { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutCubic } }
            Behavior on y { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutCubic } }
            SequentialAnimation on rotation {
                NumberAnimation { to:  5; duration: 100 }
                NumberAnimation { to: -5; duration: 200 }
                NumberAnimation { to:  0; duration: 100 }
                running: loc.currentId != -1 && item.state != "active"
                loops: Animation.Infinite; alwaysRunToEnd: true
            }
            states: [
                State {
                    name: "active"
                    when: loc.currentId == gridId
                    PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 1.10; z: 10 }
                },
                State {
                    when: loc.currentId != -1
                    PropertyChanges {
                        target: item
                        scale: 0.75
                        opacity: 0.75
                    }
                }
            ]
            transitions: Transition { NumberAnimation { properties: "scale, opacity, x, y"; duration: 150; easing.type: Easing.OutCubic} }
        }
    }
}