Fading on Tab Change in pyqt

Question

i have a page containing two tabs.i want to add a fadeIn effect when i change the tabs.Is that possible?

import sys
from PyQt4.QtCore import QTimeLine
from PyQt4.QtGui import *

class FaderWidget(QWidget):

    def __init__(self, old_widget, new_widget):

        QWidget.__init__(self, new_widget)

        self.old_pixmap = QPixmap(new_widget.size())
        old_widget.render(self.old_pixmap)
        self.pixmap_opacity = 1.0

        self.timeline = QTimeLine()
        self.timeline.valueChanged.connect(self.animate)
        self.timeline.finished.connect(self.close)
        self.timeline.setDuration(333)
        self.timeline.start()

        self.resize(new_widget.size())
        self.show()

    def paintEvent(self, event):

        painter = QPainter()
        painter.begin(self)
        painter.setOpacity(self.pixmap_opacity)
        painter.drawPixmap(0, 0, self.old_pixmap)
        painter.end()

    def animate(self, value):

        self.pixmap_opacity = 1.0 - value
        self.repaint()

class StackedWidget(QStackedWidget):

    def __init__(self, parent = None):
        QStackedWidget.__init__(self, parent)

    def setCurrentIndex(self, index):
        self.fader_widget = FaderWidget(self.currentWidget(), self.widget(index))
        QStackedWidget.setCurrentIndex(self, index)

    def setPage1(self):
        self.setCurrentIndex(0)

    def setPage2(self):
        self.setCurrentIndex(1)


if __name__ == "__main__":

    app = QApplication(sys.argv)

    window = QWidget()

    stack = StackedWidget()
    stack.addWidget(QCalendarWidget())
    editor = QTextEdit()
    editor.setPlainText("Hello world! "*100)
    stack.addWidget(editor)

    page1Button = QPushButton("Page 1")
    page2Button = QPushButton("Page 2")
    page1Button.clicked.connect(stack.setPage1)
    page2Button.clicked.connect(stack.setPage2)

    layout = QGridLayout(window)
    layout.addWidget(stack, 0, 0, 1, 2)
    layout.addWidget(page1Button, 1, 0)
    layout.addWidget(page2Button, 1, 1)

    window.show()

    sys.exit(app.exec_())

this is code that shows some fade effect but i m getting nothing from it and how it works and how to implement on tabs. it will be really appreciable if someone could help me implement it on tabs as well. thanks in advance.

Answer 1

With the same logic as the code you show, each widget will be placed inside a QStackedWidget, where one of them will be the widget that will be displayed and the other will be the FaderWidget.

class FaderWidget(QWidget):
    def __init__(self, *args, **kwargs):
        QWidget.__init__(self, *args, **kwargs)
        self.pixmap_opacity = None
        self.timeline = QTimeLine(333, self)
        self.timeline.valueChanged.connect(self.animate)
        self.timeline.finished.connect(self.close)

    def start(self, old_widget, new_widget):
        self.pixmap_opacity = 1.0
        self.old_pixmap = QPixmap(new_widget.size())
        old_widget.render(self.old_pixmap)

        self.timeline.start()

        self.resize(new_widget.size())
        self.show()

    def paintEvent(self, event):
        if self.pixmap_opacity:
            QWidget.paintEvent(self, event)
            painter = QPainter(self)
            painter.setOpacity(self.pixmap_opacity)
            painter.drawPixmap(0, 0, self.old_pixmap)

    def animate(self, value):
        self.pixmap_opacity = 1.0 - value
        self.update()


class FaderTabWidget(QTabWidget):
    def __init__(self, parent=None):
        QTabWidget.__init__(self, parent)
        self.currentChanged.connect(self.onCurrentIndex)
        self.last = -1
        self.current = self.currentIndex()

    def onCurrentIndex(self, index):
        self.last = self.current
        self.current = self.currentIndex()
        if self.widget(self.last):
            self.widget(self.last).setCurrentIndex(1)
            old_widget = self.widget(self.last).widget(0)
            current_widget = self.widget(self.current).widget(0)
            fade = self.widget(self.current).widget(1)
            fade.start(old_widget, current_widget)

    def addTab(self, widget, text):
        stack = QStackedWidget(self)
        stack.addWidget(widget)
        fade = FaderWidget(self)
        fade.timeline.finished.connect(lambda: stack.setCurrentIndex(0))
        stack.addWidget(fade)
        stack.setCurrentIndex(0 if self.currentIndex() == -1 else 1)
        QTabWidget.addTab(self, stack, text)


if __name__ == "__main__":
    app = QApplication(sys.argv)

    window = QWidget()

    tabWidget = FaderTabWidget()
    tabWidget.addTab(QCalendarWidget(), "Tab1")
    editor = QTextEdit()
    editor.setPlainText("Hello world! " * 100)
    tabWidget.addTab(editor, "Tab2")
    layout = QVBoxLayout(window)
    layout.addWidget(tabWidget)
    window.show()
    sys.exit(app.exec_())