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:08] – mithat | qt-quick-for-designers-1:making_things_move [2013/06/22 02:39] – mithat | ||
---|---|---|---|
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: | ||
} | } | ||
}</ | }</ | ||
+ | |||
+ | === 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 === | === PauseAnimation === | ||
+ | * The **PauseAnimation** allows you to add delays in your animation. | ||
+ | <code javascript> | ||
+ | PauseAnimation { | ||
+ | target : myRect | ||
+ | duration: 100 | ||
+ | }</ | ||
- | === RotationAnimation | + | === Animating with behavior |
+ | <code javascript> | ||
+ | Rectangle { | ||
+ | width: 20; height: 20; color: "# | ||
+ | y: 200 | ||
+ | Behavior on y { | ||
+ | NumberAnimation { | ||
+ | easing.type: | ||
+ | duration: 200 | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | -------------------------------------------------------------- | ||
+ | ====== Resources ====== | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
qt-quick-for-designers-1/making_things_move.txt · Last modified: 2013/07/06 22:52 by mithat