快捷導(dǎo)航

PyQt通過動(dòng)畫實(shí)現(xiàn)平滑滾動(dòng)的QScrollArea

更新時(shí)間：2023年01月28日 10:12:22 作者：之一Yo

這篇文章主要為大家詳細(xì)介紹了PyQt如何使用Qt的動(dòng)畫框架 QPropertyAnimation來實(shí)現(xiàn)平滑滾動(dòng)的QScrollArea，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以學(xué)習(xí)一下

前言

在之前的博客《如何在 pyqt 中實(shí)現(xiàn)平滑滾動(dòng)的 QScrollArea》中，我們使用定時(shí)器和隊(duì)列實(shí)現(xiàn)了平滑滾動(dòng)。但是實(shí)現(xiàn)代碼還是有一點(diǎn)復(fù)雜，所以這篇博客將使用 Qt 的動(dòng)畫框架 QPropertyAnimation 來實(shí)現(xiàn)相同的功能。

實(shí)現(xiàn)過程

SmoothScrollBar

滾動(dòng)過程其實(shí)就是改變 QScrollBar 的 value() 的過程，Qt 自帶的 QScrollArea 之所以無法平滑滾動(dòng)，就是因?yàn)闈L動(dòng)時(shí)在 QScrollBar 的兩個(gè) value() 之間進(jìn)行跳變。如果我們能在兩個(gè)滾動(dòng)值之間進(jìn)行插值，就能實(shí)現(xiàn)平滑滾動(dòng)了，這里通過重寫 setValue() 函數(shù)來啟動(dòng)滾動(dòng)動(dòng)畫。

   """ Smooth scroll bar """

    scrollFinished = pyqtSignal()

    def __init__(self, parent=None):
        QScrollBar.__init__(self, parent)
        self.ani = QPropertyAnimation()
        self.ani.setTargetObject(self)
        self.ani.setPropertyName(b"value")
        self.ani.setEasingCurve(QEasingCurve.OutCubic)
        self.ani.setDuration(500)
        self.ani.finished.connect(self.scrollFinished)

    def setValue(self, value: int):
        if value == self.value():
            return

        # stop running animation
        self.ani.stop()
        self.scrollFinished.emit()

        self.ani.setStartValue(self.value())
        self.ani.setEndValue(value)
        self.ani.start()

    def scrollValue(self, value: int):
        """ scroll the specified distance """
        value += self.value()
        self.scrollTo(value)

    def scrollTo(self, value: int):
        """ scroll to the specified position """
        value = min(self.maximum(), max(self.minimum(), value))
        self.setValue(value)

    def mousePressEvent(self, e):
        self.ani.stop()
        super().mousePressEvent(e)

    def mouseReleaseEvent(self, e):
        self.ani.stop()
        super().mouseReleaseEvent(e)

    def mouseMoveEvent(self, e):
        self.ani.stop()
        super().mouseMoveEvent(e)

SmoothScrollArea

最后需要將 QScrollArea 的默認(rèn)滾動(dòng)條替換為平滑滾動(dòng)的 SmoothScrollBar：

class SmoothScrollArea(QScrollArea):
    """ Smooth scroll area """

    def __init__(self, parent=None):
        super().__init__(parent)
        self.hScrollBar = SmoothScrollBar()
        self.vScrollBar = SmoothScrollBar()
        self.hScrollBar.setOrientation(Qt.Horizontal)
        self.vScrollBar.setOrientation(Qt.Vertical)
        self.setVerticalScrollBar(self.vScrollBar)
        self.setHorizontalScrollBar(self.hScrollBar)

    def setScrollAnimation(self, orient, duration, easing=QEasingCurve.OutCubic):
        """ set scroll animation

        Parameters
        ----------
        orient: Orient
            scroll orientation

        duration: int
            scroll duration

        easing: QEasingCurve
            animation type
        """
        bar = self.hScrollBar if orient == Qt.Horizontal else self.vScrollBar
        bar.ani.setDuration(duration)
        bar.ani.setEasingCurve(easing)

    def wheelEvent(self, e):
        if e.modifiers() == Qt.NoModifier:
            self.vScrollBar.scrollValue(-e.angleDelta().y())
        else:
            self.hScrollBar.scrollValue(-e.angleDelta().x())

測(cè)試

下面是一個(gè)簡(jiǎn)單的圖片查看器測(cè)試程序：

import sys
from PyQt5.QtCore import QEasingCurve, Qt
from PyQt5.QtGui import QPixmap
from PyQt5.QtWidgets import QApplication, QLabel


class Demo(SmoothScrollArea):

    def __init__(self):
        super().__init__()
        self.label = QLabel(self)
        self.label.setPixmap(QPixmap("shoko.jpg"))

        # customize scroll animation
        self.setScrollAnimation(Qt.Vertical, 400, QEasingCurve.OutQuint)
        self.setScrollAnimation(Qt.Horizontal, 400, QEasingCurve.OutQuint)

        self.horizontalScrollBar().setValue(1900)
        self.setWidget(self.label)
        self.resize(1200, 800)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Demo()
    w.show()
    app.exec_()

最后

至此平滑滾動(dòng)的實(shí)現(xiàn)方式就已介紹完畢了，更多自定義小部件可以參見 PyQt-Fluent-Widgets

到此這篇關(guān)于PyQt通過動(dòng)畫實(shí)現(xiàn)平滑滾動(dòng)的QScrollArea的文章就介紹到這了,更多相關(guān)PyQt QScrollArea內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: