使用PyQt5的動畫功能實現(xiàn)足球射門效果

stefanieliang 發(fā)布于2019-07-30 17:35 / 1047人閱讀

摘要：作為一個全面的桌面應(yīng)用程序開發(fā)包，其自然提供了對圖像的動畫支持。本篇文章中，就來簡單地在中使用動畫功能實現(xiàn)一個足球射門的動畫效果。還記得上面我們提過的這個用于設(shè)置動畫關(guān)鍵幀的方法。在中使用動畫是不是很簡單有問題歡迎留言討論。

QT作為一個全面的桌面應(yīng)用程序開發(fā)包，其自然提供了對圖像的動畫支持。本篇文章中，就來簡單地在PYQt5中使用Animation動畫功能實現(xiàn)一個足球射門的動畫效果。

本篇將會依次完成以下功能：

在GUI界面中顯示一個圖片（用一個足球做演示）；

點擊按鈕實現(xiàn)足球的直線射門動畫；

點擊按鈕實現(xiàn)足球的曲線射門動畫；

本文首發(fā)州的先生博客:Python GUI教程（十五）：在PyQt5中使用動畫,轉(zhuǎn)載請注明出處

一、在圖形界面顯示圖片的兩種方法

一般情況下，想要在GUI中顯示圖片，我們會通過：

實例化一個QLable()部件；

實例化一個QPixmap()圖形類；

通過QLabel()部件的setPixmap()方法設(shè)置QLabel()部件的圖形；

就像如下代碼所示：

# coding:utf-8

from PyQt5 import QtGui,QtWidgets
import sys

class MainUi(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("動畫使用-zmister.com") # 設(shè)置窗口標題
        self.resize(400,200) # 規(guī)定窗口大小
        self.main_widget = QtWidgets.QWidget() # 創(chuàng)建一個widget部件
        self.label = QtWidgets.QLabel(self.main_widget) # 創(chuàng)建一個文本標簽部件
        png = QtGui.QPixmap() # 創(chuàng)建一個繪圖類
        png.load("logo.png") # 從pngz中加載一個圖片
        self.label.setPixmap(png) # 設(shè)置文本標簽的圖形
        self.setCentralWidget(self.main_widget)

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    gui = MainUi()
    gui.show()
    sys.exit(app.exec_())

運行上述代碼，我們將會得到如下所示的圖形界面：

但是這種方法沒有辦法實現(xiàn)對圖片更多的控制。為了更好地對圖形界面中的圖片進行控制和管理，我們還需要使用到其他的類，比如QtWidgets中的QGraphicsScene類，QGraphicsScene提供了一個場景，用于對2D圖形進行管理。同時，為了展示QGraphicsScene中的內(nèi)容，我們還需要使用到QtWidgets中的QGraphicsView類來提供一個視圖部件。

下面，我們就通過一個簡單的例子來了解一下QGraphicsScene類和QGraphicsView類的使用。

首先是完整的代碼，如下所示：

# coding:utf-8

from PyQt5 import QtGui,QtWidgets,QtCore
import sys

class MainUi(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("動畫使用-zmister.com") # 設(shè)置窗口標題
        self.resize(400,200) # 規(guī)定窗口大小
        self.main_widget = QtWidgets.QWidget() # 創(chuàng)建一個widget部件

        self.grapview = QtWidgets.QGraphicsView(self.main_widget) # 創(chuàng)建一個圖形視圖，繼承自main_widget
        self.grapview.setGeometry(QtCore.QRect(10, 10, 380, 180)) # 設(shè)置圖形視圖的矩形區(qū)域
        self.scene = QtWidgets.QGraphicsScene() # 創(chuàng)建一個圖形管理場景
        self.grapview.setScene(self.scene)
        png = QtGui.QPixmap() # 創(chuàng)建一個繪圖類
        png.load("logo.png") # 從png中加載一個圖片
        item = QtWidgets.QGraphicsPixmapItem(png) #
        self.scene.addItem(item)

        self.setCentralWidget(self.main_widget)

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    gui = MainUi()
    gui.show()
    sys.exit(app.exec_())

在這里面，基礎(chǔ)的窗口代碼與之前的代碼類似，有區(qū)別且最核心的為以下幾行代碼。

首先，我們實例化創(chuàng)建了一個用于展示圖形場景的圖形視圖QGraphicsView()，將它繼承自self.main_widget主窗口部件：

self.grapview = QtWidgets.QGraphicsView(self.main_widget)

然后，我們實例化創(chuàng)建了一個圖形場景管理類QGraphicsScene()，并通過setScene()方法將圖形視圖self.grapview的圖形場景設(shè)置為剛剛實例化創(chuàng)建的QGraphicsScene()：

self.scene = QtWidgets.QGraphicsScene()
self.grapview.setScene(self.scene)

最后，我們通過QPixmap()創(chuàng)建并加載了一個圖片，將其添加到圖形項目QGraphicsPixmapItem()中，并通過addItem()方法將圖形項目添加到圖形場景管理self.scene中：

png = QtGui.QPixmap()
png.load("logo.png")
item = QtWidgets.QGraphicsPixmapItem(png)
self.scene.addItem(item)

如此，我們就完成了通過QGraphicsView()類和QGraphicsScene()類在圖形界面（GUI）中展示圖片的功能，運行完整的代碼，其顯示出來的圖形界面程序如下圖所示：

二、幾行代碼射個門

上面我們通過兩種不同的方式實現(xiàn)了圖片在圖形界面中的展示，接下來，我們借助QtCore中的QPropertyAnimation()來實現(xiàn)圖片的動畫效果。

QPropertyAnimation()類主要依靠操縱對象的QT屬性來實現(xiàn)動畫效果，其有幾個比較主要的方法：

start():用于啟動動畫；

stop()：用于停止動畫；

setStartValue()：用于設(shè)置動畫的起始值；

setEndValue()：用于設(shè)置動畫的結(jié)束值；

setDuration()：用于設(shè)置動畫的持續(xù)時間；

setKeyValueAt()：用于在特定時間創(chuàng)建一個關(guān)鍵的動畫幀動作；

setLoopCount()：用于設(shè)置動畫的循環(huán)次數(shù)；

下面我們就使用QPropertyAnimation()類實現(xiàn)圖片的動畫。為了動畫的效果比5毛特效要好一點，州的先生（公眾號：zmister2016）在阿里的圖標庫iconfont里找了一個小足球和球門的圖標，嗯，就像這樣：

然后，我們創(chuàng)建一個圖形界面，里面包含一個按鈕、一個小球和一個球門的圖片：

# coding:utf-8
from PyQt5 import QtGui,QtWidgets,QtCore
import sys

class MainUi(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("動畫使用-zmister.com") # 設(shè)置窗口標題
        self.resize(400,200) # 規(guī)定窗口大小
        self.main_widget = QtWidgets.QWidget() # 創(chuàng)建一個widget部件
        self.button = QtWidgets.QPushButton("射門",self.main_widget) # 創(chuàng)建一個按鈕
        self.button.setGeometry(10,10,60,30) # 設(shè)置按鈕位置
        self.label = QtWidgets.QLabel(self.main_widget) # 創(chuàng)建一個文本標簽部件用于顯示足球
        self.label.setGeometry(50,80,50,50) # 設(shè)置足球位置
        png = QtGui.QPixmap()  # 創(chuàng)建一個繪圖類
        png.load("football.png")  # 從png中加載一個圖片
        self.label.setPixmap(png)  # 設(shè)置文本標簽的圖形
        self.label.setScaledContents(True)

        self.qiumen = QtWidgets.QLabel(self.main_widget)  # 創(chuàng)建一個文本標簽部件用于顯示球門
        self.qiumen.setGeometry(345, 75, 50, 50)  # 設(shè)置球門位置
        pngqiumen = QtGui.QPixmap()  # 創(chuàng)建一個繪圖類
        pngqiumen.load("qiumen.png")  # 從png中加載一個圖片
        self.qiumen.setPixmap(pngqiumen)  # 設(shè)置文本標簽的圖形

        self.setCentralWidget(self.main_widget)

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    gui = MainUi()
    gui.show()
    sys.exit(app.exec_())

運行上述代碼，我們會得到一個如下圖所示的圖形界面：

我們的目的是想讓圖形界面中的小足球通過按鈕控制，進入到球門中。接下來，我們就通過QPropertyAnimation()類來實現(xiàn)這個效果。

在MainUi()中新建一個名為shoot()的方法，在其中寫入以下代碼：

self.anim = QtCore.QPropertyAnimation(self.label,b"geometry") # 設(shè)置動畫的對象及其屬性
self.anim.setDuration(2000) # 設(shè)置動畫間隔時間
self.anim.setStartValue(QtCore.QRect(50,80,50,50)) # 設(shè)置動畫對象的起始屬性
self.anim.setEndValue(QtCore.QRect(360, 90, 10, 10)) # 設(shè)置動畫對象的結(jié)束屬性
self.anim.start() # 啟動動畫

最后，我們再講按鈕的點擊信號綁定到shoot()方法上：

self.button.clicked.connect(self.shoot)

完整的代碼如下所示：

# coding:utf-8
from PyQt5 import QtGui,QtWidgets,QtCore
import sys

class MainUi(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("動畫使用-zmister.com") # 設(shè)置窗口標題
        self.resize(400,200) # 規(guī)定窗口大小
        self.main_widget = QtWidgets.QWidget() # 創(chuàng)建一個widget部件
        self.button = QtWidgets.QPushButton("射門",self.main_widget) # 創(chuàng)建一個按鈕
        self.button.setGeometry(10,10,60,30) # 設(shè)置按鈕位置
        self.button.clicked.connect(self.shoot)
        self.label = QtWidgets.QLabel(self.main_widget) # 創(chuàng)建一個文本標簽部件用于顯示足球
        self.label.setGeometry(50,80,50,50) # 設(shè)置足球位置
        png = QtGui.QPixmap()  # 創(chuàng)建一個繪圖類
        png.load("football.png")  # 從png中加載一個圖片
        self.label.setPixmap(png)  # 設(shè)置文本標簽的圖形
        self.label.setScaledContents(True) # 圖片隨文本部件的大小變動

        self.qiumen = QtWidgets.QLabel(self.main_widget)  # 創(chuàng)建一個文本標簽部件用于顯示球門
        self.qiumen.setGeometry(345, 75, 50, 50)  # 設(shè)置球門位置
        pngqiumen = QtGui.QPixmap()  # 創(chuàng)建一個繪圖類
        pngqiumen.load("qiumen.png")  # 從png中加載一個圖片
        self.qiumen.setPixmap(pngqiumen)  # 設(shè)置文本標簽的圖形

        self.setCentralWidget(self.main_widget)

    def shoot(self):
        self.anim = QtCore.QPropertyAnimation(self.label,b"geometry") # 設(shè)置動畫的對象及其屬性
        self.anim.setDuration(2000) # 設(shè)置動畫間隔時間
        self.anim.setStartValue(QtCore.QRect(50,80,50,50)) # 設(shè)置動畫對象的起始屬性
        self.anim.setEndValue(QtCore.QRect(360, 90, 10, 10)) # 設(shè)置動畫對象的結(jié)束屬性
        self.anim.start() # 啟動動畫

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    gui = MainUi()
    gui.show()
    sys.exit(app.exec_())

運行上述代碼，點擊“射門”按鈕，我們將會得到如下動圖所示的動畫：

這樣，通過QPropertyAnimation()的setDuration()方法、setStartValue()方法、setEndValue()方法我們就實現(xiàn)了一個簡單的動畫。

三、圓月彎刀繼續(xù)射門

但是上面的射門動畫是一條直線將小足球移動到了球門之內(nèi)，簡單粗暴欠缺了些許美感，下面，我們讓這個射門換一種方式，用圓月彎刀的香蕉球?qū)⑿∽闱蛏淙肭蜷T。

還記得上面我們提過QPropertyAnimation()的setKeyValueAt()這個用于設(shè)置動畫關(guān)鍵幀的方法。現(xiàn)在我們就將利用它來實現(xiàn)足球射門時的曲線。

與上面的圖形界面的代碼不一樣的是，我們需要繪制一條曲線線條來作為足球射門時的路徑。所以我們需要對上面的圖形界面的代碼進行一些修改：

# coding:utf-8
from PyQt5 import QtGui,QtWidgets,QtCore
import sys

class MainUi(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("動畫使用-州的先生zmister.com") # 設(shè)置窗口標題
        self.resize(400,200) # 規(guī)定窗口大小
        self.main_widget = QtWidgets.QWidget() # 創(chuàng)建一個widget部件
        self.button = QtWidgets.QPushButton("射門",self.main_widget) # 創(chuàng)建一個按鈕
        self.button.setGeometry(10,10,60,30) # 設(shè)置按鈕位置

        self.label = QtWidgets.QLabel(self.main_widget) # 創(chuàng)建一個文本標簽部件用于顯示足球
        self.label.setGeometry(50,150,50,50) # 設(shè)置足球位置
        png = QtGui.QPixmap()  # 創(chuàng)建一個繪圖類
        png.load("football.png")  # 從png中加載一個圖片
        self.label.setPixmap(png)  # 設(shè)置文本標簽的圖形
        self.label.setScaledContents(True) # 圖片隨文本部件的大小變動

        self.qiumen = QtWidgets.QLabel(self.main_widget)  # 創(chuàng)建一個文本標簽部件用于顯示球門
        self.qiumen.setGeometry(345, 75, 50, 50)  # 設(shè)置球門位置
        pngqiumen = QtGui.QPixmap()  # 創(chuàng)建一個繪圖類
        pngqiumen.load("qiumen.png")  # 從png中加載一個圖片
        self.qiumen.setPixmap(pngqiumen)  # 設(shè)置文本標簽的圖形

        self.path = QtGui.QPainterPath() # 實例化一個繪制類，用于繪制動作
        self.path.moveTo(50, 150)
        self.path.cubicTo(50, 150, 50, 20, 370, 90)

        self.setCentralWidget(self.main_widget)

    # 重寫patintEvent()方法
    def paintEvent(self, e):
        qp = QtGui.QPainter()
        qp.begin(self)
        qp.drawPath(self.path) # 在圖形界面上根據(jù)self.path繪制一條線條
        qp.end()
        
if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)
    gui = MainUi()
    gui.show()
    sys.exit(app.exec_())

在上面的代碼中，與之前的程序代碼有一下不同之處：

我們實例化創(chuàng)建了一個QtGui.QPainterPath()，用于進行繪制操作。通過它的moveTo()方法，設(shè)置了繪制的起始點，通過它的cubicTo()方法，設(shè)置的繪制的整個路徑：

self.path = QtGui.QPainterPath() # 實例化一個繪制類，用于繪制動作
self.path.moveTo(50, 150)
self.path.cubicTo(50, 150, 50, 20, 370, 90)

接著，我們重寫了窗口的paintEvent()方法，根據(jù)繪制操作的定義，在圖形上繪制一條相應(yīng)的線條：

def paintEvent(self, e):
    qp = QtGui.QPainter()
    qp.begin(self)
    qp.drawPath(self.path) # 在圖形界面上根據(jù)self.path繪制一條線條
    qp.end()

這樣，我們的圖形界面程序呈現(xiàn)出來的就是如下圖所示的樣子：

圖形上呈現(xiàn)了我們設(shè)置的足球?qū)⒁\動的軌跡，接下來，我們通過QPropertyAnimation()的setKeyValueAt()設(shè)置關(guān)鍵幀的路徑，來實現(xiàn)足球曲線射門，具體操作同樣在shoot()方法中進行：

def shoot(self):
    self.anim_x = QtCore.QPropertyAnimation(self.label, b"geometry")                    self.anim_x.setDuration(3000)
    self.anim_x.setStartValue(QtCore.QRect(50,150,50,50)) # 設(shè)置動畫對象的起始屬性
    positionValues = [n / 10  for n in range(0, 10)]
    for n,i in enumerate(positionValues):
        x = self.path.pointAtPercent(i).x()
        y = self.path.pointAtPercent(i).y()
        z =  50 - n*3.5
        self.anim_x.setKeyValueAt(i,QtCore.QRect(x, y,z,z))
        self.anim_x.setEndValue(QtCore.QRect(360, 90, 10, 10))
        self.anim_x.start()

最后，同樣將“射門”按鈕的點擊信號綁定在shoot()方法上。運行程序代碼，點擊“射門”按鈕，將會出現(xiàn)如下動圖所示的動畫效果：

為了更加的美觀，其實可以將重寫的paintEvent()去掉，在這里為了演示路徑，就沒有去除。

在PyQt5中使用動畫是不是很簡單？有問題歡迎留言討論。

GPU云服務(wù)器云服務(wù)器 asp功能的實現(xiàn) js實現(xiàn)f11的效果浮動效果動畫翻轉(zhuǎn)動畫效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/42287.html

發(fā)表評論

登陸后可評論

0條評論

stefanieliang

男|高級講師

我要關(guān)注我要私信

TA的文章

趣米云：停服運營公告，請大家及時備份數(shù)據(jù)，請大家申請退款

閱讀 1758·2021-09-27 14:02
SimpleFOC移植STM32（四）—— 閉環(huán)控制

閱讀 3148·2021-09-27 13:36
(譯)響應(yīng)式圖片— srcset 和 sizes 屬性

閱讀 1052·2019-08-30 12:46
css里的BFC用法

閱讀 1841·2019-08-30 10:51
Flexbox Guide

閱讀 3578·2019-08-29 17:02
實現(xiàn)一個掃描商品條碼進行評價或留言的小程序（附源碼）

閱讀 946·2019-08-29 16:38
CSS設(shè)置容器和屏幕高度一致

閱讀 1853·2019-08-29 16:37
Vue項目的部署簡述

閱讀 3023·2019-08-26 10:32

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用PyQt5的動畫功能實現(xiàn)足球射門效果

相關(guān)文章

世界杯押注還得看技術(shù)流，這個預(yù)測AI把賠率也算上了

這里有一個機器學習模型，它知道2.2億歐元的內(nèi)馬爾值不值得買

姆巴佩獨造三球一戰(zhàn)成名阿里云打破世界杯流量紀錄

發(fā)表評論

0條評論

stefanieliang

男|高級講師

TA的文章

趣米云：停服運營公告，請大家及時備份數(shù)據(jù)，請大家申請退款

SimpleFOC移植STM32（四）—— 閉環(huán)控制

(譯)響應(yīng)式圖片— srcset 和 sizes 屬性

css里的BFC用法

Flexbox Guide

實現(xiàn)一個掃描商品條碼進行評價或留言的小程序（附源碼）

CSS設(shè)置容器和屏幕高度一致

Vue項目的部署簡述

最新活動