qt-quick-for-designers-1:making_things_move
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
qt-quick-for-designers-1:making_things_move [2013/06/22 00:18] – [How to create States] mithat | qt-quick-for-designers-1:making_things_move [2013/07/06 22:52] (current) – [Resources] mithat | ||
---|---|---|---|
Line 3: | Line 3: | ||
===== States ===== | ===== States ===== | ||
* The State element defines configurations of objects and properties. | * The State element defines configurations of objects and properties. | ||
- | * It is a non-visual element. | + | * It is a non-visual element |
+ | * Changing from one state to another creates dynamics. | ||
+ | {{youtube> | ||
==== How to create States ==== | ==== How to create States ==== | ||
* Bind '' | * Bind '' | ||
- | | + | |
<code javascript> | <code javascript> | ||
Item { | Item { | ||
Line 32: | Line 34: | ||
}</ | }</ | ||
* States have names (in quotes), not ids. | * States have names (in quotes), not ids. | ||
- | * You can create as many States | + | * You can create as many states |
- | * All properties not expressed will be the same as the base State. | + | * All properties not expressed will be the same as the base state. |
<code javascript> | <code javascript> | ||
... | ... | ||
Line 53: | Line 55: | ||
] | ] | ||
...</ | ...</ | ||
+ | * Executing a function to set a different state: | ||
+ | <code javascript> | ||
+ | Image { | ||
+ | id: myButton | ||
+ | source: " | ||
+ | y: 50; x: 10 | ||
- | ==== Why create States? ==== | + | MouseArea { |
+ | anchors.fill: | ||
+ | onClicked: myItem.state | ||
+ | } | ||
+ | }</ | ||
+ | * Using “when” method. It will change the property but inside the state element: | ||
+ | <code javascript> | ||
+ | Image { | ||
+ | id: myButton | ||
+ | source: " | ||
+ | y: 50; x: 10 | ||
+ | MouseArea { | ||
+ | id: | ||
+ | anchors.fill: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | states: [ | ||
+ | State { | ||
+ | name: " | ||
+ | when: myButtonMouseArea.clicked | ||
+ | PropertyChanges { | ||
+ | target: myItem | ||
+ | x: 200 | ||
+ | } | ||
+ | } | ||
+ | ]</ | ||
+ | |||
+ | * Complete example: | ||
+ | <file javascript state-example.qml> | ||
+ | import QtQuick 1.0 | ||
+ | |||
+ | Item { | ||
+ | id: myItem | ||
+ | width: 400 | ||
+ | height: 400 | ||
+ | |||
+ | Image { | ||
+ | source: " | ||
+ | } | ||
+ | |||
+ | Image { | ||
+ | id: spaceship | ||
+ | x: 10 | ||
+ | y: 50 | ||
+ | source: " | ||
+ | } | ||
+ | |||
+ | Image { | ||
+ | id: myButton | ||
+ | source: " | ||
+ | anchors.horizontalCenter: | ||
+ | anchors.bottom: | ||
+ | anchors.bottomMargin: | ||
+ | |||
+ | Text { | ||
+ | id: myButtonLabel | ||
+ | text: " | ||
+ | color: " | ||
+ | anchors.horizontalCenter: | ||
+ | anchors.top: | ||
+ | anchors.topMargin: | ||
+ | } | ||
+ | |||
+ | MouseArea { | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | | ||
+ | State { | ||
+ | name: " | ||
+ | | ||
+ | | ||
+ | x: 250 | ||
+ | y: 200 | ||
+ | } | ||
+ | } | ||
+ | ] | ||
+ | }</ | ||
===== Transitions ===== | ===== Transitions ===== | ||
+ | * State changes add dynamics, but Transitions make them pretty. | ||
+ | {{youtube> | ||
==== Animating from one State to another ==== | ==== Animating from one State to another ==== | ||
+ | * You just need to add a transition element to animate between states. | ||
+ | * The first state is an empty string by default. | ||
+ | <file javascript animation-example.qml> | ||
+ | import QtQuick 1.0 | ||
+ | |||
+ | Item { | ||
+ | id: myItem | ||
+ | width: 400 | ||
+ | height: 400 | ||
+ | |||
+ | Image { | ||
+ | source: " | ||
+ | } | ||
+ | |||
+ | Image { | ||
+ | id: spaceship | ||
+ | x: 10 | ||
+ | y: 50 | ||
+ | source: " | ||
+ | } | ||
+ | |||
+ | Image { | ||
+ | id: myButton | ||
+ | source: " | ||
+ | anchors.horizontalCenter: | ||
+ | anchors.bottom: | ||
+ | anchors.bottomMargin: | ||
+ | |||
+ | Text { | ||
+ | id: myButtonLabel | ||
+ | text: " | ||
+ | color: " | ||
+ | anchors.horizontalCenter: | ||
+ | anchors.top: | ||
+ | anchors.topMargin: | ||
+ | } | ||
+ | |||
+ | MouseArea { | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | | ||
+ | State { | ||
+ | name: " | ||
+ | | ||
+ | | ||
+ | x: 250 | ||
+ | y: 200 | ||
+ | } | ||
+ | } | ||
+ | ] | ||
+ | |||
+ | transitions: | ||
+ | | ||
+ | from: "" | ||
+ | to: " | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | ] | ||
+ | } | ||
+ | </ | ||
=== Main transition and animation elements === | === Main transition and animation elements === | ||
- | * **from** and **to** | + | * '' |
* the element’s initial and final state string | * the element’s initial and final state string | ||
- | * **target** | + | * '' |
* the animated element’s id | * the animated element’s id | ||
- | * **properties** | + | * '' |
* the property that you want to change during the animation. This can be an array of properties | * the property that you want to change during the animation. This can be an array of properties | ||
- | * **easing.type** | + | * '' |
* choose an easing curve to add a specific effect to your animation | * choose an easing curve to add a specific effect to your animation | ||
==== Animation types ==== | ==== Animation types ==== | ||
+ | * There are many ways to achieve your needs. | ||
+ | === NumberAnimation === | ||
+ | * **NumberAnimation** allows you to animate changes in a real number type property. | ||
+ | * This is the basic animation element. Most animations are about changing numbers. | ||
+ | <code javascript> | ||
+ | NumberAnimation { | ||
+ | properties: "x, y"; | ||
+ | duration: 500; | ||
+ | easing.type: | ||
+ | } | ||
+ | </ | ||
+ | === Sequential and Parallel Animations === | ||
+ | * You can create collections of animations that happen in a specific order. | ||
+ | * **SequentialAnimation**: | ||
+ | {{youtube> | ||
+ | <code javascript> | ||
+ | SequentialAnimation { | ||
+ | NumberAnimation { | ||
+ | target : myRect | ||
+ | properties: " | ||
+ | duration: 500; | ||
+ | easing.type: | ||
+ | } | ||
+ | NumberAnimation { | ||
+ | target : myRect | ||
+ | properties: " | ||
+ | duration: 500; | ||
+ | easing.type: | ||
+ | } | ||
+ | }</ | ||
+ | * **ParallelAnimation** | ||
+ | {{youtube> | ||
+ | <code javascript> | ||
+ | ParallelAnimation { | ||
+ | NumberAnimation { | ||
+ | target : myRect | ||
+ | properties: " | ||
+ | duration: 500; | ||
+ | easing.type: | ||
+ | } | ||
+ | |||
+ | NumberAnimation { | ||
+ | target : myRect | ||
+ | properties: " | ||
+ | duration: 500; | ||
+ | easing.type: | ||
+ | } | ||
+ | }</ | ||
+ | |||
+ | === RotationAnimation === | ||
+ | * The **RotationAnimation** allows you to add rotation properties to your animation. FIXME I think the code below is wrong: state and transition are not JSON arrays | ||
+ | <code javascript> | ||
+ | states: { | ||
+ | State { | ||
+ | name: " | ||
+ | PropertyChanges { target: myItem; rotation: 180 } | ||
+ | } | ||
+ | State { | ||
+ | name: " | ||
+ | PropertyChanges { target: myItem; rotation: -90 } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | transition: Transition { | ||
+ | RotationAnimation { | ||
+ | direction: RotationAnimation.Shortest | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === PauseAnimation === | ||
+ | * The **PauseAnimation** allows you to add delays in your animation. | ||
+ | <code javascript> | ||
+ | PauseAnimation { | ||
+ | target : myRect | ||
+ | duration: 100 | ||
+ | }</ | ||
+ | |||
+ | === Animating with behavior === | ||
+ | <code javascript> | ||
+ | Rectangle { | ||
+ | width: 20; height: 20; color: "# | ||
+ | y: 200 | ||
+ | Behavior on y { | ||
+ | NumberAnimation { | ||
+ | easing.type: | ||
+ | duration: 200 | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | -------------------------------------------------------------- | ||
+ | ====== Resources ====== | ||
+ | * {{: | ||
+ | * All source code is subject to this [[copyright header|copyright]]. |
qt-quick-for-designers-1/making_things_move.txt · Last modified: 2013/07/06 22:52 by mithat