From 6e4321b650d26145c9828f75694e8c8d038b532a Mon Sep 17 00:00:00 2001 From: Michail Vourlakos Date: Mon, 30 Oct 2017 16:54:52 +0200 Subject: [PATCH] improve attention bouncing experience --add more animation phases in order to provide a better experience for the inAttention bouncing animation --add visual debuggers for the spacers and padders needed for the bouncing animation --- .../package/contents/ui/task/TaskDelegate.qml | 57 ++++++++++--------- .../package/contents/ui/task/TaskIconItem.qml | 54 +++++++++++------- .../package/contents/ui/task/TaskWrapper.qml | 45 ++++++++------- .../animations/TaskFastRestoreAnimation.qml | 37 +++++------- .../animations/TaskNewWindowAnimation.qml | 5 +- .../animations/TaskRealRemovalAnimation.qml | 2 +- .../TaskRemoveWindowFromGroupAnimation.qml | 4 ++ .../task/animations/TaskRestoreAnimation.qml | 4 ++ 8 files changed, 115 insertions(+), 93 deletions(-) diff --git a/plasmoid/package/contents/ui/task/TaskDelegate.qml b/plasmoid/package/contents/ui/task/TaskDelegate.qml index b7c896516..5a47070f6 100644 --- a/plasmoid/package/contents/ui/task/TaskDelegate.qml +++ b/plasmoid/package/contents/ui/task/TaskDelegate.qml @@ -79,7 +79,7 @@ MouseArea{ } acceptedButtons: Qt.LeftButton | Qt.MidButton | Qt.RightButton - hoverEnabled: visible && (inAnimation !== true) && (!IsStartup) && (!root.taskInAnimation) + hoverEnabled: visible && (!inAnimation) && (!IsStartup) && (!root.taskInAnimation) && (!root.editMode || root.debugLocation)&&(!inBouncingAnimation) && !isSeparator // hoverEnabled: false //opacity : isSeparator && (hiddenSpacerLeft.neighbourSeparator || hiddenSpacerRight.neighbourSeparator) ? 0 : 1 @@ -95,6 +95,7 @@ MouseArea{ property bool inAttentionAnimation: false property bool inBlockingAnimation: false property bool inBouncingAnimation: false + property bool inFastRestoreAnimation: false property bool inMimicParabolicAnimation: false property real mimicParabolicScale: -1 property bool inPopup: false @@ -309,6 +310,7 @@ MouseArea{ height: root.vertical ? nHiddenSize : wrapper.height visible: (index === 0) || (separatorSpace > 0) || mainItemContainer.inAttentionAnimation + || mainItemContainer.inFastRestoreAnimation || mainItemContainer.inMimicParabolicAnimation property bool neighbourSeparator: false //in case there is a neighbour separator, lastValidIndex is used in order to protect from false @@ -321,7 +323,7 @@ MouseArea{ (2+root.iconMargin/2) : 0 property real nHiddenSize: { - if (!inAttentionAnimation) { + if (!inAttentionAnimation && !inMimicParabolicAnimation && !inFastRestoreAnimation) { return (nScale > 0) ? (mainItemContainer.spacersMaxSize * nScale) + separatorSpace : separatorSpace; } else { return (nScale > 0) ? (root.iconSize * nScale) + separatorSpace : separatorSpace; @@ -357,27 +359,27 @@ MouseArea{ Component.onCompleted: hiddenSpacerLeft.updateNeighbour(); - Behavior on nScale { + /*Behavior on nScale { enabled: !root.globalDirectRender NumberAnimation { duration: 3 * mainItemContainer.animationTime } } - /*Behavior on nScale { + Behavior on nScale { enabled: root.globalDirectRender NumberAnimation { duration: root.directRenderAnimationTime } }*/ - Behavior on nHiddenSize { - enabled: !root.globalDirectRender || mainItemContainer.inMimicParabolicAnimation + Behavior on separatorSpace { + enabled: !root.globalDirectRender NumberAnimation { duration: 3 * mainItemContainer.animationTime } } - Behavior on nHiddenSize { - enabled: root.globalDirectRender && !mainItemContainer.inMimicParabolicAnimation + Behavior on separatorSpace { + enabled: root.globalDirectRender NumberAnimation { duration: root.directRenderAnimationTime } } - /* Rectangle{ + /*Rectangle{ width: !root.vertical ? parent.width : 1 height: !root.vertical ? 1 : parent.height x: root.vertical ? parent.width /2 : 0 @@ -385,7 +387,7 @@ MouseArea{ border.width: 1 border.color: "red" color: "transparent" - } */ + }*/ } TaskWrapper{ id: wrapper } @@ -398,6 +400,7 @@ MouseArea{ height: root.vertical ? nHiddenSize : wrapper.height visible: (index === icList.count - 1) || (separatorSpace > 0) || mainItemContainer.inAttentionAnimation + || mainItemContainer.inFastRestoreAnimation || mainItemContainer.inMimicParabolicAnimation property bool neighbourSeparator: false //in case there is a neighbour separator, lastValidIndex is used in order to protect from false @@ -410,7 +413,7 @@ MouseArea{ (2+root.iconMargin/2) : 0 property real nHiddenSize: { - if (!inAttentionAnimation) { + if (!inAttentionAnimation && !inMimicParabolicAnimation && !inFastRestoreAnimation) { return (nScale > 0) ? (mainItemContainer.spacersMaxSize * nScale) + separatorSpace : separatorSpace; } else { return (nScale > 0) ? (root.iconSize * nScale) + separatorSpace : separatorSpace; @@ -448,7 +451,7 @@ MouseArea{ Component.onCompleted: hiddenSpacerRight.updateNeighbour(); - Behavior on nScale { + /*Behavior on nScale { enabled: !root.globalDirectRender NumberAnimation { duration: 3 * mainItemContainer.animationTime } } @@ -456,19 +459,19 @@ MouseArea{ Behavior on nScale { enabled: root.globalDirectRender NumberAnimation { duration: root.directRenderAnimationTime } - } + }*/ - Behavior on nHiddenSize { - enabled: !root.globalDirectRender || mainItemContainer.inMimicParabolicAnimation + Behavior on separatorSpace { + enabled: !root.globalDirectRender NumberAnimation { duration: 3 * mainItemContainer.animationTime } } - Behavior on nHiddenSize { - enabled: root.globalDirectRender && !mainItemContainer.inMimicParabolicAnimation + Behavior on separatorSpace { + enabled: root.globalDirectRender NumberAnimation { duration: root.directRenderAnimationTime } } - /* Rectangle{ + /*Rectangle{ width: !root.vertical ? parent.width : 1 height: !root.vertical ? 1 : parent.height x: root.vertical ? parent.width /2 : 0 @@ -476,7 +479,7 @@ MouseArea{ border.width: 1 border.color: "red" color: "transparent" - } */ + }*/ } }// Flow with hidden spacers inside @@ -524,7 +527,7 @@ MouseArea{ wrapper.mScale = 1; }*/ - if (distanceFromHovered >= 1) { + if (distanceFromHovered >= 1 && !inAttentionAnimation && !inFastRestoreAnimation && !inMimicParabolicAnimation) { hiddenSpacerLeft.nScale = 0; hiddenSpacerRight.nScale = 0; } @@ -632,7 +635,7 @@ MouseArea{ } onPositionChanged: { - if (root.editMode || (inBlockingAnimation && !inAttentionAnimation)) + if (root.editMode || (inBlockingAnimation && !(inAttentionAnimation||inFastRestoreAnimation||inMimicParabolicAnimation))) return; if(!root.latteDock) @@ -877,7 +880,7 @@ MouseArea{ if (root.globalDirectRender) wrapper.mScale = 1; - else + else if (!inAttentionAnimation && !inFastRestoreAnimation && !inMimicParabolicAnimation) restoreAnimation.start(); } @@ -1091,13 +1094,11 @@ MouseArea{ function slotMimicEnterForParabolic(){ if (containsMouse) { - if (!inBlockingAnimation || inAttentionAnimation) { - if (inMimicParabolicAnimation) { - mimicParabolicScale = root.zoomFactor; - } - - wrapper.calculateScales(icList.currentSpot); + if (inMimicParabolicAnimation) { + mimicParabolicScale = root.zoomFactor; } + + wrapper.calculateScales(icList.currentSpot); } } diff --git a/plasmoid/package/contents/ui/task/TaskIconItem.qml b/plasmoid/package/contents/ui/task/TaskIconItem.qml index 32cec3050..b0e7539d1 100644 --- a/plasmoid/package/contents/ui/task/TaskIconItem.qml +++ b/plasmoid/package/contents/ui/task/TaskIconItem.qml @@ -68,7 +68,7 @@ Item{ property Item titleTooltipVisualParent: titleTooltipParent - /* Rectangle{ + /* Rectangle{ anchors.fill: parent border.width: 1 border.color: "green" @@ -140,22 +140,38 @@ Item{ Latte.IconItem{ id: iconImageBuffer - anchors.rightMargin: root.position === PlasmaCore.Types.RightPositioned - || (root.position === PlasmaCore.Types.LeftPositioned - && mainItemContainer.inAddRemoveAnimation) - ? root.thickMarginBase : 0 - anchors.leftMargin: root.position === PlasmaCore.Types.LeftPositioned - || (root.position === PlasmaCore.Types.RightPositioned - && mainItemContainer.inAddRemoveAnimation) - ? root.thickMarginBase : 0 - anchors.topMargin: root.position === PlasmaCore.Types.TopPositioned - || (root.position === PlasmaCore.Types.BottomPositioned - && mainItemContainer.inAddRemoveAnimation) - ? root.thickMarginBase : 0 - anchors.bottomMargin: root.position === PlasmaCore.Types.BottomPositioned - || (root.position === PlasmaCore.Types.TopPositioned - && mainItemContainer.inAddRemoveAnimation) - ? root.thickMarginBase : 0 + anchors.rightMargin:{ + if (root.position === PlasmaCore.Types.RightPositioned) + return root.thickMarginBase; + else if (root.position === PlasmaCore.Types.LeftPositioned) + return wrapper.mScale * root.thickMarginHigh; + else + return 0; + } + anchors.leftMargin: { + if (root.position === PlasmaCore.Types.LeftPositioned) + return root.thickMarginBase; + else if (root.position === PlasmaCore.Types.RightPositioned) + return wrapper.mScale * root.thickMarginHigh; + else + return 0; + } + anchors.topMargin: { + if (root.position === PlasmaCore.Types.TopPositioned) + return root.thickMarginBase; + else if (root.position === PlasmaCore.Types.BottomPositioned) + return wrapper.mScale * root.thickMarginHigh; + else + return 0; + } + anchors.bottomMargin:{ + if (root.position === PlasmaCore.Types.BottomPositioned) + return root.thickMarginBase; + else if (root.position === PlasmaCore.Types.TopPositioned) + return wrapper.mScale * root.thickMarginHigh; + else + return 0; + } width: Math.round(newTempSize) //+ 2*centralItem.shadowSize height: Math.round(width) @@ -199,7 +215,7 @@ Item{ states: [ State{ name: "*" - when: !launcherAnimation.running && !newWindowAnimation.running && !mainItemContainer.inAddRemoveAnimation + when: !launcherAnimation.running && !newWindowAnimation.running && !mainItemContainer.inAddRemoveAnimation && !fastRestoreAnimation.running AnchorChanges{ target:iconImageBuffer; @@ -229,7 +245,7 @@ Item{ State{ name: "animating" - when: (launcherAnimation.running || newWindowAnimation.running) && !mainItemContainer.inAddRemoveAnimation + when: (launcherAnimation.running || newWindowAnimation.running || fastRestoreAnimation.running) && !mainItemContainer.inAddRemoveAnimation AnchorChanges{ target:iconImageBuffer; diff --git a/plasmoid/package/contents/ui/task/TaskWrapper.qml b/plasmoid/package/contents/ui/task/TaskWrapper.qml index 86673e0ad..3c8a9ed1e 100644 --- a/plasmoid/package/contents/ui/task/TaskWrapper.qml +++ b/plasmoid/package/contents/ui/task/TaskWrapper.qml @@ -156,7 +156,7 @@ Item{ Loader{ id: firstPadding - active: secondIndicator.active && mainItemContainer.inAttentionAnimation + active: secondIndicator.active && (mainItemContainer.inAttentionAnimation || mainItemContainer.inFastRestoreAnimation) visible: active sourceComponent: Component{ @@ -164,7 +164,7 @@ Item{ width: root.vertical ? wrapper.maxThickness-wrapper.width : 1 height: !root.vertical ? wrapper.maxThickness-wrapper.height : 1 - /* Rectangle{ + /* Rectangle{ width: !root.vertical ? 1 : parent.width height: !root.vertical ? parent.height : 1 x: !root.vertical ? wrapper.width /2 : 0 @@ -183,7 +183,7 @@ Item{ Loader{ id: secondPadding - active: firstIndicator.active && mainItemContainer.inAttentionAnimation + active: firstIndicator.active && (mainItemContainer.inAttentionAnimation || mainItemContainer.inFastRestoreAnimation) visible: active sourceComponent: Component{ @@ -191,7 +191,7 @@ Item{ width: root.vertical ? wrapper.maxThickness-wrapper.width : 1 height: !root.vertical ? wrapper.maxThickness-wrapper.height : 1 - /* Rectangle{ + /*Rectangle{ width: !root.vertical ? 1 : parent.width height: !root.vertical ? parent.height : 1 x: !root.vertical ? wrapper.width/2 : 0 @@ -199,7 +199,7 @@ Item{ border.width: 1 border.color: "blue" color: "transparent" - } */ + }*/ } } } @@ -234,12 +234,14 @@ Item{ var scales = parabolicManager.applyParabolicEffect(index, currentMousePosition, center); //Left hiddenSpacer - if(((index === 0 )&&(icList.count > 1)) && !root.disableLeftSpacer){ + if(((index === 0 )&&(icList.count > 1)) && !root.disableLeftSpacer + && !inMimicParabolicAnimation && !inFastRestoreAnimation){ hiddenSpacerLeft.nScale = scales.leftScale - 1; } //Right hiddenSpacer - if(((index === icList.count - 1 )&&(icList.count>1)) && (!root.disableRightSpacer)){ + if(((index === icList.count - 1 )&&(icList.count>1)) && !root.disableRightSpacer + && !inMimicParabolicAnimation && !inFastRestoreAnimation){ hiddenSpacerRight.nScale = scales.rightScale - 1; } @@ -249,20 +251,14 @@ Item{ } //nScale - function signalUpdateScale(nIndex, nScale, step){ - if ((index === nIndex)&&(mainItemContainer.hoverEnabled)&&(waitingLaunchers.length===0)){ - /*if (nScale !== 1){ - if (isSeparator){ - console.log("WRONG TASK SIGNAL for internal separator at pos:"+ index +" and zoom:"+nScale); - } - }*/ - + if ((index === nIndex)&&(mainItemContainer.hoverEnabled || inMimicParabolicAnimation)&&(waitingLaunchers.length===0)){ if (mainItemContainer.inAttentionAnimation) { var subSpacerScale = (nScale-1)/2; + hiddenSpacerLeft.nScale = subSpacerScale; hiddenSpacerRight.nScale = subSpacerScale; - } else if (!inBlockingAnimation) { + } else if (!inBlockingAnimation || mainItemContainer.inMimicParabolicAnimation) { var newScale = 1; if(nScale >= 0) { @@ -277,7 +273,6 @@ Item{ mScale = newScale; } - // console.log(index+ ", "+mScale); } } @@ -293,12 +288,20 @@ Item{ root.startEnableDirectRenderTimer(); } - if (inMimicParabolicAnimation && mScale >= mimicParabolicScale){ - inMimicParabolicAnimation = false; - mimicParabolicScale = -1; + if (inMimicParabolicAnimation){ + if (mScale >= mimicParabolicScale) { + inMimicParabolicAnimation = false; + inAnimation = false; + inBlockingAnimation = false; + mimicParabolicScale = -1; + } else { + var tempScale = (root.zoomFactor - mScale) / 2; + + hiddenSpacerLeft.nScale = tempScale; + hiddenSpacerRight.nScale = tempScale; + } } - if ((mScale > 1) && !mainItemContainer.isZoomed) { mainItemContainer.isZoomed = true; root.signalAnimationsNeedBothAxis(1); diff --git a/plasmoid/package/contents/ui/task/animations/TaskFastRestoreAnimation.qml b/plasmoid/package/contents/ui/task/animations/TaskFastRestoreAnimation.qml index 28bc3dc0c..4b9e56f43 100644 --- a/plasmoid/package/contents/ui/task/animations/TaskFastRestoreAnimation.qml +++ b/plasmoid/package/contents/ui/task/animations/TaskFastRestoreAnimation.qml @@ -30,7 +30,8 @@ SequentialAnimation{ ScriptAction { script: { - mainItemContainer.inMimicParabolicAnimation = true; + mainItemContainer.inFastRestoreAnimation = true; + mainItemContainer.inBlockingAnimation = true; } } @@ -58,33 +59,25 @@ SequentialAnimation{ duration: fastRestoreAnimation.speed easing.type: Easing.Linear } + } - PropertyAnimation { - target: hiddenSpacerLeft - property: "nScale" - to: 0 - duration: fastRestoreAnimation.speed - easing.type: Easing.Linear + onStopped: { + if (!mainItemContainer.containsMouse && !parabolicManager.neighbourIsHovered(itemIndex)) { + mainItemContainer.inMimicParabolicAnimation = false; + } else { + mainItemContainer.inMimicParabolicAnimation = true; } - PropertyAnimation { - target: hiddenSpacerRight - property: "nScale" - to: 0 - duration: fastRestoreAnimation.speed - easing.type: Easing.Linear + newWindowAnimation.stop(); + + if (!mainItemContainer.containsMouse && !parabolicManager.neighbourIsHovered(itemIndex)) { + mainItemContainer.inBlockingAnimation = false; } - } - onStopped: { - if (newWindowAnimation.paused){ - if (!mainItemContainer.containsMouse && !parabolicManager.neighbourIsHovered(itemIndex)) { - mainItemContainer.inMimicParabolicAnimation = false; - } + root.mimicEnterForParabolic(); - newWindowAnimation.stop(); - root.mimicEnterForParabolic(); - } + mainItemContainer.inFastRestoreAnimation = false; + // console.log("Fast Restore Animation ended..."); } } diff --git a/plasmoid/package/contents/ui/task/animations/TaskNewWindowAnimation.qml b/plasmoid/package/contents/ui/task/animations/TaskNewWindowAnimation.qml index e56788343..0bebed868 100644 --- a/plasmoid/package/contents/ui/task/animations/TaskNewWindowAnimation.qml +++ b/plasmoid/package/contents/ui/task/animations/TaskNewWindowAnimation.qml @@ -44,7 +44,7 @@ SequentialAnimation{ duration: newWindowAnimation.speed easing.type: Easing.OutQuad - property real thickPercentage: mainItemContainer.inAttentionAnimation ? 0.9 : 0.6 + property real thickPercentage: mainItemContainer.inAttentionAnimation ? 1 : 0.6 } PropertyAnimation { @@ -118,7 +118,7 @@ SequentialAnimation{ function bounceNewWindow(){ //if (isDemandingAttention && !root.dockIsHidden && (root.zoomFactor > 1)){ - if (!root.dockIsHidden && (root.zoomFactor > 1) && (root.durationTime>0)){ + if (!root.dockIsHidden && (root.zoomFactor > 1) && (root.durationTime>0) && !root.reverseLinesPositionasfa){ newWindowAnimation.init(); start(); } @@ -129,6 +129,7 @@ SequentialAnimation{ } Component.onDestruction: { + mainItemContainer.groupWindowAdded.disconnect(bounceNewWindow); sendEndOfNeedThicknessAnimation(); } } diff --git a/plasmoid/package/contents/ui/task/animations/TaskRealRemovalAnimation.qml b/plasmoid/package/contents/ui/task/animations/TaskRealRemovalAnimation.qml index 700c7e74e..fca39ca00 100644 --- a/plasmoid/package/contents/ui/task/animations/TaskRealRemovalAnimation.qml +++ b/plasmoid/package/contents/ui/task/animations/TaskRealRemovalAnimation.qml @@ -62,7 +62,7 @@ SequentialAnimation { root.signalAnimationsNeedLength(1); - if (wrapper.mScale > 1 && !taskRealRemovalAnimation.enabledAnimation) { + if (wrapper.mScale > 1 && !taskRealRemovalAnimation.enabledAnimation && !mainItemContainer.inBouncingAnimation) { parabolicManager.setFrozenTask(mainItemContainer.launcherUrl, wrapper.mScale); } } diff --git a/plasmoid/package/contents/ui/task/animations/TaskRemoveWindowFromGroupAnimation.qml b/plasmoid/package/contents/ui/task/animations/TaskRemoveWindowFromGroupAnimation.qml index 6fa4423e7..b258923c9 100644 --- a/plasmoid/package/contents/ui/task/animations/TaskRemoveWindowFromGroupAnimation.qml +++ b/plasmoid/package/contents/ui/task/animations/TaskRemoveWindowFromGroupAnimation.qml @@ -50,6 +50,10 @@ Item{ mainItemContainer.groupWindowRemoved.connect(removeTask); } + Component.onDestruction: { + mainItemContainer.groupWindowRemoved.disconnect(removeTask); + } + ///////////// Component for animating removing window from group Component { diff --git a/plasmoid/package/contents/ui/task/animations/TaskRestoreAnimation.qml b/plasmoid/package/contents/ui/task/animations/TaskRestoreAnimation.qml index 2c6b58396..166757e4e 100644 --- a/plasmoid/package/contents/ui/task/animations/TaskRestoreAnimation.qml +++ b/plasmoid/package/contents/ui/task/animations/TaskRestoreAnimation.qml @@ -49,4 +49,8 @@ ParallelAnimation{ duration: 3 * mainItemContainer.animationTime easing.type: Easing.Linear } + + onStarted: { + // console.log("restore animation started..."); + } }