[vlc-commits] qml: add play button color fill animation

[Fatih Uzunoglu]

vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Thu Aug  6 23:51:42 2020 +0300| [35ef054e1e72488916950744f027921374da4d6a] | committer: Pierre Lamot

qml: add play button color fill animation

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

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

 modules/gui/qt/player/qml/ControlButtons.qml | 56 +++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/modules/gui/qt/player/qml/ControlButtons.qml b/modules/gui/qt/player/qml/ControlButtons.qml
index 2224fd74c8..0320849f6f 100644
--- a/modules/gui/qt/player/qml/ControlButtons.qml
+++ b/modules/gui/qt/player/qml/ControlButtons.qml
@@ -178,6 +178,12 @@ Item{
 
             background: Item {
 
+                Gradient {
+                    id: playBtnGradient
+                    GradientStop { position: 0.0; color: "#f89a06" }
+                    GradientStop { position: 1.0; color: "#e25b01" }
+                }
+
                 MouseArea {
                     id: playBtnMouseArea
 
@@ -229,12 +235,50 @@ Item{
                     radius: (width * 0.5)
                     anchors.fill: parent
 
-                    gradient: Gradient {
-                        GradientStop { position: 0.0; color: "#f89a06" }
-                        GradientStop { position: 1.0; color: "#e25b01" }
-                    }
+                    gradient: playBtnGradient
 
-                    visible: !opacityMask.visible
+                    visible: false
+
+                    antialiasing: true
+                }
+
+                Rectangle {
+                    id: innerColorRect
+
+                    anchors.fill: parent
+                    radius: (width * 0.5)
+
+                    opacity: 0
+                    gradient: playBtnGradient
+
+                    state: "transparent"
+
+                    readonly property bool stateIndicator: (playBtn.activeFocus || playBtn.realHovered || playBtn.highlighted)
+                    states: [
+                        State {
+                            name: "opaque"
+                            when: innerColorRect.stateIndicator
+                        },
+                        State {
+                            name: "transparent"
+                            when: !innerColorRect.stateIndicator
+                        }
+                    ]
+
+                    transitions: [
+                        Transition {
+                            from: "opaque"
+                            to: "transparent"
+
+                            NumberAnimation { target: innerColorRect; properties: "opacity"; to: 0; duration: 75; easing.type: Easing.OutSine }
+                        },
+                        Transition {
+                            from: "transparent"
+                            to: "opaque"
+
+                            NumberAnimation { target: innerColorRect; properties: "opacity"; to: 1; duration: 75; easing.type: Easing.InSine }
+                        }
+                    ]
 
                     antialiasing: true
                 }
@@ -257,7 +301,7 @@ Item{
                     source: outerRect
                     maskSource: innerRect
 
-                    visible: !(playBtn.activeFocus || playBtn.realHovered || playBtn.highlighted)
+
                     antialiasing: true
                 }
             }