vlc | branch: master | Prince Gupta <guptaprince8...@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 <pie...@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 _______________________________________________ vlc-commits mailing list vlc-commits@videolan.org https://mailman.videolan.org/listinfo/vlc-commits