简述

前面几节中我们介绍了关于动画的基本使用，有属性动画、串行动画组、并行动画组。这节我们来实现一些特效，让交互更顺畅。
**

示例

下面，我们以geometry、pos、windowOpacity属性为例，来实现窗体的下坠、抖动、透明度效果。

效果

2021-02-24-10-41-38.gif

代码

  1. #ifndef WIDGET_H
  2. #define WIDGET_H
  3. #include <QWidget>
  5. QT_BEGIN_NAMESPACE
  6. namespace Ui {
  7. class Widget;
  8. }
  9. QT_END_NAMESPACE
  11. class Widget : public QWidget {
  12.     Q_OBJECT
  14. public:
  15.     Widget(QWidget* parent = nullptr);
  16.     ~Widget();
  18. protected slots:
  19.     void onDropWindow();
  20.     void onShakeWindow();
  21.     void onOpacityWindow();
  23. private:
  24.     Ui::Widget* ui;
  25. };
  26. #endif // WIDGET_H
  1. #include "widget.h"
  2. #include "ui_widget.h"
  3. #include <QDebug>
  4. #include <QDesktopWidget>
  5. #include <QPropertyAnimation>
  6. #include <QSequentialAnimationGroup>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  14.     connect(ui->pushButton, &QPushButton::clicked, this, &Widget::onDropWindow);
  15.     connect(ui->pushButton_2, &QPushButton::clicked, this, &Widget::onShakeWindow);
  16.     connect(ui->pushButton_3, &QPushButton::clicked, this, &Widget::onOpacityWindow);
  17. }
  19. // 通过计算桌面的宽度、高度，来设置动画的起始值和结束值。
  20. void Widget::onDropWindow()
  21. {
  22.     QPropertyAnimation* pAnimation = new QPropertyAnimation(this, "geometry");
  24.     QDesktopWidget* pDesktopWidget = QApplication::desktop();
  25.     int x = (pDesktopWidget->availableGeometry().width() - width()) / 2;
  26.     int y = (pDesktopWidget->availableGeometry().height() - height()) / 2;
  28.     pAnimation->setDuration(1000);
  29.     pAnimation->setStartValue(QRect(x, 0, width(), height()));
  30.     pAnimation->setEndValue(QRect(x, y, width(), height()));
  31.     pAnimation->setEasingCurve(QEasingCurve::OutElastic);
  32.     pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
  33. }
  34. // 获取界面的坐标，然后进行上、下、左、右坐标浮动，通过setKeyValueAt()来设置每一时刻的位置，实现抖动效果。
  35. void Widget::onShakeWindow()
  36. {
  37.     QPropertyAnimation* pAnimation = new QPropertyAnimation(this, "pos");
  38.     pAnimation->setDuration(500);
  39.     pAnimation->setLoopCount(2);
  40.     pAnimation->setKeyValueAt(0, QPoint(geometry().x() - 3, geometry().y() - 3));
  41.     pAnimation->setKeyValueAt(0.1, QPoint(geometry().x() + 6, geometry().y() + 6));
  42.     pAnimation->setKeyValueAt(0.2, QPoint(geometry().x() - 6, geometry().y() + 6));
  43.     pAnimation->setKeyValueAt(0.3, QPoint(geometry().x() + 6, geometry().y() - 6));
  44.     pAnimation->setKeyValueAt(0.4, QPoint(geometry().x() - 6, geometry().y() - 6));
  45.     pAnimation->setKeyValueAt(0.5, QPoint(geometry().x() + 6, geometry().y() + 6));
  46.     pAnimation->setKeyValueAt(0.6, QPoint(geometry().x() - 6, geometry().y() + 6));
  47.     pAnimation->setKeyValueAt(0.7, QPoint(geometry().x() + 6, geometry().y() - 6));
  48.     pAnimation->setKeyValueAt(0.8, QPoint(geometry().x() - 6, geometry().y() - 6));
  49.     pAnimation->setKeyValueAt(0.9, QPoint(geometry().x() + 6, geometry().y() + 6));
  50.     pAnimation->setKeyValueAt(1, QPoint(geometry().x() - 3, geometry().y() - 3));
  51.     pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
  52. }
  54. // 设置每一时刻的透明度值，动画结束时界面还原（透明度再为1）。
  55. void Widget::onOpacityWindow()
  56. {
  57.     QPropertyAnimation* pAnimation = new QPropertyAnimation(this, "windowOpacity");
  58.     pAnimation->setDuration(1000);
  59.     pAnimation->setKeyValueAt(0, 1);
  60.     pAnimation->setKeyValueAt(0.5, 0);
  61.     pAnimation->setKeyValueAt(1, 1);
  62.     pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
  63. }
  65. Widget::~Widget()
  66. {
  67.     delete ui;
  68. }