前言
在之前的博客《如何在 pyqt 中实现平滑滚动的 QScrollArea》中，我们使用定时器和队列实现了平滑滚动。但是实现代码还是有一点复杂，所以这篇博客将使用 Qt 的动画框架 QPropertyAnimation 来实现相同的功能。
实现过程
SmoothScrollBar
滚动过程其实就是改变 QScrollBar 的 value() 的过程，Qt 自带的 QScrollArea 之所以无法平滑滚动，就是因为滚动时在 QScrollBar 的两个 value() 之间进行跳变。如果我们能在两个滚动值之间进行插值，就能实现平滑滚动了，这里通过重写 setValue() 函数来启动滚动动画。
class SmoothScrollBar(QScrollBar): """ 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 的默认滚动条替换为平滑滚动的 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()) 测试
下面是一个简单的图片查看器测试程序：
# coding:utf-8 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_() 测试用的图片如下（硝子酱真可爱🥰：
写在最后
至此平滑滚动的实现方式就已介绍完毕了，更多自定义小部件可以参见 PyQt-Fluent-Widgets，以上~~
