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 revisionNext revisionBoth sides next revision | ||
qt-quick-for-designers-1:making_things_move [2013/06/22 01:40] – mithat | qt-quick-for-designers-1:making_things_move [2013/06/22 02:18] – mithat | ||
---|---|---|---|
Line 5: | Line 5: | ||
* It is a non-visual element (typically) has visual impact. | * It is a non-visual element (typically) has visual impact. | ||
* Changing from one state to another creates dynamics. | * Changing from one state to another creates dynamics. | ||
- | {{youtube> | + | {{youtube> |
==== How to create States ==== | ==== How to create States ==== | ||
Line 89: | Line 89: | ||
} | } | ||
]</ | ]</ | ||
+ | |||
+ | * 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. | * State changes add dynamics, but Transitions make them pretty. | ||
- | {{youtube> | + | {{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 | ||
+ | } | ||
+ | } | ||
+ | </ | ||
qt-quick-for-designers-1/making_things_move.txt · Last modified: 2013/07/06 22:52 by mithat