PyQt5之实现网易云播放唱片的动作(图片的旋转)

最近在做项目的播放器部分,在实现播放器像网易云那样点击播放唱片就会自动转动时遇到了问题,经过一套搜索引擎组合拳,终于是实现了该功能,成品如下
成品

闲话少说,上代码(代码部分做了大量的注释和个人理解,就不额外的解释了,因为我也是查大佬的案例过来的,所以理解仅供参考)

"""唱片"""
class Cp_Comp_1(QObject):
    def __init__(self):
        super(Cp_Comp_1, self).__init__()
        # 加载图片资源
        pixmap_1 = QPixmap('./img/main_UI/play/play_cp_comp1.png')
        # 按比例设置图片大小
        scaledPixmap_1 = pixmap_1.scaled(150,150)
        # 初始化动作
        self.animation()
        # 定义QGraphicsPixmapItem
        self.pixmap_item_1 = QGraphicsPixmapItem(scaledPixmap_1)
        # 设置item旋转的中心点
        self.pixmap_item_1.setTransformOriginPoint(75,75)   # 中心
        # 设置图片的初始位置
        self.pixmap_item_1.setPos(0,30)

    def _set_rotation(self,degree):
        self.pixmap_item_1.setRotation(degree)    # 自身改变角度
    def animation(self):
        # 创建唱片360°无死角转动
        self.anim = QPropertyAnimation(self, b'rotation')   # 动画类型('rotation':转动,'pos':位置移动)
        self.anim.setDuration(40000)     # 运行的秒速(经测试,网易云用户每播放40s的歌曲,世界上就会有一张无辜唱片被转动一周)
        self.anim.setStartValue(0)  # 起始角度
        self.anim.setEndValue(360)  # 结束角度
        self.anim.setLoopCount(-1)  # 设置循环次数
    rotation = pyqtProperty(int, fset=_set_rotation)    # 属性动画改变自身数值(传递信号??)

"""把柄"""
class Cp_Comp_2(QObject):
    def __init__(self):
        super(Cp_Comp_2, self).__init__()
        # 加载图片资源
        pixmap_2 = QPixmap('./img/main_UI/play/play_cp_comp2.png')
        # 按比例设置图片大小
        scaledPixmap_2 = pixmap_2.scaled(85,50)
        # 初始化动作
        self.animation()
        # 定义QGraphicsPixmapItem
        self.pixmap_item_2 = QGraphicsPixmapItem(scaledPixmap_2)
        # 设置item旋转的中心点
        self.pixmap_item_2.setTransformOriginPoint(0,0) # 左上角
        # 设置图片的初始位置
        self.pixmap_item_2.setPos(70,-12)

    def _set_rotation(self,degree):
        self.pixmap_item_2.setRotation(degree)    # 自身改变角度
    def animation(self):
        # 转轴转动的动画之开和关
        self.anim_1 = QPropertyAnimation(self, b'rotation')
        self.anim_1.setStartValue(0)  # 起始角度
        self.anim_1.setEndValue(30)  # 结束角度
        self.anim_1.setLoopCount(1)  # 设置循环次数
        self.anim_2 = QPropertyAnimation(self, b'rotation')
        self.anim_2.setStartValue(30)  # 起始角度
        self.anim_2.setEndValue(0)  # 结束角度
        self.anim_2.setLoopCount(1)  # 设置循环次数

    rotation = pyqtProperty(int, fset=_set_rotation)    # 属性动画改变自身数值(传递信号??)
"""呈现动画的界面"""
"""因为QWeidget之类的是静态的,所以不能用来作为动画的呈现界面(是这样子理解的吧)"""
class View(QGraphicsView):
    def __init__(self):
        super(View, self).__init__()
        self.resize(180,220)
        self.setAttribute(Qt.WA_TranslucentBackground)  # 透明背景
        self.setWindowFlags(Qt.FramelessWindowHint) # 无边框
        self.setStyleSheet('background:cyan')
        self.initView()
    def initView(self):
        self.cp_comp_1 = Cp_Comp_1()
        self.cp_comp_2 = Cp_Comp_2()
        self.scene = QGraphicsScene(self)
        self.scene.setSceneRect(-10,0,170,210)    # 设置动画区域,在此区域内的控件会被动态刷新
        self.scene.addItem(self.cp_comp_1.pixmap_item_1)   # 往容器里面添加item
        self.scene.addItem(self.cp_comp_2.pixmap_item_2)   # 往容器里面添加item
        self.setScene(self.scene)       # 英文翻译:设置场景??

        btn_1 = QPushButton('播放',self)
        btn_1.setGeometry(10,178,40,40)
        btn_1.clicked.connect(self.start)
        btn_2 = QPushButton('暂停',self)
        btn_2.setGeometry(138,178,40,40)
        btn_2.clicked.connect(self.stop)

    def start(self):
        self.cp_comp_1.anim.start()
        self.cp_comp_2.anim_1.start()
    def stop(self):
        self.cp_comp_1.anim.pause()
        self.cp_comp_2.anim_2.start()

app = QApplication(argv)
vi = View()
vi.show()
exit(app.exec_())

这里的动作演示仅是作为案例分享

项目进程:PyQt5初级实战项目-ABAB阅读器
参考文献:pyqt5 动画学习(四) 旋转动画

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MGodmonkey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值