Differences

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

--- qt-quick-for-designers-1:making_things_move [2013/06/22 02:21] – 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 250: / Line 250: @@
   * You can create collections of animations that happen in a specific order.
     * **SequentialAnimation**:
-{{youtube>DAghZ6C7rUU?small}}
+{{youtube>sFVifXy8mAM?small}}
 <code javascript>
 SequentialAnimation {
@@ Line 268: / Line 268: @@
 }</code>
     * **ParallelAnimation**
-{{youtube>oidUkxuNDfY?small}}
+{{youtube>A-TOPzJpRYg?small}}
 <code javascript>
 ParallelAnimation {
@@ Line 309: / Line 309: @@
 === PauseAnimation ===
   * The **PauseAnimation** allows you to add delays in your animation.
-<code>
+<code javascript>
 PauseAnimation {
   target : myRect
@@ Line 315: / Line 315: @@
 }</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]].