states
to a list of States.Item { id: myItem width: 400 height: 400 Image { id: spaceship source: "images/spaceship.png" x: 10 y: 50 } states: [ State { name: "leftXMove" PropertyChanges { target: spaceship x: 200 } } ] }
... states: [ State { name: "leftXMove" PropertyChanges { target: "spaceship" x: 200 } }, State { name: "downYMove" PropertyChanges { target: "spaceship" y: 90 } } ] ...
Image { id: myButton source: "images/button.png" y: 50; x: 10 MouseArea { anchors.fill: parent onClicked: myItem.state = 'leftXMove' } }
Image { id: myButton source: "images/button.png" y: 50; x: 10 MouseArea { id:myButtonMouseArea anchors.fill: parent } } states: [ State { name: "leftXMove" when: myButtonMouseArea.clicked PropertyChanges { target: myItem x: 200 } } ]
import QtQuick 1.0 Item { id: myItem width: 400 height: 400 Image { source: "images/background.png" } Image { id: spaceship x: 10 y: 50 source: "images/spaceship.png" } Image { id: myButton source: "images/button.png" anchors.horizontalCenter: myItem.horizontalCenter anchors.bottom: myItem.bottom anchors.bottomMargin: 20 Text { id: myButtonLabel text: "PRESS" color: "white" anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 6 } MouseArea { anchors.fill: parent onClicked:{ myItem.state = "rightBottom" } } } states: [ State { name: "rightBottom" PropertyChanges { target: spaceship x: 250 y: 200 } } ] }
import QtQuick 1.0 Item { id: myItem width: 400 height: 400 Image { source: "images/background.png" } Image { id: spaceship x: 10 y: 50 source: "images/spaceship.png" } Image { id: myButton source: "images/button.png" anchors.horizontalCenter: myItem.horizontalCenter anchors.bottom: myItem.bottom anchors.bottomMargin: 20 Text { id: myButtonLabel text: "PRESS" color: "white" anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 6 } MouseArea { anchors.fill: parent onClicked:{ myItem.state = "rightBottom" } } } states: [ State { name: "rightBottom" PropertyChanges { target: spaceship x: 250 y: 200 } } ] transitions: [ Transition { from: "" to: "rightBottom" NumberAnimation { properties: "x,y" duration: 500 easing.type: Easing.OutExpo } } ] }
from
and to
target
properties
easing.type
NumberAnimation { properties: "x, y"; duration: 500; easing.type: Easing.OutExpo; }
SequentialAnimation { NumberAnimation { target : myRect properties: "x"; duration: 500; easing.type: Easing.OutExpo; } NumberAnimation { target : myRect properties: "y"; duration: 500; easing.type: Easing.OutExpo; } }
ParallelAnimation { NumberAnimation { target : myRect properties: "x"; duration: 500; easing.type: Easing.OutExpo; } NumberAnimation { target : myRect properties: "y"; duration: 500; easing.type: Easing.OutExpo; } }
states: { State { name: "180"; PropertyChanges { target: myItem; rotation: 180 } } State { name: "-90"; PropertyChanges { target: myItem; rotation: -90 } } } transition: Transition { RotationAnimation { direction: RotationAnimation.Shortest } }
PauseAnimation { target : myRect duration: 100 }
Rectangle { width: 20; height: 20; color: "#00ff00" y: 200 Behavior on y { NumberAnimation { easing.type: Easing.OutBounce duration: 200 } }