[vlc-devel] [PATCH 17/26] qml: use states and trasitions for animation in FocusBackground

[Prince Gupta]

---
 .../gui/qt/widgets/qml/FocusBackground.qml    | 74 ++++++++++---------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/modules/gui/qt/widgets/qml/FocusBackground.qml b/modules/gui/qt/widgets/qml/FocusBackground.qml
index 254ade910b..f703f8ab49 100644
--- a/modules/gui/qt/widgets/qml/FocusBackground.qml
+++ b/modules/gui/qt/widgets/qml/FocusBackground.qml
@@ -21,47 +21,53 @@ import QtQuick 2.0
 import "qrc:///style/"
 
 Rectangle {
+    id: root
+
     property bool active: activeFocus
     property bool selected: false
 
-    onActiveChanged: {
-        animateSelected.running = false
-        if (active) {
-            animateActive.restart()
-        } else {
-            if (selected)
-                color = VLCStyle.colors.bgHoverInactive
-            else
-                color = "transparent"
-            animateActive.running = false
-        }
-    }
+    states: [
+        State {
+            name: "selected"
+
+            PropertyChanges {
+                target: root
+                color: VLCStyle.colors.bgHoverInactive
+            }
+        },
+        State {
+            name: "active"
 
-    onSelectedChanged: {
-        if (active)
-            return
-        color = "transparent"
-        if (selected) {
-            animateSelected.restart()
-        } else {
-            animateSelected.running = false
+            PropertyChanges {
+                target: root
+                color: VLCStyle.colors.accent
+            }
+        },
+        State {
+            name: "normal"
+
+            PropertyChanges {
+                target: root
+                color: "transparent"
+            }
         }
+    ]
 
-    }
+    transitions: Transition {
+        to: "*"
 
-    color: "transparent"
-    ColorAnimation on color {
-        id: animateActive
-        running: false
-        to: VLCStyle.colors.accent
-        duration: 200
-        easing.type: Easing.OutCubic
+        ColorAnimation {
+            property: "color"
+            duration: 100
+            easing.type: Easing.InOutSine
+        }
     }
-    ColorAnimation on color {
-        id: animateSelected
-        running: false
-        to: VLCStyle.colors.bgHoverInactive
-        duration: 200
-        easing.type: Easing.OutCubic
+
+    state: {
+        if (active || activeFocus)
+            return "active"
+        if (selected)
+            return "selected"
+        return "normal"
     }
 }
-- 
2.25.1