[FIXED] Animate Geometry inside QGridLayout in PyQt

Issue

How to animate geometry change inside QGridLayout. I have QLabel which will be placed inside the QGridlayout. It should expand when the mouse is inside the QLabel and shrink back to the normal state when outside. I managed to animate but, it doesn't expand from all four sides. It instead moves away from the grid.

MRE:

import sys
from PyQt5 import QtWidgets, QtCore


class Tile(QtWidgets.QLabel):

    def __init__(self, *args, **kwargs):
        super(Tile, self).__init__(*args, **kwargs)

        # p = self.palette()
        # p.setColor(self.backgroundRole(), QtCore.Qt.red)
        # self.setPalette(p)
        self.setText("hello")
        self.setMinimumSize(100, 100)
        self.setMaximumSize(125, 125)

    def enterEvent(self, a0: QtCore.QEvent) -> None:
        super(Tile, self).enterEvent(a0)

        self.animation = QtCore.QPropertyAnimation(self, b"geometry")
        self.animation.setStartValue(QtCore.QRect(self.geometry()))
        self.animation.setEndValue(QtCore.QRect(self.geometry().adjusted(-25, -25, 25, 25)))
        self.animation.setDuration(150)
        self.animation.start(QtCore.QPropertyAnimation.DeleteWhenStopped)

    def leaveEvent(self, a0: QtCore.QEvent) -> None:
        super(Tile, self).leaveEvent(a0)

        self.animation = QtCore.QPropertyAnimation(self, b"geometry")
        self.animation.setStartValue(QtCore.QRect(self.geometry()))
        self.animation.setEndValue(QtCore.QRect(self.geometry().adjusted(25, 25, -25, -25)))
        self.animation.setDuration(150)
        self.animation.start(QtCore.QPropertyAnimation.DeleteWhenStopped)


class ScrollView(QtWidgets.QWidget):

    def __init__(self, *args, **kwargs):
        super(ScrollView, self).__init__(*args, **kwargs)

        self.setStyleSheet('border: 1px solid black')

        self.setLayout(QtWidgets.QVBoxLayout())

        widget = QtWidgets.QWidget()

        self.grid_layout = QtWidgets.QGridLayout(widget)

        self.scrollArea = QtWidgets.QScrollArea()
        self.scrollArea.setWidget(widget)
        self.scrollArea.setWidgetResizable(True)

        self.grid_layout.setSpacing(50)

        self.row_width = 4

        self._row = 0
        self._column = 0

        self.layout().addWidget(self.scrollArea)

    def addTile(self):

        self.grid_layout.addWidget(Tile(), self._row, self._column)

        if self._column == 3:
            self._row += 1
            self._column = 0

        else:
            self._column += 1


def main():
    app = QtWidgets.QApplication(sys.argv)

    win = ScrollView()

    for x in range(30):
        win.addTile()

    win.show()
    sys.exit(app.exec())


if __name__ == "__main__":
    main()

Solution

The main problem is that you're setting a maximum size that is smaller than the end value: if you have a starting rectangle with size 100x100 and you expand it 25 pixels on each side, it will become 150x150, not 125x125. Since you've set that maximum value, once the geometry reaches 125x125 it will only change the coordinates while keeping that maximum size.

But there are also three other issues.

1. you're always using the current geometry as start value, which can become an issue: if you enter or leave while the other animation is in progress, you get a wrong reference for the target geometry;
2. if you enter/leave the widget very fast, you'll end up with two concurrent animations taking place; there's literally no benefit in continously creating animations every time;
3. the widget doesn't take into account resizing of the scroll area, which would alter the aspect ratio and create issues for the new positioning;

In order to avoid all this, you have to use one animation only, change its direction according to the enter/leave event, properly modify the start/end values according to the actual geometry changes, and also properly resize to the "default" size when an external resize happens; the last two points are done only if the animation is not active (since moveEvent and resizeEvent are called by the geometry change).

class Tile(QtWidgets.QLabel):

    def __init__(self, *args, **kwargs):
        super(Tile, self).__init__(*args, **kwargs)

        self.setText("hello")
        self.setMinimumSize(100, 100)
        self.setMaximumSize(150, 150)
        self.animation = QtCore.QPropertyAnimation(self, b"geometry")
        self.animation.setDuration(150)

    def animate(self, expand):
        if expand:
            self.animation.setDirection(self.animation.Forward)
        else:
            self.animation.setDirection(self.animation.Backward)
        self.animation.start()

    def enterEvent(self, a0: QtCore.QEvent) -> None:
        super(Tile, self).enterEvent(a0)
        self.animate(True)

    def leaveEvent(self, a0: QtCore.QEvent) -> None:
        super(Tile, self).leaveEvent(a0)
        self.animate(False)

    def updateAnimation(self):
        if not self.animation.state():
            center = self.geometry().center()
            start = QtCore.QRect(QtCore.QPoint(), self.minimumSize())
            start.moveCenter(center)
            self.animation.setStartValue(start)
            end = QtCore.QRect(QtCore.QPoint(), self.maximumSize())
            end.moveCenter(center)
            self.animation.setEndValue(end)

    def moveEvent(self, event):
        self.updateAnimation()

    def resizeEvent(self, event):
        self.updateAnimation()
        if not self.animation.state():
            rect = QtCore.QRect(QtCore.QPoint(), 
                self.maximumSize() if self.underMouse() else self.minimumSize())
            rect.moveCenter(self.geometry().center())
            self.setGeometry(rect)

Answered By - musicamante