[vlc-devel] [PATCH 02/26] qml: make grid item's transition smoother

[Prince Gupta]

---
 modules/gui/qt/widgets/qml/GridItem.qml   | 141 ++++++++++++++++++----
 modules/gui/qt/widgets/qml/MediaCover.qml |   1 +
 2 files changed, 117 insertions(+), 25 deletions(-)

diff --git a/modules/gui/qt/widgets/qml/GridItem.qml b/modules/gui/qt/widgets/qml/GridItem.qml
index 52f74982d5..fbfe833688 100644
--- a/modules/gui/qt/widgets/qml/GridItem.qml
+++ b/modules/gui/qt/widgets/qml/GridItem.qml
@@ -74,13 +74,21 @@ FocusScope {
             name: "unselected"
 
             PropertyChanges {
-                target: shadow
-                primaryVerticalOffset: VLCStyle.dp(6, VLCStyle.scale)
-                primaryRadius: VLCStyle.dp(14, VLCStyle.scale)
-                primarySamples: 1 + VLCStyle.dp(14, VLCStyle.scale) * 2
-                secondaryVerticalOffset: VLCStyle.dp(1, VLCStyle.scale)
-                secondaryRadius: VLCStyle.dp(3, VLCStyle.scale)
-                secondarySamples: 1 + VLCStyle.dp(3, VLCStyle.scale) * 2
+                target: selectedShadow
+                opacity: 0
+                visible: false
+            }
+
+            PropertyChanges {
+                target: unselectedShadow
+                opacity: 1
+                visible: true
+            }
+
+            PropertyChanges {
+                target: picture
+                playCoverOpacity: 0
+                playCoverVisible: false
             }
 
             PropertyChanges {
@@ -92,13 +100,21 @@ FocusScope {
             name: "selected"
 
             PropertyChanges {
-                target: shadow
-                primaryVerticalOffset: VLCStyle.dp(32, VLCStyle.scale)
-                primaryRadius: VLCStyle.dp(72, VLCStyle.scale)
-                primarySamples: 1 + VLCStyle.dp(72, VLCStyle.scale) * 2
-                secondaryVerticalOffset: VLCStyle.dp(6, VLCStyle.scale)
-                secondaryRadius: VLCStyle.dp(8, VLCStyle.scale)
-                secondarySamples: 1 + VLCStyle.dp(8, VLCStyle.scale) * 2
+                target: selectedShadow
+                opacity: 1
+                visible: true
+            }
+
+            PropertyChanges {
+                target: unselectedShadow
+                opacity: 0
+                visible: false
+            }
+
+            PropertyChanges {
+                target: picture
+                playCoverOpacity: 1
+                playCoverVisible: true
             }
 
             PropertyChanges {
@@ -108,21 +124,72 @@ FocusScope {
         }
     ]
 
-    transitions: Transition {
-        to: "*"
+    transitions: [
+        Transition {
+            from: "unselected"
+            to: "selected"
+            // reversible: true // doesn't work
+
+            SequentialAnimation {
+                PropertyAction {
+                    targets: [picture, selectedShadow]
+                    properties: "playCoverVisible,visible"
+                }
+
+                ParallelAnimation {
+                    NumberAnimation {
+                        properties: "opacity,playCoverOpacity"
+                        duration: 240
+                        easing.type: Easing.InSine
+                    }
+
+                    SmoothedAnimation {
+                        target: root
+                        property: "_newIndicatorMedian"
+                        duration: 240
+                        easing.type: Easing.InSine
+                    }
+                }
 
-        SequentialAnimation {
-            PropertyAction {
-                properties: "primarySamples,secondarySamples"
+                PropertyAction {
+                    target: unselectedShadow
+                    property: "visible"
+                }
             }
+        },
+
+        Transition {
+            from: "selected"
+            to: "unselected"
+
+            SequentialAnimation {
+                PropertyAction {
+                    target: unselectedShadow
+                    property: "visible"
+                }
+
+                ParallelAnimation {
+                    NumberAnimation {
+                        properties: "opacity,playCoverOpacity"
+                        duration: 200
+                        easing.type: Easing.OutSine
+                    }
+
+                    SmoothedAnimation {
+                        target: root
+                        duration: 200
+                        property: "_newIndicatorMedian"
+                        easing.type: Easing.OutSine
+                    }
+                }
 
-            SmoothedAnimation {
-                duration: 64
-                properties: "primaryVerticalOffset,primaryRadius,secondaryVerticalOffset,secondaryRadius,_newIndicatorMedian"
-                easing.type: Easing.InOutSine
+                PropertyAction {
+                    targets: [picture, selectedShadow]
+                    properties: "playCoverVisible,visible"
+                }
             }
         }
-    }
+    ]
 
     MouseArea {
         id: mouseArea
@@ -201,11 +268,35 @@ FocusScope {
                 color: VLCStyle.colors.bg
             }
 
+            // animating shadows properties are expensive and not smooth
+            // thus we use two different shadows for states "selected" and "unselected"
+            // and animate their opacity on state changes to get better animation
             CoverShadow {
-                id: shadow
+                id: unselectedShadow
 
+                anchors.fill: baseRect
                 source: baseRect
+                cached: true
+                secondaryVerticalOffset: VLCStyle.dp(1, VLCStyle.scale)
+                secondaryRadius: VLCStyle.dp(2, VLCStyle.scale)
+                secondarySamples: 1 + VLCStyle.dp(2, VLCStyle.scale) * 2
+                primaryVerticalOffset: VLCStyle.dp(4, VLCStyle.scale)
+                primaryRadius: VLCStyle.dp(9, VLCStyle.scale)
+                primarySamples: 1 + VLCStyle.dp(9, VLCStyle.scale) * 2
+            }
+
+            CoverShadow {
+                id: selectedShadow
+
                 anchors.fill: baseRect
+                source: baseRect
+                cached: true
+                secondaryVerticalOffset: VLCStyle.dp(6, VLCStyle.scale)
+                secondaryRadius: VLCStyle.dp(18, VLCStyle.scale)
+                secondarySamples: 1 + VLCStyle.dp(18, VLCStyle.scale) * 2
+                primaryVerticalOffset: VLCStyle.dp(32, VLCStyle.scale)
+                primaryRadius: VLCStyle.dp(72, VLCStyle.scale)
+                primarySamples: 1 + VLCStyle.dp(72, VLCStyle.scale) * 2
             }
 
             Column {
diff --git a/modules/gui/qt/widgets/qml/MediaCover.qml b/modules/gui/qt/widgets/qml/MediaCover.qml
index b3c6e18513..2a2ff8e80d 100644
--- a/modules/gui/qt/widgets/qml/MediaCover.qml
+++ b/modules/gui/qt/widgets/qml/MediaCover.qml
@@ -28,6 +28,7 @@ Widgets.RoundImage {
 
     property var labels: []
     property alias progress: progressBar.value
+    property alias playCoverOpacity: playCover.opacity
     property alias playCoverVisible: playCover.visible
     property alias playCoverOnlyBorders: playCover.onlyBorders
     property alias playIconSize: playCover.iconSize
-- 
2.25.1