[vlc-commits] qml: use states and trasitions for animation in FocusBackground

[Prince Gupta]

vlc | branch: master | Prince Gupta <guptaprince8832 at gmail.com> | Mon Dec 14 22:23:59 2020 +0530| [73af8659d673c506904e5e2a323edb9ee287d783] | committer: Pierre Lamot

qml: use states and trasitions for animation in FocusBackground

Signed-off-by: Pierre Lamot <pierre at videolabs.io>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=73af8659d673c506904e5e2a323edb9ee287d783
---

 modules/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"
     }
 }