返回顶部
首页 > 资讯 > 后端开发 > Python >PyQt通过动画实现平滑滚动的QScrollArea
  • 484
分享到

PyQt通过动画实现平滑滚动的QScrollArea

Python 官方文档:入门教程 => 点击学习

摘要

目录前言实现过程SmoothScrollBarSmoothScrollArea测试前言 在之前的博客《如何在 pyQt 中实现平滑滚动的 QScrollArea》中,我们使用定时器和

前言

在之前的博客《如何在 pyQt 中实现平滑滚动的 QScrollArea》中,我们使用定时器和队列实现了平滑滚动。但是实现代码还是有一点复杂,所以这篇博客将使用 Qt 的动画框架 QPropertyAnimation 来实现相同的功能。

实现过程

SmoothScrollBar

滚动过程其实就是改变 QScrollBar 的 value() 的过程,Qt 自带的 QScrollArea 之所以无法平滑滚动,就是因为滚动时在 QScrollBar 的两个 value() 之间进行跳变。如果我们能在两个滚动值之间进行插值,就能实现平滑滚动了,这里通过重写 setValue() 函数来启动滚动动画。

   """ 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())

测试

下面是一个简单的图片查看器测试程序:

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

到此这篇关于PyQt通过动画实现平滑滚动的QScrollArea的文章就介绍到这了,更多相关PyQt QScrollArea内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: PyQt通过动画实现平滑滚动的QScrollArea

本文链接: https://lsjlt.com/news/178475.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • PyQt通过动画实现平滑滚动的QScrollArea
    目录前言实现过程SmoothScrollBarSmoothScrollArea测试前言 在之前的博客《如何在 pyqt 中实现平滑滚动的 QScrollArea》中,我们使用定时器和...
    99+
    2023-01-28
    PyQt动画实现平滑滚动QScrollArea PyQt 平滑滚动QScrollArea PyQt QScrollArea
  • 详解如何在PyQt5中实现平滑滚动的QScrollArea
    目录平滑滚动的视觉效果实现思路具体代码平滑滚动的视觉效果 Qt 自带的 QScrollArea 滚动时只能在两个像素节点之间跳变,看起来很突兀。刚开始试着用&nb...
    99+
    2023-01-28
    PyQt5实现平滑滚动QScrollArea PyQt5 滚动 QScrollArea PyQt5 QScrollArea
  • 如何通过CSS实现网页的平滑滚动导航
    导航是网页中非常重要的一部分,是用户浏览网页内容的入口。而在一个较长的网页中,平滑滚动导航可以让用户快速定位到所需内容,并提升用户体验。要通过CSS实现平滑滚动导航,可以使用一些CSS特性和技巧。以下是具体的代码示例:HTML结构:<...
    99+
    2023-10-21
    平滑滚动 ( smooth scrolling ) CSS ( 层叠样式表 ) 导航 ( navigation )
  • Android SeekBar实现平滑滚动
    本文实例为大家分享了Android SeekBar实现平滑滚动的具体代码,供大家参考,具体内容如下 由于项目需要,SeekBar只需要三个档,但是如果只设置三个档会很难滑,看着也不好...
    99+
    2024-04-02
  • 如何通过纯CSS实现网页的平滑滚动效果
    在网页设计中,平滑滚动效果可以为用户提供良好的浏览体验,使页面切换更加流畅。而在纯CSS中实现平滑滚动效果可以避免使用JavaScript,进一步优化页面加载速度和性能。本文将详细介绍如何使用纯CSS实现网页的平滑滚动效果,并提供具体的代码...
    99+
    2023-10-21
    平滑滚动 纯CSS 网页效果
  • 如何通过CSS实现网页的平滑滚动导航条
    导航条是网页中非常重要的组成部分之一,它不仅提供了页面导航的功能,还能使网页更加美观。而在网页中实现平滑滚动导航条,可以为用户提供更好的体验。本文将介绍如何通过CSS实现网页的平滑滚动导航条,并提供具体的代码示例。一、HTML结构首先,在H...
    99+
    2023-10-21
    CSS 平滑滚动 导航条
  • 如何通过纯CSS实现网页的平滑滚动背景效果
    如何通过纯CSS实现网页的平滑滚动背景效果背景是网页设计中非常重要的一部分,可以增强页面的视觉效果和用户体验。传统的网页背景通常是静态的,但是通过使用纯CSS技术,我们可以实现一种平滑滚动背景效果,从而为网页添加更加动感和生动的视觉效果。在...
    99+
    2023-10-24
    平滑 滚动 纯CSS 背景效果
  • 如何通过纯CSS实现网页的平滑滚动导航菜单
    引导用户在网页中进行导航是一个重要的设计元素,而平滑滚动导航菜单是提供用户友好的导航体验的一种方式。本文将介绍如何通过纯CSS来实现这样的导航菜单,并提供相应的代码示例。一、HTML结构首先,我们需要在HTML中创建导航菜单的基本结构。以下...
    99+
    2023-10-21
    导航菜单 CSS 平滑滚动
  • 如何通过纯CSS实现网页的平滑滚动背景淡入
    如何通过纯CSS实现网页的平滑滚动背景淡入一、引言当今的网页设计越来越注重用户体验,而动态的效果往往能给用户带来更好的视觉效果和交互体验。本文将详细介绍如何通过纯CSS实现网页的平滑滚动背景淡入效果,并提供具体的代码示例,帮助读者快速掌握实...
    99+
    2023-10-26
    平滑滚动 关键词:CSS 背景淡入
  • 如何通过纯CSS实现网页的平滑滚动背景图效果
    在现代网页设计中,背景图的运用可以为网页增添更多的美感和活力。而通过CSS实现平滑滚动背景图效果,则可以使整个页面更加流畅和吸引人。本文将详细介绍如何通过纯CSS实现这一效果,并提供具体的代码示例。首先,我们需要准备一张背景图,并将其添加到...
    99+
    2023-10-21
    平滑滚动 纯CSS 背景图效果
  • 在WPF中怎么实现平滑滚动
    本篇内容介绍了“在WPF中怎么实现平滑滚动”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!WPF实现滚动条还是比较方便的,只要在控件外围加上S...
    99+
    2023-07-02
  • 如何通过纯CSS实现网页的平滑滚动背景渐变效果
    如何通过纯CSS实现网页的平滑滚动背景渐变效果一、引言在网页设计中,背景渐变效果可以为网站增加美感和动态感。而平滑滚动背景渐变则可以使网页更加吸引人,给用户带来舒适的浏览体验。本文将介绍如何通过纯CSS实现网页的平滑滚动背景渐变效果,并提供...
    99+
    2023-10-25
    CSS 平滑滚动 背景渐变
  • 如何通过纯CSS实现网页的平滑滚动背景镂空效果
    随着互联网技术的不断发展,网页的设计也日趋多样化和复杂化。一个好看的网页,往往需要注重细节和创新。其中,平滑滚动背景镂空效果是近年来越来越受欢迎的设计元素之一。这种效果可以使网页看起来更加生动、有趣,并且能够引起用户的注意和兴趣。在本文中,...
    99+
    2023-10-21
    CSS 平滑滚动 镂空效果
  • 如何用CSS实现平滑滚动效果
    如何用CSS实现平滑滚动效果在网页设计与开发中,滚动效果是一种非常常见且炫酷的效果,能够为用户带来更好的体验。而实现平滑滚动效果,可以通过CSS的一些技巧来实现。本文将介绍如何使用CSS来实现平滑滚动效果,并提供具体的代码示例。一、使用锚点...
    99+
    2023-11-21
    平滑 CSS 滚动效果
  • 如何通过纯CSS实现网页的平滑滚动背景图片渐变效果
    在现代的网页设计中,丰富的背景效果可以提升网页的美观度和用户体验。其中,平滑滚动和背景图片渐变效果是常用的一种设计方式。本文将介绍如何通过纯CSS实现网页的平滑滚动背景图片渐变效果,并提供具体的代码示例。一、平滑滚动效果首先,我们需要创建一...
    99+
    2023-10-21
    平滑滚动 网页 关键词:CSS
  • vue如何监听滚动事件实现锚点链接平滑滚动
    这篇文章将为大家详细讲解有关vue如何监听滚动事件实现锚点链接平滑滚动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基于vue监听滚动事件,实现锚点链接平滑滚动近日在做一...
    99+
    2024-04-02
  • 在WPF中实现平滑滚动的方法详解
    WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果。在滚动的时候添加过渡动画能给我们的软件增色不少,例如Offic...
    99+
    2024-04-02
  • CSS属性实现平滑滚动效果的技巧
    CSS属性实现平滑滚动效果的技巧在网页设计中,滚动效果被广泛应用于菜单导航、页面到顶部和底部的平滑滚动等方面,使用户体验更加流畅和舒适。本文将介绍一些常用的CSS属性和代码示例,帮助你实现平滑滚动效果。一、通过CSS属性scroll-beh...
    99+
    2023-11-18
    平滑滚动 技巧 CSS属性
  • 如何通过css动画实现一个表格滚动轮播效果
    这篇文章主要介绍了如何通过css动画实现一个表格滚动轮播效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的...
    99+
    2023-06-08
  • JavaScript 实现页面滚动动画
    目录创建布局添加 CSS 样式用 JavaScript 操作元素获取目标元素默认淡出所有目标元素检测元素是否在视窗内给元素添加类名完善示例利用节流阀提高性能在做前端 UI 效果时,让...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作