Map.qml: animation refactoring

- Removed parallel animations and replaced with behavior animations

diff --git a/src/qmlui/Map.qml b/src/qmlui/Map.qml
index 0649df6..370326d 100644 (file)
--- a/src/qmlui/Map.qml
+++ b/src/qmlui/Map.qml
@@ -1,8 +1,8 @@
 import Qt 4.7
 import MapPlugin 1.0
 
-Rectangle {
-    id: mapRect
+Item {
+    id: mapRoot
     clip: true
 
     property alias centerLatitude: map.centerLatitude
@@ -10,45 +10,20 @@ Rectangle {
     property alias gpsLocationLatitude: map.gpsLocationLatitude
     property alias gpsLocationLongitude: map.gpsLocationLongitude
 
-    ParallelAnimation {
-        id: panAnimation
-        running: false
-        property alias latitude: animLatitude.to
-        property alias longitude: animLongitude.to
-        PropertyAnimation {
-            id: animLatitude
-            target: mapRect
-            property: "centerLatitude"
-            from: map.centerLatitude
-            duration: 500
-            easing.type: Easing.InOutCubic
-        }
-        PropertyAnimation {
-            id: animLongitude
-            target: mapRect
-            property: "centerLongitude"
-            from: map.centerLongitude
-            duration: 500
-            easing.type: Easing.InOutCubic
-        }
-    }
-
     function panTo(latitude, longitude) {
         console.log("Map.panTo", latitude, longitude)
-        if (!panAnimation.running) {
-            panAnimation.latitude = latitude
-            panAnimation.longitude = longitude
-            panAnimation.running = true
-        }
+        map.centerLatitude = latitude
+        map.centerLongitude = longitude
     }
 
-    color: palette.window
-
     GeoMap {
         id: map
         anchors.fill: parent
         mapType: "StreetMap"
         zoomLevel: 5.0
+
+        Behavior on centerLatitude { NumberAnimation { duration: 500 } }
+        Behavior on centerLongitude { NumberAnimation { duration: 500 } }
     }
 
     Rectangle {
@@ -111,19 +86,18 @@ Rectangle {
         width: zoomIn.width
         height: zoomIn.height / 2
         radius: 10
-        opacity: 1
+        opacity: 0.5
         color: palette.button
         border.color: palette.highlight
-        border.width: 3
-
-        Text {
-            anchors.fill: parent
-            verticalAlignment: "AlignVCenter"
-            horizontalAlignment: "AlignHCenter"
-            text: map.distanceToGpsLocationText
-            color: palette.text
-            font.pixelSize: height / 3
-        }
+        border.width: 1
+    }
+    Text {
+        anchors.fill: gpsDistance
+        verticalAlignment: "AlignVCenter"
+        horizontalAlignment: "AlignHCenter"
+        text: map.distanceToGpsLocationText
+        color: palette.text
+        font.pixelSize: height / 3
     }
 
     Rectangle {
@@ -133,45 +107,17 @@ Rectangle {
         width: zoomIn.width
         height: zoomIn.height
         radius: 10
-        opacity: 1
+        opacity: 0.5
         color: palette.button
         border.color: palette.highlight
-        border.width: 3
-
-        Image {
-            source: "qrc:/res/gps_position.png"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        Image {
-             source: "qrc:/res/gps_position_dir.png"
-             anchors.verticalCenter: parent.verticalCenter
-             anchors.horizontalCenter: parent.horizontalCenter
-             rotation: map.angleToGpsLocation
-             opacity: map.distanceToGpsLocation < 1.0 ? 0.0 : 1.0
-        }
+        border.width: 1
 
         MouseArea {
             id: mouseArea3
             anchors.fill: parent
-            onClicked: ParallelAnimation {
-                PropertyAnimation {
-                    target: map
-                    property: "centerLatitude"
-                    from: map.centerLatitude
-                    to: map.gpsLocationLatitude
-                    duration: 500
-                    easing.type: Easing.InOutCubic
-                }
-                PropertyAnimation {
-                    target: map
-                    property: "centerLongitude"
-                    from: map.centerLongitude
-                    to: map.gpsLocationLongitude
-                    duration: 500
-                    easing.type: Easing.InOutCubic
-                }
+            onClicked: {
+                map.centerLatitude = map.gpsLocationLatitude
+                map.centerLongitude = map.gpsLocationLongitude
             }
         }
         states: [
@@ -187,6 +133,18 @@ Rectangle {
     }
 
     Image {
+        source: "qrc:/res/gps_position.png"
+        anchors.centerIn: gpsLocation
+    }
+
+    Image {
+         source: "qrc:/res/gps_position_dir.png"
+         anchors.centerIn: gpsLocation
+         rotation: map.angleToGpsLocation
+         opacity: map.distanceToGpsLocation < 1.0 ? 0.0 : 1.0
+    }
+
+    Image {
         id: zoomIn
         x: 5
         y: 33