Differences

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

--- qt-quick-for-designers-1:making_things_move [2013/06/22 02:12] – [Animation types] mithat
+++ qt-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.
   * Changing from one state to another creates dynamics.
-{{youtube>udSFM3ftOoA?small}}
+{{youtube>hO18NDpekp0?small}}
 ==== How to create States ====
@@ Line 149: / Line 149: @@
 ===== Transitions =====
   * State changes add dynamics, but Transitions make them pretty.
-{{youtube>8FAXKPmkfOw?small}}
+{{youtube>Q2E3mjlcvEk?small}}
 ==== Animating from one State to another ====
@@ Line 247: / Line 247: @@
 </code>
-=== Sequential and Parallel ===
+=== Sequential and Parallel Animations ===
   * You can create collections of animations that happen in a specific order.
-    * Sequential:
+    * **SequentialAnimation**:
-{{youtube>DAghZ6C7rUU?small}}
+{{youtube>sFVifXy8mAM?small}}
 <code javascript>
 SequentialAnimation {
@@ Line 267: / Line 267: @@
   }
 }</code>
-    * Parallel
+    * **ParallelAnimation**
-{{youtube>oidUkxuNDfY?small}}
+{{youtube>A-TOPzJpRYg?small}}
 <code javascript>
 ParallelAnimation {
@@ Line 285: / Line 285: @@
   }
 }</code>
-=== PauseAnimation ===
 === 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]].