Differences

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

--- qt-quick-for-designers-1:making_things_move [2013/06/22 00:16] – [How to create States] mithat
+++ qt-quick-for-designers-1:making_things_move [2013/07/06 22:33] – mithat
@@ Line 3: / Line 3: @@
 ===== States =====
   * The State element defines configurations of objects and properties.
-  * It is a non-visual element.
+  * It is a non-visual element (typically) has visual impact.
+  * Changing from one state to another creates dynamics.
+{{youtube>hO18NDpekp0?small}}
 ==== How to create States ====
   * Bind ''states'' to a list of States.
-  * List is specified using JSON array syntax.
+    * The list is specified using JSON array syntax.
 <code javascript>
 Item {
@@ Line 32: / Line 34: @@
 }</code>
   * States have names (in quotes), not ids.
-  * You can create as many States as you need for an object:
+  * You can create as many states as you need for an object.
+    * All properties not expressed will be the same as the base state.
 <code javascript>
 ...
@@ Line 52: / Line 55: @@
   ]
 ...</code>
+  * Executing a function to set a different state:
+<code javascript>
+Image {
+  id: myButton
+  source: "images/button.png"
+  y: 50; x: 10
-==== Why create States? ====
+  MouseArea {
+    anchors.fill: parent
+    onClicked: myItem.state = 'leftXMove'
+  }
+}</code>
+    * Using “when” method. It will change the property but inside the state element:
+<code javascript>
+Image {
+  id: myButton
+  source: "images/button.png"
+  y: 50; x: 10
+  MouseArea {
+    id:myButtonMouseArea
+    anchors.fill: parent
+  }
+}
+states: [
+  State {
+    name: "leftXMove"
+    when: myButtonMouseArea.clicked
+    PropertyChanges {
+      target: myItem
+      x: 200
+    }
+  }
+]</code>
+  * Complete example:
+<file javascript state-example.qml>
+import QtQuick 1.0
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    Image {
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        x: 10
+        y: 50
+        source: "images/spaceship.png"
+    }
+    Image {
+        id: myButton
+        source: "images/button.png"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        Text {
+            id: myButtonLabel
+            text: "PRESS"
+            color: "white"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 6
+        }
+        MouseArea {
+           anchors.fill: parent
+           onClicked:{
+               myItem.state = "rightBottom"
+           }
+       }
+    }
+   states: [
+         State {
+             name: "rightBottom"
+             PropertyChanges {
+                 target: spaceship
+                 x: 250
+                 y: 200
+             }
+         }
+    ]
+}</file>
 ===== Transitions =====
+  * State changes add dynamics, but Transitions make them pretty.
+{{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
+Item {
+    id: myItem
+    width: 400
+    height: 400
+    Image {
+        source: "images/background.png"
+    }
+    Image {
+        id: spaceship
+        x: 10
+        y: 50
+        source: "images/spaceship.png"
+    }
+    Image {
+        id: myButton
+        source: "images/button.png"
+        anchors.horizontalCenter: myItem.horizontalCenter
+        anchors.bottom: myItem.bottom
+        anchors.bottomMargin: 20
+        Text {
+            id: myButtonLabel
+            text: "PRESS"
+            color: "white"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 6
+        }
+        MouseArea {
+           anchors.fill: parent
+           onClicked:{
+               myItem.state = "rightBottom"
+           }
+       }
+    }
+   states: [
+         State {
+             name: "rightBottom"
+             PropertyChanges {
+                 target: spaceship
+                 x: 250
+                 y: 200
+             }
+         }
+    ]
+    transitions: [
+         Transition {
+             from: ""
+             to: "rightBottom"
+             NumberAnimation {
+                 properties: "x,y"
+                 duration: 500
+                 easing.type: Easing.OutExpo
+             }
+         }
+    ]
+}
+</file>
 === Main transition and animation elements ===
-  * **from** and **to**
+  * ''from'' and ''to''
     * the element’s initial and final state string
-  * **target**
+  * ''target''
     * the animated element’s id
-  * **properties**
+  * ''properties''
     * the property that you want to change during the animation. This can be an array of properties
-  * **easing.type**
+  * ''easing.type''
     * choose an easing curve to add a specific effect to your animation
 ==== 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|}}