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
v0.7
Michail Vourlakos 7 years ago
parent 2a2ccbdeda
commit 6e4321b650

@ -79,7 +79,7 @@ MouseArea{
} }
acceptedButtons: Qt.LeftButton | Qt.MidButton | Qt.RightButton 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 && (!root.editMode || root.debugLocation)&&(!inBouncingAnimation) && !isSeparator
// hoverEnabled: false // hoverEnabled: false
//opacity : isSeparator && (hiddenSpacerLeft.neighbourSeparator || hiddenSpacerRight.neighbourSeparator) ? 0 : 1 //opacity : isSeparator && (hiddenSpacerLeft.neighbourSeparator || hiddenSpacerRight.neighbourSeparator) ? 0 : 1
@ -95,6 +95,7 @@ MouseArea{
property bool inAttentionAnimation: false property bool inAttentionAnimation: false
property bool inBlockingAnimation: false property bool inBlockingAnimation: false
property bool inBouncingAnimation: false property bool inBouncingAnimation: false
property bool inFastRestoreAnimation: false
property bool inMimicParabolicAnimation: false property bool inMimicParabolicAnimation: false
property real mimicParabolicScale: -1 property real mimicParabolicScale: -1
property bool inPopup: false property bool inPopup: false
@ -309,6 +310,7 @@ MouseArea{
height: root.vertical ? nHiddenSize : wrapper.height height: root.vertical ? nHiddenSize : wrapper.height
visible: (index === 0) || (separatorSpace > 0) || mainItemContainer.inAttentionAnimation visible: (index === 0) || (separatorSpace > 0) || mainItemContainer.inAttentionAnimation
|| mainItemContainer.inFastRestoreAnimation || mainItemContainer.inMimicParabolicAnimation
property bool neighbourSeparator: false property bool neighbourSeparator: false
//in case there is a neighbour separator, lastValidIndex is used in order to protect from 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 (2+root.iconMargin/2) : 0
property real nHiddenSize: { property real nHiddenSize: {
if (!inAttentionAnimation) { if (!inAttentionAnimation && !inMimicParabolicAnimation && !inFastRestoreAnimation) {
return (nScale > 0) ? (mainItemContainer.spacersMaxSize * nScale) + separatorSpace : separatorSpace; return (nScale > 0) ? (mainItemContainer.spacersMaxSize * nScale) + separatorSpace : separatorSpace;
} else { } else {
return (nScale > 0) ? (root.iconSize * nScale) + separatorSpace : separatorSpace; return (nScale > 0) ? (root.iconSize * nScale) + separatorSpace : separatorSpace;
@ -357,27 +359,27 @@ MouseArea{
Component.onCompleted: hiddenSpacerLeft.updateNeighbour(); Component.onCompleted: hiddenSpacerLeft.updateNeighbour();
Behavior on nScale { /*Behavior on nScale {
enabled: !root.globalDirectRender enabled: !root.globalDirectRender
NumberAnimation { duration: 3 * mainItemContainer.animationTime } NumberAnimation { duration: 3 * mainItemContainer.animationTime }
} }
/*Behavior on nScale { Behavior on nScale {
enabled: root.globalDirectRender enabled: root.globalDirectRender
NumberAnimation { duration: root.directRenderAnimationTime } NumberAnimation { duration: root.directRenderAnimationTime }
}*/ }*/
Behavior on nHiddenSize { Behavior on separatorSpace {
enabled: !root.globalDirectRender || mainItemContainer.inMimicParabolicAnimation enabled: !root.globalDirectRender
NumberAnimation { duration: 3 * mainItemContainer.animationTime } NumberAnimation { duration: 3 * mainItemContainer.animationTime }
} }
Behavior on nHiddenSize { Behavior on separatorSpace {
enabled: root.globalDirectRender && !mainItemContainer.inMimicParabolicAnimation enabled: root.globalDirectRender
NumberAnimation { duration: root.directRenderAnimationTime } NumberAnimation { duration: root.directRenderAnimationTime }
} }
/* Rectangle{ /*Rectangle{
width: !root.vertical ? parent.width : 1 width: !root.vertical ? parent.width : 1
height: !root.vertical ? 1 : parent.height height: !root.vertical ? 1 : parent.height
x: root.vertical ? parent.width /2 : 0 x: root.vertical ? parent.width /2 : 0
@ -385,7 +387,7 @@ MouseArea{
border.width: 1 border.width: 1
border.color: "red" border.color: "red"
color: "transparent" color: "transparent"
} */ }*/
} }
TaskWrapper{ id: wrapper } TaskWrapper{ id: wrapper }
@ -398,6 +400,7 @@ MouseArea{
height: root.vertical ? nHiddenSize : wrapper.height height: root.vertical ? nHiddenSize : wrapper.height
visible: (index === icList.count - 1) || (separatorSpace > 0) || mainItemContainer.inAttentionAnimation visible: (index === icList.count - 1) || (separatorSpace > 0) || mainItemContainer.inAttentionAnimation
|| mainItemContainer.inFastRestoreAnimation || mainItemContainer.inMimicParabolicAnimation
property bool neighbourSeparator: false property bool neighbourSeparator: false
//in case there is a neighbour separator, lastValidIndex is used in order to protect from 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 (2+root.iconMargin/2) : 0
property real nHiddenSize: { property real nHiddenSize: {
if (!inAttentionAnimation) { if (!inAttentionAnimation && !inMimicParabolicAnimation && !inFastRestoreAnimation) {
return (nScale > 0) ? (mainItemContainer.spacersMaxSize * nScale) + separatorSpace : separatorSpace; return (nScale > 0) ? (mainItemContainer.spacersMaxSize * nScale) + separatorSpace : separatorSpace;
} else { } else {
return (nScale > 0) ? (root.iconSize * nScale) + separatorSpace : separatorSpace; return (nScale > 0) ? (root.iconSize * nScale) + separatorSpace : separatorSpace;
@ -448,7 +451,7 @@ MouseArea{
Component.onCompleted: hiddenSpacerRight.updateNeighbour(); Component.onCompleted: hiddenSpacerRight.updateNeighbour();
Behavior on nScale { /*Behavior on nScale {
enabled: !root.globalDirectRender enabled: !root.globalDirectRender
NumberAnimation { duration: 3 * mainItemContainer.animationTime } NumberAnimation { duration: 3 * mainItemContainer.animationTime }
} }
@ -456,19 +459,19 @@ MouseArea{
Behavior on nScale { Behavior on nScale {
enabled: root.globalDirectRender enabled: root.globalDirectRender
NumberAnimation { duration: root.directRenderAnimationTime } NumberAnimation { duration: root.directRenderAnimationTime }
} }*/
Behavior on nHiddenSize { Behavior on separatorSpace {
enabled: !root.globalDirectRender || mainItemContainer.inMimicParabolicAnimation enabled: !root.globalDirectRender
NumberAnimation { duration: 3 * mainItemContainer.animationTime } NumberAnimation { duration: 3 * mainItemContainer.animationTime }
} }
Behavior on nHiddenSize { Behavior on separatorSpace {
enabled: root.globalDirectRender && !mainItemContainer.inMimicParabolicAnimation enabled: root.globalDirectRender
NumberAnimation { duration: root.directRenderAnimationTime } NumberAnimation { duration: root.directRenderAnimationTime }
} }
/* Rectangle{ /*Rectangle{
width: !root.vertical ? parent.width : 1 width: !root.vertical ? parent.width : 1
height: !root.vertical ? 1 : parent.height height: !root.vertical ? 1 : parent.height
x: root.vertical ? parent.width /2 : 0 x: root.vertical ? parent.width /2 : 0
@ -476,7 +479,7 @@ MouseArea{
border.width: 1 border.width: 1
border.color: "red" border.color: "red"
color: "transparent" color: "transparent"
} */ }*/
} }
}// Flow with hidden spacers inside }// Flow with hidden spacers inside
@ -524,7 +527,7 @@ MouseArea{
wrapper.mScale = 1; wrapper.mScale = 1;
}*/ }*/
if (distanceFromHovered >= 1) { if (distanceFromHovered >= 1 && !inAttentionAnimation && !inFastRestoreAnimation && !inMimicParabolicAnimation) {
hiddenSpacerLeft.nScale = 0; hiddenSpacerLeft.nScale = 0;
hiddenSpacerRight.nScale = 0; hiddenSpacerRight.nScale = 0;
} }
@ -632,7 +635,7 @@ MouseArea{
} }
onPositionChanged: { onPositionChanged: {
if (root.editMode || (inBlockingAnimation && !inAttentionAnimation)) if (root.editMode || (inBlockingAnimation && !(inAttentionAnimation||inFastRestoreAnimation||inMimicParabolicAnimation)))
return; return;
if(!root.latteDock) if(!root.latteDock)
@ -877,7 +880,7 @@ MouseArea{
if (root.globalDirectRender) if (root.globalDirectRender)
wrapper.mScale = 1; wrapper.mScale = 1;
else else if (!inAttentionAnimation && !inFastRestoreAnimation && !inMimicParabolicAnimation)
restoreAnimation.start(); restoreAnimation.start();
} }
@ -1091,13 +1094,11 @@ MouseArea{
function slotMimicEnterForParabolic(){ function slotMimicEnterForParabolic(){
if (containsMouse) { if (containsMouse) {
if (!inBlockingAnimation || inAttentionAnimation) { if (inMimicParabolicAnimation) {
if (inMimicParabolicAnimation) { mimicParabolicScale = root.zoomFactor;
mimicParabolicScale = root.zoomFactor;
}
wrapper.calculateScales(icList.currentSpot);
} }
wrapper.calculateScales(icList.currentSpot);
} }
} }

@ -68,7 +68,7 @@ Item{
property Item titleTooltipVisualParent: titleTooltipParent property Item titleTooltipVisualParent: titleTooltipParent
/* Rectangle{ /* Rectangle{
anchors.fill: parent anchors.fill: parent
border.width: 1 border.width: 1
border.color: "green" border.color: "green"
@ -140,22 +140,38 @@ Item{
Latte.IconItem{ Latte.IconItem{
id: iconImageBuffer id: iconImageBuffer
anchors.rightMargin: root.position === PlasmaCore.Types.RightPositioned anchors.rightMargin:{
|| (root.position === PlasmaCore.Types.LeftPositioned if (root.position === PlasmaCore.Types.RightPositioned)
&& mainItemContainer.inAddRemoveAnimation) return root.thickMarginBase;
? root.thickMarginBase : 0 else if (root.position === PlasmaCore.Types.LeftPositioned)
anchors.leftMargin: root.position === PlasmaCore.Types.LeftPositioned return wrapper.mScale * root.thickMarginHigh;
|| (root.position === PlasmaCore.Types.RightPositioned else
&& mainItemContainer.inAddRemoveAnimation) return 0;
? root.thickMarginBase : 0 }
anchors.topMargin: root.position === PlasmaCore.Types.TopPositioned anchors.leftMargin: {
|| (root.position === PlasmaCore.Types.BottomPositioned if (root.position === PlasmaCore.Types.LeftPositioned)
&& mainItemContainer.inAddRemoveAnimation) return root.thickMarginBase;
? root.thickMarginBase : 0 else if (root.position === PlasmaCore.Types.RightPositioned)
anchors.bottomMargin: root.position === PlasmaCore.Types.BottomPositioned return wrapper.mScale * root.thickMarginHigh;
|| (root.position === PlasmaCore.Types.TopPositioned else
&& mainItemContainer.inAddRemoveAnimation) return 0;
? root.thickMarginBase : 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 width: Math.round(newTempSize) //+ 2*centralItem.shadowSize
height: Math.round(width) height: Math.round(width)
@ -199,7 +215,7 @@ Item{
states: [ states: [
State{ State{
name: "*" name: "*"
when: !launcherAnimation.running && !newWindowAnimation.running && !mainItemContainer.inAddRemoveAnimation when: !launcherAnimation.running && !newWindowAnimation.running && !mainItemContainer.inAddRemoveAnimation && !fastRestoreAnimation.running
AnchorChanges{ AnchorChanges{
target:iconImageBuffer; target:iconImageBuffer;
@ -229,7 +245,7 @@ Item{
State{ State{
name: "animating" name: "animating"
when: (launcherAnimation.running || newWindowAnimation.running) && !mainItemContainer.inAddRemoveAnimation when: (launcherAnimation.running || newWindowAnimation.running || fastRestoreAnimation.running) && !mainItemContainer.inAddRemoveAnimation
AnchorChanges{ AnchorChanges{
target:iconImageBuffer; target:iconImageBuffer;

@ -156,7 +156,7 @@ Item{
Loader{ Loader{
id: firstPadding id: firstPadding
active: secondIndicator.active && mainItemContainer.inAttentionAnimation active: secondIndicator.active && (mainItemContainer.inAttentionAnimation || mainItemContainer.inFastRestoreAnimation)
visible: active visible: active
sourceComponent: Component{ sourceComponent: Component{
@ -164,7 +164,7 @@ Item{
width: root.vertical ? wrapper.maxThickness-wrapper.width : 1 width: root.vertical ? wrapper.maxThickness-wrapper.width : 1
height: !root.vertical ? wrapper.maxThickness-wrapper.height : 1 height: !root.vertical ? wrapper.maxThickness-wrapper.height : 1
/* Rectangle{ /* Rectangle{
width: !root.vertical ? 1 : parent.width width: !root.vertical ? 1 : parent.width
height: !root.vertical ? parent.height : 1 height: !root.vertical ? parent.height : 1
x: !root.vertical ? wrapper.width /2 : 0 x: !root.vertical ? wrapper.width /2 : 0
@ -183,7 +183,7 @@ Item{
Loader{ Loader{
id: secondPadding id: secondPadding
active: firstIndicator.active && mainItemContainer.inAttentionAnimation active: firstIndicator.active && (mainItemContainer.inAttentionAnimation || mainItemContainer.inFastRestoreAnimation)
visible: active visible: active
sourceComponent: Component{ sourceComponent: Component{
@ -191,7 +191,7 @@ Item{
width: root.vertical ? wrapper.maxThickness-wrapper.width : 1 width: root.vertical ? wrapper.maxThickness-wrapper.width : 1
height: !root.vertical ? wrapper.maxThickness-wrapper.height : 1 height: !root.vertical ? wrapper.maxThickness-wrapper.height : 1
/* Rectangle{ /*Rectangle{
width: !root.vertical ? 1 : parent.width width: !root.vertical ? 1 : parent.width
height: !root.vertical ? parent.height : 1 height: !root.vertical ? parent.height : 1
x: !root.vertical ? wrapper.width/2 : 0 x: !root.vertical ? wrapper.width/2 : 0
@ -199,7 +199,7 @@ Item{
border.width: 1 border.width: 1
border.color: "blue" border.color: "blue"
color: "transparent" color: "transparent"
} */ }*/
} }
} }
} }
@ -234,12 +234,14 @@ Item{
var scales = parabolicManager.applyParabolicEffect(index, currentMousePosition, center); var scales = parabolicManager.applyParabolicEffect(index, currentMousePosition, center);
//Left hiddenSpacer //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; hiddenSpacerLeft.nScale = scales.leftScale - 1;
} }
//Right hiddenSpacer //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; hiddenSpacerRight.nScale = scales.rightScale - 1;
} }
@ -249,20 +251,14 @@ Item{
} //nScale } //nScale
function signalUpdateScale(nIndex, nScale, step){ function signalUpdateScale(nIndex, nScale, step){
if ((index === nIndex)&&(mainItemContainer.hoverEnabled)&&(waitingLaunchers.length===0)){ if ((index === nIndex)&&(mainItemContainer.hoverEnabled || inMimicParabolicAnimation)&&(waitingLaunchers.length===0)){
/*if (nScale !== 1){
if (isSeparator){
console.log("WRONG TASK SIGNAL for internal separator at pos:"+ index +" and zoom:"+nScale);
}
}*/
if (mainItemContainer.inAttentionAnimation) { if (mainItemContainer.inAttentionAnimation) {
var subSpacerScale = (nScale-1)/2; var subSpacerScale = (nScale-1)/2;
hiddenSpacerLeft.nScale = subSpacerScale; hiddenSpacerLeft.nScale = subSpacerScale;
hiddenSpacerRight.nScale = subSpacerScale; hiddenSpacerRight.nScale = subSpacerScale;
} else if (!inBlockingAnimation) { } else if (!inBlockingAnimation || mainItemContainer.inMimicParabolicAnimation) {
var newScale = 1; var newScale = 1;
if(nScale >= 0) { if(nScale >= 0) {
@ -277,7 +273,6 @@ Item{
mScale = newScale; mScale = newScale;
} }
// console.log(index+ ", "+mScale);
} }
} }
@ -293,12 +288,20 @@ Item{
root.startEnableDirectRenderTimer(); root.startEnableDirectRenderTimer();
} }
if (inMimicParabolicAnimation && mScale >= mimicParabolicScale){ if (inMimicParabolicAnimation){
inMimicParabolicAnimation = false; if (mScale >= mimicParabolicScale) {
mimicParabolicScale = -1; 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) { if ((mScale > 1) && !mainItemContainer.isZoomed) {
mainItemContainer.isZoomed = true; mainItemContainer.isZoomed = true;
root.signalAnimationsNeedBothAxis(1); root.signalAnimationsNeedBothAxis(1);

@ -30,7 +30,8 @@ SequentialAnimation{
ScriptAction { ScriptAction {
script: { script: {
mainItemContainer.inMimicParabolicAnimation = true; mainItemContainer.inFastRestoreAnimation = true;
mainItemContainer.inBlockingAnimation = true;
} }
} }
@ -58,33 +59,25 @@ SequentialAnimation{
duration: fastRestoreAnimation.speed duration: fastRestoreAnimation.speed
easing.type: Easing.Linear easing.type: Easing.Linear
} }
}
PropertyAnimation { onStopped: {
target: hiddenSpacerLeft if (!mainItemContainer.containsMouse && !parabolicManager.neighbourIsHovered(itemIndex)) {
property: "nScale" mainItemContainer.inMimicParabolicAnimation = false;
to: 0 } else {
duration: fastRestoreAnimation.speed mainItemContainer.inMimicParabolicAnimation = true;
easing.type: Easing.Linear
} }
PropertyAnimation { newWindowAnimation.stop();
target: hiddenSpacerRight
property: "nScale" if (!mainItemContainer.containsMouse && !parabolicManager.neighbourIsHovered(itemIndex)) {
to: 0 mainItemContainer.inBlockingAnimation = false;
duration: fastRestoreAnimation.speed
easing.type: Easing.Linear
} }
}
onStopped: { root.mimicEnterForParabolic();
if (newWindowAnimation.paused){
if (!mainItemContainer.containsMouse && !parabolicManager.neighbourIsHovered(itemIndex)) {
mainItemContainer.inMimicParabolicAnimation = false;
}
newWindowAnimation.stop(); mainItemContainer.inFastRestoreAnimation = false;
root.mimicEnterForParabolic(); // console.log("Fast Restore Animation ended...");
}
} }
} }

@ -44,7 +44,7 @@ SequentialAnimation{
duration: newWindowAnimation.speed duration: newWindowAnimation.speed
easing.type: Easing.OutQuad easing.type: Easing.OutQuad
property real thickPercentage: mainItemContainer.inAttentionAnimation ? 0.9 : 0.6 property real thickPercentage: mainItemContainer.inAttentionAnimation ? 1 : 0.6
} }
PropertyAnimation { PropertyAnimation {
@ -118,7 +118,7 @@ SequentialAnimation{
function bounceNewWindow(){ function bounceNewWindow(){
//if (isDemandingAttention && !root.dockIsHidden && (root.zoomFactor > 1)){ //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(); newWindowAnimation.init();
start(); start();
} }
@ -129,6 +129,7 @@ SequentialAnimation{
} }
Component.onDestruction: { Component.onDestruction: {
mainItemContainer.groupWindowAdded.disconnect(bounceNewWindow);
sendEndOfNeedThicknessAnimation(); sendEndOfNeedThicknessAnimation();
} }
} }

@ -62,7 +62,7 @@ SequentialAnimation {
root.signalAnimationsNeedLength(1); root.signalAnimationsNeedLength(1);
if (wrapper.mScale > 1 && !taskRealRemovalAnimation.enabledAnimation) { if (wrapper.mScale > 1 && !taskRealRemovalAnimation.enabledAnimation && !mainItemContainer.inBouncingAnimation) {
parabolicManager.setFrozenTask(mainItemContainer.launcherUrl, wrapper.mScale); parabolicManager.setFrozenTask(mainItemContainer.launcherUrl, wrapper.mScale);
} }
} }

@ -50,6 +50,10 @@ Item{
mainItemContainer.groupWindowRemoved.connect(removeTask); mainItemContainer.groupWindowRemoved.connect(removeTask);
} }
Component.onDestruction: {
mainItemContainer.groupWindowRemoved.disconnect(removeTask);
}
///////////// Component for animating removing window from group ///////////// Component for animating removing window from group
Component { Component {

@ -49,4 +49,8 @@ ParallelAnimation{
duration: 3 * mainItemContainer.animationTime duration: 3 * mainItemContainer.animationTime
easing.type: Easing.Linear easing.type: Easing.Linear
} }
onStarted: {
// console.log("restore animation started...");
}
} }

Loading…
Cancel
Save