PyQt學習筆記-動畫學習(01)

摘要： Qt提供的動畫框架不僅可以讓程式介面更加豐富有趣(動態效果)，而且也讓遊戲開發成為了可能。本文我們會詳細介紹動畫框架中常用類的概念與使用。希望閱讀本章後讀者可以編寫出屬於自己的動態介面或者小遊戲。 一 完成效果 點選按鈕[大小變化]，控制元件大小發生變化； 點選按鈕...

Qt提供的動畫框架不僅可以讓程式介面更加豐富有趣(動態效果)，而且也讓遊戲開發成為了可能。本文我們會詳細介紹動畫框架中常用類的概念與使用。希望閱讀本章後讀者可以編寫出屬於自己的動態介面或者小遊戲。

一 完成效果

1. 點選按鈕[大小變化]，控制元件大小發生變化；

2. 點選按鈕[位置變化]，控制元件開始移動；

3. 點選按鈕[透明度變化]，控制元件的透明度由100%-0%-100%進行變化；

4.點選按鈕[重置]，控制元件恢復到初始位置。

二 屬性介紹

QPropertyAnimation類提供一個動畫屬性,主要用於實現某個屬性值從x到y的動畫變化.可以通過呼叫setStartValue（）和setEndValue（）來設定屬性的開始值和結束值，最後呼叫start（）來啟動動畫。也可以在起始值和結束值之間的指定步驟處設定關鍵值。然後插值將在指定的步驟展示動畫。請注意，起始值和結束值定義為0.0和1.0處的鍵值。

建立動畫步驟

1. 建立一個動畫，並設定目標和屬性；

2. 設定目標動畫的開始值、關鍵值、結束值；

3. 設定動畫時長；

4. 啟動動畫

建構函式實現

1. QPropertyAnimation(parent: QObject = None)

• 設定動畫目標: setTargetObject(self, QObject)

• 設定動畫屬性(位置、大小等): setPropertyName(self, Union[QByteArray, bytes, bytearray])

2. QPropertyAnimation(QObject, Union[QByteArray, bytes, bytearray], parent: QObject = None)

常見屬性

1. pos：控制元件位置

2. geometry：控制元件形狀

3. size：控制元件大小

4. windowOpacity:控制元件透明度

開始/結束/關鍵值

1. 設定開始值: setStartValue(self, Any)

2. 設定結束值: setEndValue(self, Any)

3. 設定關鍵值: setKeyValueAt(self, p_float, Any)

4.動畫時長

setDuration(int mesc)

5.開始動畫

start()

三 程式碼解讀

1-程式碼中建立了1個表格佈局，4個按鈕控制元件、2個顯示控制元件，將按鈕控制元件和顯示控制元件設定為表格佈局。

def setupUi(self):
gridlayout = QGridLayout()
btn1 = QPushButton('大小變化', self)
btn2 = QPushButton('位置變化', self)

btn3 = QPushButton('透明度變化', self)
btn3.setMaximumWidth(80)

self.label1 = QLabel('', self)
self.label1.setStyleSheet('background-color:gray')
self.label1.setMinimumHeight(50)


self.label2 = QLabel('', self)
self.label2.setStyleSheet('background-color:orange')
self.label2.setMinimumHeight(50)

self.btn4 = QPushButton('狀態重置',self)
self.btn4.setMinimumHeight(50)
self.btn4.setMaximumWidth(70)
self.btn4.setStyleSheet('background-color:red')

gridlayout.addWidget(btn1, 0, 0)
gridlayout.addWidget(btn2, 1, 0)
gridlayout.addWidget(btn3, 2, 0)

gridlayout.addWidget(self.label1, 0, 1)
gridlayout.addWidget(self.label2, 1, 1)
gridlayout.addWidget(self.btn4, 2, 1)

self.setLayout(gridlayout)

2-將按鈕控制元件和槽函式進行繫結

btn1.clicked.connect(self.sizeChange)
btn2.clicked.connect(self.rectChange)
btn3.clicked.connect(self.opactiyChange)
self.btn4.clicked.connect(self.reset)

**3-實現動畫的函式，也是本文的核心，每一行程式碼都做了註釋.

def create_animation(self, targetobject, startvalue, endvalue, propertyname=b'pos', flag=1, duration=5000):
# 1、建立動畫
self.animation = QPropertyAnimation()
# 2、設定動畫物件
self.animation.setTargetObject(targetobject)
# 3、設定動畫屬性 pos==>QPoint,geometry==>QRect ,windowOpacity==>浮點數
self.animation.setPropertyName(propertyname)
# 4、置動畫時長
self.animation.setDuration(duration)
# 5、設定動畫效果
self.animation.setEasingCurve(QEasingCurve.OutBounce)
# 6、設定關鍵值
if flag == 1:
#設定動畫的開始值
self.animation.setStartValue(startvalue)
#設定動畫的結束值
self.animation.setEndValue(endvalue)
else:
self.animation.setStartValue(startvalue)
#設定動畫的關鍵值
self.animation.setKeyValueAt(0.5, 0.5)
self.animation.setEndValue(endvalue)
# 7、啟動動畫
self.animation.start()

4-實現控制元件大小變化的函式，這裡主要是呼叫動畫函式，傳入動畫物件、動畫開始值、動畫結束值、動畫屬性，並做了異常處理。

def sizeChange(self):
'''控制元件大小發生變化'''
try:
label1_x = self.label1.x()
label1_y = self.label1.y()
label1_width = self.label1.width()
label1_height = self.label1.height()
label1_width_change = label1_width + 100
label1_height_change = label1_height + 30
self.label1_pos = self.label1.geometry()
print(self.label1.geometry())

self.create_animation(self.label1,
self.label1.geometry(),
QRect(label1_x, label1_y, label1_width_change, label1_height_change), b'geometry')
except Exception as e:
print(e)

5-實現控制元件位置變化的函式，這裡主要是呼叫動畫函式，傳入動畫物件、動畫開始值、動畫結束值，並做了異常處理。

def rectChange(self):
'''控制元件位置發生變化'''
try:
self.label2_pos = self.label2.geometry()
self.create_animation(self.label2, QPoint(self.label2.x(), self.label2.y()), QPoint(0, self.label2.y()))
except Exception as e:
print(e)

6-實現控制元件透明度變化的函式，這裡主要是呼叫動畫函式，傳入動畫物件、動畫開始值、動畫結束值、動畫屬性，以及特殊處理標誌2，並做了異常處理。

def opactiyChange(self):
'''頂層控制元件透明度發生變化'''
try:
self.create_animation(self, 0, 1, b'windowOpacity', 2)
except Exception as e:
print(e)

7-實現控制元件位置恢復初始化狀態

def reset(self):
print(self.label1_pos, self.label2_pos)
self.label1.setGeometry(self.label1_pos)
self.label2.setGeometry(self.label2_pos)

四 文章總結

總體來說，這個程式教程比較簡單，本文僅是動畫學習的第一章，後面文章會介紹序列動畫組、並行動畫組以及動畫在GUI介面的使用。

如果您想要本文的原始碼，請關注微訊號： 【車伊洛】 ，傳送關鍵字“動畫學習1”即可得到程式碼下載連結。