[slider] Trumpet up with animation

locusf · Oct 11, 2013 · 60da796 · 60da796
1 parent d5974ac
commit 60da796
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/examples/touch/content/SliderPage.qml b/examples/touch/content/SliderPage.qml
@@ -66,7 +66,7 @@ Item {
         }
         Slider {
             anchors.margins: 20
-            value: 0.8
+            value: 0.2
             enabled: false
         }
 

diff --git a/src/styles/SliderStyle.qml b/src/styles/SliderStyle.qml
@@ -27,24 +27,38 @@ SliderStyle {
     }
 
     handle:
-        Image {
-        source: control.pressed ? "images/slider-trumpet-stretch.png" : "images/slider-trumpet.png"
-        z: 0
-        visible: control.enabled
+        Rectangle {
+            width: control.value < 0.8 ? (control.pressed ? 62 : 80) : 43
+            height: control.value < 0.8 ? 32 : (55*control.value)
+            color: "transparent"
             Image {
-                anchors.horizontalCenter: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                id: ball
-                source: "images/slider-ball.png"
-                z: 1
+                id:trumpet
+                height: control.value < 0.8 ? 32 : (60*control.value)
+                source: control.value < 0.8 ? (control.pressed ? "images/slider-trumpet-stretch.png" : "images/slider-trumpet.png") : "images/slider-trumpet-up.png"
+                z: 0
                 visible: control.enabled
-                Text {
-                    anchors.centerIn: parent
-                    text: parseInt(control.value*100)
-                    font.pixelSize: 25
-                    color: Theme.textField.selectedTextColor
-                    z: 2
+            }
+            Rectangle {
+                anchors.horizontalCenter: control.value < 0.8 ? parent.right : parent.horizontalCenter
+                anchors.verticalCenter: control.value < 0.8 ? parent.verticalCenter : parent.top
+                width: ball.width
+                height: ball.height
+                color: "transparent"
+                Image {
+                    anchors.horizontalCenter: control.value < 0.8 ? parent.right : parent.horizontalCenter
+                    anchors.verticalCenter: control.value < 0.8 ? parent.verticalCenter : parent.top
+                    id: ball
+                    source: "images/slider-ball.png"
+                    z: 1
                     visible: control.enabled
+                    Text {
+                        anchors.centerIn: parent
+                        text: parseInt(control.value*100)
+                        font.pixelSize: 25
+                        color: Theme.textField.selectedTextColor
+                        z: 2
+                        visible: control.enabled
+                    }
                 }
             }
         }