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”即可得到代码下载链接。