PyQt5之图片轮播

之前看到了QStackedWidget做切换动画,让界面不那么生硬,于是参考了http://qt.shoutwiki.com/wiki/Extending_QStackedWidget_for_sliding_page_animations_in_Qt做了一个QStackedWidget的切换动画,然后利用QStackedWidget结合多个QLabel显示图片来做一个轮播效果。

其实在写之前也在网上找了很多例子,参看过后发现大多例子都是利用到了paintEvent去绘制,这样其实还是比较麻烦,个人觉得更好的方式是使用QPropertyAnimation属性动画修改控件中QLabel图片控件的pos位置属性就可以达到移动效果了。

1、比较核心的算法就是要计算当前页面和下一个页面的位置偏移量,比如:

# 计算偏移量
offsetX = self.frameRect().width()
offsetY = self.frameRect().height()
w_next.setGeometry(0, 0, offsetX, offsetY)

if direction == self.BOTTOM2TOP:
    offsetX = 0
    offsetY = -offsetY
elif direction == self.TOP2BOTTOM:
    offsetX = 0
elif direction == self.RIGHT2LEFT:
    offsetX = -offsetX
    offsetY = 0
elif direction == self.LEFT2RIGHT:
    offsetY = 0

# 重新定位显示区域外部/旁边的下一个窗口小部件
pnext = w_next.pos()
pnow = w_now.pos()
self._pnow = pnow

# 移动到指定位置并显示
w_next.move(pnext.x() - offsetX, pnext.y() - offsetY)
w_next.show()
w_next.raise_()

2、其次是对这两个页面增加关联pos属性的QPropertyAnimation动画,然后加入到并行动画组QParallelAnimationGroup中再启动即可。

3、对QStackedWidgetsetCurrentIndexsetCurrentWidget这两个函数进行了覆盖重写达到及时手动调用这两个函数也会产生动画效果的目的。

截图

代码下载

云盘下载

点赞
  1. xujingqq说道:
    Google Chrome Windows 7

    厉害了我的哥,怎么下载不了

    1. irony说道:
      Google Chrome Windows 10

      链接更新了。重新点击 :tushe:

  2. gokey说道:
    Google Chrome Windows 10

    厉害哦

  3. hyxion说道:
    Google Chrome Windows 10

    厉害了,老大

  4. wqdiyx说道:
    Google Chrome Windows 7

    下载不了

  5. wqdiyx说道:
    Google Chrome Windows 7

    看起来很炫

  6. wwqwe123说道:
    Google Chrome Windows 10

    xuexixuexi

  7. mrvx说道:
    Google Chrome Windows 10

    刚好需要,下载学习

  8. 子墨 子墨说道:
    Google Chrome Windows 10

    厉害!

  9. 紫魔戒说道:
    Google Chrome Mac OS X 10.14.1

    学习学习~~~~~~~~

  10. 紫魔戒说道:
    Google Chrome Mac OS X 10.14.1

    学习学习~~~~~~~~~~

  11. irony说道:
    QQbrowser Windows 10

    还不快点说点什么呀 :tushe:

  12. DF说道:
    Google Chrome Windows 10

    厉害了,老大

发表评论