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:53] – [Animating from one State to another] 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 149: | Line 149: | ||
===== 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 ==== | ||
Line 234: | Line 234: | ||
==== 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