User Tools

Site Tools


qt-quick-for-designers-1:making_things_move

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
qt-quick-for-designers-1:making_things_move [2013/06/22 02:05] – [Animation types] mithatqt-quick-for-designers-1:making_things_move [2013/07/06 22:52] (current) – [Resources] 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>udSFM3ftOoA}}+{{youtube>hO18NDpekp0?small}}
  
 ==== 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>8FAXKPmkfOw}}+{{youtube>Q2E3mjlcvEk?small}}
  
 ==== Animating from one State to another ==== ==== Animating from one State to another ====
Line 247: Line 247:
 </code> </code>
  
-=== Parallel and Sequential === +=== Sequential and Parallel Animations === 
-  * You can animate specific properties in a specific order. +  * You can create collections of animations that happen in a specific order. 
-    * Parallel +    * **SequentialAnimation**: 
-{{youtube>oidUkxuNDfY}}+{{youtube>sFVifXy8mAM?small}}
 <code javascript> <code javascript>
-ParallelAnimation +SequentialAnimation 
   NumberAnimation {    NumberAnimation { 
     target : myRect      target : myRect 
Line 267: Line 267:
   }    } 
 }</code> }</code>
-    * Sequential: +    * **ParallelAnimation** 
-{{youtube>DAghZ6C7rUU}}+{{youtube>A-TOPzJpRYg?small}}
 <code javascript> <code javascript>
-SequentialAnimation +ParallelAnimation 
   NumberAnimation {    NumberAnimation { 
     target : myRect      target : myRect 
Line 285: Line 285:
   }    } 
 }</code> }</code>
- 
-=== 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: "180";
 +    PropertyChanges { target: myItem; rotation: 180 }
 +  }
 +  State {
 +    name: "-90";
 +    PropertyChanges { target: myItem; rotation: -90 }
 +  }
 +}
  
 +transition: Transition {
 +  RotationAnimation {
 +    direction: RotationAnimation.Shortest
 +  }
 +}
 +</code>
 +
 +=== PauseAnimation ===
 +  * The **PauseAnimation** allows you to add delays in your animation.
 +<code javascript>
 +PauseAnimation {
 +  target : myRect
 +  duration: 100
 +}</code>
 +
 +=== Animating with behavior ===
 +<code javascript>
 +Rectangle {
 +  width: 20; height: 20; color: "#00ff00"
 +  y: 200
 +  Behavior on y {
 +    NumberAnimation {
 +    easing.type: Easing.OutBounce
 +    duration: 200
 +  }
 +}
 +</code>
  
 +--------------------------------------------------------------
 +====== Resources ======
 +  * {{:qt-quick-for-designers-1:images.zip|}}
 +  * All source code is subject to this [[copyright header|copyright]].
qt-quick-for-designers-1/making_things_move.1371866716.txt.gz · Last modified: 2013/06/22 02:05 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki