简述

QPropertyAnimation类定义了Qt的属性动画。

QPropertyAnimation以Qt属性做差值，作为属性值存储在QVariants中，该类继承自QVariantAnimation，并支持基类相同的元类型动画。

声明属性的类必须是一个QObject，为了能够让属性可以用做动画效果，必须提供一个setter（这样，QPropertyAnimation才可以设置属性的值）。注意：这能够使它让许多Qt控件产生动画效果。

详细描述

来看一个示例：

  1. QPropertyAnimation *animation = new QPropertyAnimation(myWidget, "geometry");
  2. animation->setDuration(10000);
  3. animation->setStartValue(QRect(0, 0, 100, 30));
  4. animation->setEndValue(QRect(250, 250, 100, 30));
  6. animation->start();

首先，我们通过构造函数创建一个QPropertyAnimation对象，其中myWidget表示动画作用的QObject对象，geometry则表示QObject的属性。然后，可以指定属性的开始值和结束值。此过程等于在你自己的类中实现了自定义属性 - 需要用QVariantAnimation检测你自定义的QVariant类型是否支持。

QVariantAnimation类详细的描述了如何设置动画。需要注意的是：如果没有设置起始值，在QPropertyAnimation实例被创建时，属性就会设置起始值为它有的值。

QPropertyAnimation就其本身而言非常奏效。对于复杂的动画，例如：包含多个对象，则可以使用QAnimationGroup，动画组是一个可以包含其它动画的动画，并可以管理动画的播放。可以参考QParallelAnimationGroup的示例。

公共函数

  • QByteArray propertyName() const
    返回动画的目标属性名
  • void setPropertyName(const QByteArray & propertyName)
    设置动画的目标属性名
  • void setTargetObject(QObject * target)
    设置动画作用的QObject对象

  • QObject * targetObject() const
    返回动画作用的QObject对象

    示例

    原始属性

    下面，利用上面讲解的geometry属性，来实现一个动画坐标变化。

    效果

    2021-02-24-09-06-38.gif

    源码

    1.   ui->label->move(0, 0);
    2.   ui->label->setFixedSize(75, 25);
    4.   QPropertyAnimation* pAnimation = new QPropertyAnimation(ui->label, "geometry");
    5.   pAnimation->setDuration(1500);
    6.   pAnimation->setStartValue(QRect(QPoint(0, 0), ui->label->size()));
    7.   pAnimation->setEndValue(QRect(QPoint(this->width() - 75, this->height() - 25),
    8.       ui->label->size()));
    9.   pAnimation->setEasingCurve(QEasingCurve::OutBounce); // 缓和曲线风格
    10.   connect(ui->pushButton, SIGNAL(clicked(bool)), pAnimation, SLOT(start()));

    自定义属性

    通过自定义属性alpha，来使用动画设置标签的样式。

    效果

    2021-02-24-09-35-37.gif

    源码

    1. Widget::Widget(QWidget* parent)
    2.   : QWidget(parent)
    3.   , ui(new Ui::Widget)
    4. {
    5.   ui->setupUi(this);
    7.   QPropertyAnimation* pAnimation = new QPropertyAnimation();
    8.   pAnimation->setTargetObject(this);
    9.   pAnimation->setPropertyName("alpha");
    10.   pAnimation->setDuration(1000);
    11.   pAnimation->setKeyValueAt(0, 255);
    12.   pAnimation->setKeyValueAt(0.5, 100);
    13.   pAnimation->setKeyValueAt(1, 255);
    14.   pAnimation->setLoopCount(-1); //永远运行，直到stop
    15.   connect(ui->pushButton, SIGNAL(clicked(bool)), pAnimation, SLOT(start()));
    16.   connect(pAnimation, &QPropertyAnimation::valueChanged, this, [=](const QVariant& value) {
    17.       QString strQSS = QString("color: red;"
    18.                                "background-color: rgba(10, 160, 105, %1);")
    19.                            .arg(value.toInt());
    20.       ui->label->setStyleSheet(strQSS);
    21.   });
    22. }

如果你想要实现更多其它效果，都可以自定义。但一定要注意以下两点：

  1. 需要用QVariantAnimation检测你自定义的QVariant类型是否支持。
  2. 声明属性的类必须是一个QObject，必须为属性提供一个setter（这样，QPropertyAnimation才可以设置属性的值）。