qt同时两个动画执行_Qt动画使用总结

自己开发了一个股票智能分析软件，功能很强大，需要的点击下面的链接获取：

Qt动画

目录

1      简介

1.1     Qt动画类介绍

2      基础动画实现

2.1     Qt控件大小缩放和位置变化

2.2     透明度控制隐藏和显示

2.3     并行动画

2.4     串行动画

2.5     动画执行方向设置

2.6     动画循环次数设置

2.7     动画执行结束的操作

3      Qt的高级动画应用

3.1     Qt自定义动画属性实现背景色透明度动画

3.2     Tab条选择跟随移动

3.2.1     应用场景说明

3.2.2     实现方法

3.3     Qt实现数字滚动动画效果

3.3.1     应用场景说明

3.3.2     实现方法

4      附录

4.1     Qt动画QEasingCurve的速度曲线

1       简介

1.1  Qt动画类介绍

类名

功能介绍

QAbstractAnimation

动画基类

提供基本的动画属性和接口，它有两个子类QVariantAnimation 和QAnimationGroup。QAbstractAnimation是其他所有类的父类。它提供了基础的属性，适用于所有的本框架下的动画。

QPropertyAnimation

实际的动画类

，实现了一个Qt动画属性，比如对控件的大小缩放、位置移动、透明度变化的动画效果实现。修改的属性一定是类具有的属性，类中要有属性定义Q_PROPERTY(QRect geometry READ geometry WRITE setGeometry)，否则要声明属性，并实践READ和WRITE方法。

QParallelAnimationGroup

并行动画类

将多个属性动画QPropertyAnimation添加到一个QParallelAnimationGroup，实现并行执行动画。

QSequentialAnimationGroup

串行动画类

QSequentialAnimationGroup，将多个QPropertyAnimation串联在一起实现，按照添加顺序先后执行动画。

QPauseAnimation停顿类

在串行动画中，添加一个暂停的动画，可以实现延时效果。

QEasingCurve速度曲线类

Qt动画运动的速度曲线，枚举了45种，详见附录。

2       基础动画实现

2.1  Qt控件大小缩放和位置变化

通过修改geometry属性实现坐标和大小的动画效果。通过创建QPropertyAnimation对象，关联widget控件ui.widgetProcess，设置属性geometry。QRect(x，y，width，hight)，通过设置x，y改变位置，通过设置width和hight来改变大小。如下图所示，相似度widget向上移动同时隐藏。进度显示widget窗口从下往上移动，从隐藏到显示。

下面是坐标控制

QPropertyAnimation * pWidgetProcessUp = new QPropertyAnimation(ui.widgetProcess, "geometry");

pWidgetProcessUp->setDuration(300);//设置动画执行时间，单位毫秒

pWidgetProcessUp->setStartValue(QRect(140, 688, 534, 48));//初始值

pWidgetProcessUp->setEndValue(QRect(140, 668, 534, 48));//结束值

pWidgetProcessUp->setEasingCurve(QEasingCurve::Linear);设置速度曲线

pWidgetProcessUp->start(QAbstractAnimation::DeleteWhenStopped);//执行动画，结束后删除对象

2.2  透明度控制隐藏和显示

因为qt控件没有透明度属性opacity，所以需要通过QGraphicsOpacityEffect实现控件绘图效果实现透明度改变

头文件定义

QGraphicsOpacityEffect* m_widgetProcessOpacity;

构造函数中定义

m_widgetProcessOpacity=new  QGraphicsOpacityEffect (ui.widgetProcess);//创建QGraphicsOpacityEffect对象关联控件ui.widgetProcess

m_widgetProcessOpacity->setOpacity(0);//设置透明度为0，隐藏控件

ui.widgetProcess->setGraphicsEffect(m_widgetProcessOpacity);//控件添加绘图效果

函数中使用

QPropertyAnimation* pWidgetProcessOpacity = new QPropertyAnimation(m_widgetProcessOpacity, "opacity", ui.widgetProcess);

pWidgetProcessOpacity->setDuration(300);

pWidgetProcessOpacity->setStartValue(0);

pWidgetProcessOpacity->setEndValue(1);

pWidgetProcessOpacity->setEasingCurve(QEasingCurve::Linear);

pWidgetProcessOpacity->start(QAbstractAnimation::DeleteWhenStopped);//执行动画，结束后删除对象。

2.3  并行动画

实际使用中需要将多个控件的属性动画一起执行，实现丰富的动画效果，将多个属性动画QPropertyAnimation添加到一个QParallelAnimationGroup，实现并行执行动画。例如将上面的两个动画合并，同时改变控件ui.widgetProcess的位置、大小、透明度。

QParallelAnimationGroup* pParaTwo = new QParallelAnimationGroup(this);

pParaTwo->addAnimation(pWidgetProcessUp);

pParaTwo->addAnimation(pWidgetProcessOpacity);

pParaTwo-> start(QAbstractAnimation::DeleteWhenStopped);//执行后删除

2.4  串行动画

可以实现同一个控件的不同属性变化串行，也可以实现多个控件的串行动画。还可以在动画之间添加暂停动画QPauseAnimation，实现延时的效果。

QSequentialAnimationGroup* pSequenAno = new QSequentialAnimationGroup(this);

//透明度从0变为1，显示出来；

pSequenAno->addAnimation(pWidgetProcessOpacity);

//暂停一秒

QPauseAnimation *pPauseAnimation = new QPauseAnimation(this);

pPauseAnimation->setDuration(1000);

//再向上移动

pSequenAno->addAnimation(pWidgetProcessUp);

pSequenAno->start(QAbstractAnimation::DeleteWhenStopped);

2.5  动画执行方向设置

Qt动画执行可以设置执行方向，为正向Forward和方向Backward，例如透明度变化正向是初始值setStartValue(0);结束值设置setEndValue(1);控件从隐藏到显示。可以设置动画执行方向为反向，pWidgetProcessOpacity –>s etDirection(QAbstractAnimation::Backward)，这样就可以执行显示到隐藏的动画。动画的执行一般是双向的，可以通过方向控制，避免创建反向的动画流程。

enum Direction {

Forward,

Backward

};

2.6  动画循环次数设置

有时需要执行动画多次，或者无限循环下去，可以设置动画循环次数。设置为-1时表示无限循环。

void setLoopCount(int loopCount);

2.7  动画执行结束的操作

动画结束之后执行一些清理工作，或者属性设置工作，可以连接QAbstractAnimation::finished信号，动画结束之后再执行一些操作。也可以将动画对象的清理放入槽函数中。这样就不能start(QAbstractAnimation::DeleteWhenStopped);

connect(pSequenAno, &QAbstractAnimation::finished, [=]() {

ui.pushButtonAddVideo->setDisabled(true);

ui.pushButtonDelVideo->setDisabled(true);

ui.pushButtonAddPic->setDisabled(true);

ui.pushButtonDelPic->setDisabled(true);

PausePlayVedio(1, 0);//先创建索引，准确时间定位

});

3       Qt的高级动画应用

3.1  Qt自定义动画属性实现背景色透明度动画

自定义一个背景色透明度的属性，在定义get和set方法，在set方法中去通过setstytlesheet去设置背景色的透明度。

Q_PROPERTY(int alpha READ alpha WRITE setAlpha)

动画执行的过程中，通过set方法动态的设置背景色透明度。可以通过setKeyValueAt函数设置关键点的取值，step取值范围是0~1，可以设置几个值。动画执行过程中就会在这个几个值之间切换。

void setKeyValueAt(qreal step, const QVariant &value);

头文件实现

#ifndef MAIN_WINDOW_H

#define MAIN_WINDOW_H

...

class MainWindow : public CustomWindow

{

Q_OBJECT

Q_PROPERTY(int alpha READ alpha WRITE setAlpha)

public:

explicit MainWindow(QWidget *parent = 0);

~MainWindow();

private:

int alpha() const;

void setAlpha(const int alpha);

private:

int m_nAlpha;

QLabel *m_pLabel;

};

#endif // MAIN_WINDOW_H

源文件实现

#include "main_window.h"

MainWindow::MainWindow(QWidget *parent)

: CustomWindow(parent)

{

...