[vlc-commits] qml: make grid item's transition smoother
Prince Gupta
git at videolan.org
Mon Jan 4 13:37:32 UTC 2021
vlc | branch: master | Prince Gupta <guptaprince8832 at gmail.com> | Thu Dec 10 00:31:12 2020 +0530| [2decf0cd95c2c82a33000799228168e5afaa2057] | committer: Pierre Lamot
qml: make grid item's transition smoother
Signed-off-by: Pierre Lamot <pierre at videolabs.io>
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=2decf0cd95c2c82a33000799228168e5afaa2057
---
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
More information about the vlc-commits
mailing list