效果
由于录制程序的原因,引起gif效果不清晰,可忽略。
资源
需要几张不同阶段的图标进行切换,这里使用8张。
源码
QPropertyAnimation动画里面并不支持旋转的属性,所以我们可以通过自定义来完成。
1 class MainWindow : public CustomWindow
2 {
3 Q_OBJECT
4 // 声明属性
5 Q_PROPERTY(int pixmap READ pixmap WRITE setPixmap)
6
7 public:
8 explicit MainWindow(QWidget *parent = 0);
9 ~MainWindow();
10 // 开始动画
11 void startAnimation();
12 // 停止动画
13 void stopAnimation();
14
15 private:
16 int pixmap() const;
17 // 切换图标
18 void setPixmap(const int index);
19
20 private:
21 QLabel *m_pLoadingLabel;
22 QPropertyAnimation *m_pAnimation;
23 int m_nIndex;
24 };
1 m_pAnimation = new QPropertyAnimation(this, "pixmap");
2 m_pAnimation->setDuration(1000);
3 // 永远运行,直到stop
4 m_pAnimation->setLoopCount(-1);
5
6 // 设置动画各区间的值
7 for (int i = 0; i < 8; ++i)
8 {
9 m_pAnimation->setKeyValueAt(i/7.0, i + 1);
10 }
11
12 // 开始动画
13 startAnimation();
1 void MainWindow::startAnimation()
2 {
3 m_pAnimation->start();
4 }
5
6 void MainWindow::stopAnimation()
7 {
8 m_pAnimation->stop();
9 }
10
11 int MainWindow::pixmap() const
12 {
13 return m_nIndex;
14 }
15
16 void MainWindow::setPixmap(const int index)
17 {
18 m_nIndex = index;
19
20 QPixmap pixmap(QString(":/Images/loading%1").arg(index));
21 m_pLoadingLabel->setPixmap(pixmap);
22 }
分析
首先我们通过Q_PROPERTY来声明属性,这样我们就可以在QPropertyAnimation动画中使用了,然后通过设置动画的时长、运行次数、各个区间的值达到切换图标的效果,然后动画就可以很流畅的实现了。因为这里存在8张图标,所以通过setKeyValueAt(i/7.0, i + 1)来设置各区间范围。
衍伸
上面我们使用了8张图标进行切换,另外一种方式-只使用一张,然后进行图标旋转。
1 // 设置动画各区间的值
2 for (int i = 0; i <= 10; ++i)
3 {
4 m_pAnimation->setKeyValueAt(i / 10.0, i);
5 }
6
7 void MainWindow::setPixmap(const int index)
8 {
9 m_nIndex = index;
10
11 // 图标旋转
12 QMatrix leftmatrix;
13 leftmatrix.rotate((360.0 / 10) * index);
14
15 QPixmap pixmap(QString(":/Images/loading1"));
16 QPixmap pix = pixmap.transformed(leftmatrix, Qt::SmoothTransformation);
17 m_pLoadingLabel->setPixmap(pix);
18 }
这里虽然只用了一张图片,但是存在一个问题,因为图片是28*28的,旋转角度如果不是90度的整数,那么,旋转后图片肯定会进行缩放,这时可能会造成上下跳动的情况,所以我们需要将图标固定到一个固定大小的控件里面,防止此情况的发生。