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 02:05] – [Animation types] 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 247: | Line 247: | ||
</ | </ | ||
- | === Parallel and Sequential === | + | === Sequential |
- | * You can animate specific properties | + | * You can create collections of animations that happen |
- | * Parallel | + | * **SequentialAnimation**: |
- | {{youtube> | + | {{youtube> |
<code javascript> | <code javascript> | ||
- | ParallelAnimation | + | SequentialAnimation |
NumberAnimation { | NumberAnimation { | ||
target : myRect | target : myRect | ||
Line 267: | Line 267: | ||
} | } | ||
}</ | }</ | ||
- | * Sequential: | + | * **ParallelAnimation** |
- | {{youtube> | + | {{youtube> |
<code javascript> | <code javascript> | ||
- | SequentialAnimation | + | ParallelAnimation |
NumberAnimation { | NumberAnimation { | ||
target : myRect | target : myRect | ||
Line 285: | Line 285: | ||
} | } | ||
}</ | }</ | ||
- | |||
- | === PauseAnimation === | ||
=== RotationAnimation === | === 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