More widget animations
authorKevin Krammer <kevin.krammer@kdab.com>
Mon, 19 Nov 2012 12:38:56 +0000 (13:38 +0100)
committerKevin Krammer <kevin.krammer@kdab.com>
Mon, 19 Nov 2012 12:38:56 +0000 (13:38 +0100)
examples/animation.qml

index 5d09c1c..eee0051 100644 (file)
@@ -22,29 +22,165 @@ import QtQuick 1.0
 import QtGui 1.0
 
 Widget {
-  VBoxLayout {
+  geometry: Qt.rect( x, y, 600, 200 )
+
+  GridLayout {
+
     PushButton {
       id: button
-      text: anim.running ? qsTr("Stop animation") : qsTr("Start animation")
+      text: anim.running ? qsTr( "Stop animation" ) : qsTr( "Start animation" )
       checkable: true
+
+      GridLayout.row: 0
+      GridLayout.column: 0
+      GridLayout.columnSpan: 3
+    }
+
+    PushButton {
+      id: pulsingButton
+      text: "Pulsing"
+
+      property int delta: 0;
+      property variant origGeometry: geometry;
+
+      geometry: Qt.rect( origGeometry.x - delta, origGeometry.y - delta,
+                         origGeometry.width + 2*delta, origGeometry.height + 2*delta )
+
+
+      GridLayout.row: 1
+      GridLayout.column: 1
+
+      SequentialAnimation {
+        running: button.checked
+        loops: Animation.Infinite
+        onRunningChanged: {
+          if (running) {
+            // save geometry at begin of animation
+            pulsingButton.origGeometry = pulsingButton.geometry;
+          }
+        }
+        NumberAnimation {
+          target: pulsingButton
+          property: "delta"
+          from: 0
+          to: 10
+          duration: 500
+          easing.type: Easing.InOutQuad
+        }
+        NumberAnimation {
+          target: pulsingButton
+          property: "delta"
+          from: 10
+          to: 0
+          duration: 500
+          easing.type: Easing.InOutQuad
+        }
+      }
+    }
+
+    PushButton {
+      id: bouncingButton
+      text: "Bouncing"
+
+      property int delta: 0;
+      property variant origGeometry: geometry;
+
+      geometry: Qt.rect( origGeometry.x, origGeometry.y - delta,
+                         origGeometry.width, origGeometry.height )
+
+      GridLayout.row: 1
+      GridLayout.column: 2
+
+      SequentialAnimation {
+        running: button.checked
+        loops: Animation.Infinite
+        onRunningChanged: {
+          if (running) {
+            // save geometry at begin of animation
+            bouncingButton.origGeometry = bouncingButton.geometry;
+          }
+        }
+        NumberAnimation {
+          target: bouncingButton
+          property: "delta"
+          from: 0
+          to: 50
+          duration: 500
+          easing.type: Easing.OutQuad
+        }
+        NumberAnimation {
+          target: bouncingButton
+          property: "delta"
+          from: 50
+          to: 0
+          duration: 500
+          easing.type: Easing.OutBounce
+        }
+      }
     }
 
     Slider {
       id: slider
 
+      orientation: Qt.Horizontal
       minimum: 0
       maximum: 100
-      PropertyAnimation {
+
+      GridLayout.row: 2
+      GridLayout.column: 0
+      GridLayout.columnSpan: 3
+
+      SequentialAnimation {
         id: anim
+        running: button.checked
+        loops: Animation.Infinite
+
+        PropertyAnimation {
+          target: slider
+          property: "value"
+          from: slider.minimum
+          to: slider.maximum
+          duration: 1500
+          easing.type: Easing.InOutQuad
+        }
+        PropertyAnimation {
+          target: slider
+          property: "value"
+          from: slider.maximum
+          to: slider.minimum
+          duration: 1500
+          easing.type: Easing.InOutQuad
+        }
+      }
+    }
+
+    Label {
+      id: marqueeLabel
 
+      GridLayout.row: 3
+      GridLayout.column: 0
+      GridLayout.columnSpan: 3
+
+      SequentialAnimation {
         running: button.checked
-        target: slider
-        property: "value"
-        from: 0
-        to: 100
-        duration: 3000
-        easing.type: Easing.InOutBounce
         loops: Animation.Infinite
+        onRunningChanged: {
+          if (running) {
+            marqueeLabel.maximumWidth = slider.width;
+            marqueeLabel.text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
+          }
+        }
+
+        PauseAnimation {
+          duration: 3000
+        }
+        NumberAnimation {
+          target: marqueeLabel
+          property: "indent"
+          from: marqueeLabel.width
+          to: 0
+          duration: 3000
+        }
       }
     }
   }