Differences

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

--- qt-quick-for-designers-1:making_things_move [2013/06/22 01:52] – 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}}
+{{youtube>hO18NDpekp0?small}}
 ==== How to create States ====
@@ Line 149: / Line 149: @@
 ===== Transitions =====
   * State changes add dynamics, but Transitions make them pretty.
-{{youtube>8FAXKPmkfOw}}
+{{youtube>Q2E3mjlcvEk?small}}
 ==== Animating from one State to another ====
   * You just need to add a transition element to animate between states.
+  * The first state is an empty string by default.
 <file javascript animation-example.qml>
 import QtQuick 1.0
@@ Line 233: / Line 234: @@
 ==== Animation types ====
+  * There are many ways to achieve your needs.
+=== NumberAnimation ===
+  * **NumberAnimation** allows you to animate changes in a real number type property.
+  * This is the basic animation element. Most animations are about changing numbers.
+<code javascript>
+NumberAnimation {
+  properties: "x, y";
+  duration: 500;
+  easing.type: Easing.OutExpo;
+}
+</code>
+=== Sequential and Parallel Animations ===
+  * You can create collections of animations that happen in a specific order.
+    * **SequentialAnimation**:
+{{youtube>sFVifXy8mAM?small}}
+<code javascript>
+SequentialAnimation {
+  NumberAnimation {
+    target : myRect
+    properties: "x";
+    duration: 500;
+    easing.type: Easing.OutExpo;
+  }
+  NumberAnimation {
+    target : myRect
+    properties: "y";
+    duration: 500;
+    easing.type: Easing.OutExpo;
+  }
+}</code>
+    * **ParallelAnimation**
+{{youtube>A-TOPzJpRYg?small}}
+<code javascript>
+ParallelAnimation {
+  NumberAnimation {
+    target : myRect
+    properties: "x";
+    duration: 500;
+    easing.type: Easing.OutExpo;
+  }
+  NumberAnimation {
+    target : myRect
+    properties: "y";
+    duration: 500;
+    easing.type: Easing.OutExpo;
+  }
+}</code>
+=== 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]].