动画框架

动画架构

动画框架类

类名	描述
QAbstractAnimation	所有动画的基类
QAnimationGroup	动画容器类的抽象类
QEasingCurve	控制动画的缓和曲线类
QParallelAnimationGroup	并行动画容器
QPauseAnimation	QSequentialAnimationGroup暂停
QPropertuAnimation	Qt属性动画
QSequentialAnimationGroup	串行动画容器
QTimeLine	可控制动画的时间轴类
QVariantAnimation	动画类的抽象基类

QPropertyAnimation

void Widget::propertyAnima()
{QPropertyAnimation* propAnma = new QPropertyAnimation(ui->pushButton, "pos", this);propAnma->setStartValue(QPoint());propAnma->setEndValue(QPoint(500, 400));propAnma->setKeyValueAt(0.3, QPoint(600, 0)); // 在0.3总时间的地方设置个中间位置propAnma->setKeyValueAt(0.6, QPoint(0, 200));propAnma->setDuration(3000);propAnma->start();propAnma->setLoopCount(2); // 动画执行2遍// propAnma->setLoopCount(-1); // 设置一直执行propAnma->setEasingCurve(QEasingCurve::Type(30)); // 设置缓和曲线，第30号OutElastic效果propAnma->setDirection(QPropertyAnimation::Backward); // 也可以设置从后往前播放
}

串行动画组QSequentialAnimationGroup

void Widget::seqAnimaGroup()
{// 定义串行动画组QSequentialAnimationGroup* seqAnmGroup = new QSequentialAnimationGroup;// 定义属性动画1QPropertyAnimation* pAnm = new QPropertyAnimation(ui->pushButton, "pos");pAnm->setStartValue(QPoint());pAnm->setEndValue(QPoint(300, 400));pAnm->setDuration(2000);pAnm->setEasingCurve(QEasingCurve::Type(40));// 定义属性动画2QPropertyAnimation* pAnm2 = new QPropertyAnimation(ui->pushButton, "size");pAnm2->setStartValue(QSize(20, 100));pAnm2->setEndValue(QSize(100, 20));pAnm2->setDuration(2000);pAnm2->setEasingCurve(QEasingCurve::Type(40));// 把属性动画添加到动画组seqAnmGroup->addAnimation(pAnm);seqAnmGroup->addPause(3000); // 设置暂停时间seqAnmGroup->addAnimation(pAnm2);// 开始动画seqAnmGroup->start();
}

并行动画组QPararallelAnimationGroup

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f66caee904cb43f18424370016238c83.gif

void Widget::praAnmGroup()
{// 定义并行动画组QParallelAnimationGroup* prAnmGroup = new QParallelAnimationGroup;// 定义属性动画1QPropertyAnimation* pAnm = new QPropertyAnimation(ui->pushButton, "pos");pAnm->setStartValue(QPoint());pAnm->setEndValue(QPoint(300, 400));pAnm->setDuration(2000);pAnm->setEasingCurve(QEasingCurve::Type(40));// 定义属性动画2QPropertyAnimation* pAnm2 = new QPropertyAnimation(ui->pushButton, "size");pAnm2->setStartValue(QSize(20, 100));pAnm2->setEndValue(QSize(100, 20));pAnm2->setDuration(2000);pAnm2->setEasingCurve(QEasingCurve::Type(40));// 把属性动画添加到动画组prAnmGroup->addAnimation(pAnm);prAnmGroup->addAnimation(pAnm2);// 开始动画prAnmGroup->start();
}

QPauseAnimation

    QPauseAnimation* pause = new QPauseAnimation(1000);prAnmGroup->addAnimation(pAnm);prAnmGroup->addAnimation(pause);prAnmGroup->addAnimation(pAnm2);

QTimeLine

void Widget::TimeLineAnm()
{QTimeLine* tl = new QTimeLine(3000, this);// 连接信号与槽connect(tl, &QTimeLine::frameChanged, [=](int var) {ui->pushButton->move(0, var); // var是当前移动到第几帧ui->progressBar->setValue(var);});tl->setFrameRange(0, 180); // 设置时间线范围，在第0帧和第180帧之间tl->setLoopCount(0); // 无限循环，和属性动画的无限循环不一样tl->start();tl->setEasingCurve(QEasingCurve::OutBounce); // 设置缓和曲线
}

窗口动画

下坠效果

创建一个pushbutton连接信号与槽，槽函数代码

void Widget::on_pushButton_2_clicked()
{// 下坠,把窗口当做对象QPropertyAnimation* anm = new QPropertyAnimation(this, "geometry", this);// 设置起始位置QRect rect = geometry();anm->setStartValue(rect);// 设置结束位置rect.moveBottom(rect.bottom() + 100);anm->setEndValue(rect);// 设置缓和曲线anm->setEasingCurve(QEasingCurve::OutElastic);anm->setDuration(2000); // 设置时长anm->start();
}

抖动效果

void Widget::on_pushButton_3_clicked()
{// 抖动QPropertyAnimation* anm = new QPropertyAnimation(this, "pos", this);// 获取初始位置QPoint start = pos();// 第一个状态往左移动anm->setStartValue(start + QPoint(-5, 0));// 第二个状态往右移动anm->setKeyValueAt(0.25, start + QPoint(5, 0));// 第三个状态往上移动anm->setKeyValueAt(0.5, start + QPoint(0, -5));// 第四个状态往下移动anm->setKeyValueAt(0.75, start + QPoint(0, 5));// 返回初始位置anm->setEndValue(start);anm->setDuration(100);anm->setLoopCount(3); // 抖3下anm->start();
}

透明效果

void Widget::on_pushButton_4_clicked()
{// 透明QPropertyAnimation* anm = new QPropertyAnimation(this, "windowOpacity", this);anm->setStartValue(1);anm->setKeyValueAt(0.9, 0);anm->setEndValue(1);anm->setEasingCurve(QEasingCurve::Linear);anm->setDuration(3000);anm->start();
}

状态机

cmakelist配置(在原来的基础上修改添加，其他的不变)

find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Widgets StateMachine)
target_link_libraries(animation PRIVATE Qt${QT_VERSION_MAJOR}::Widgets Qt6::StateMachine)

QState

QStateMachine

void Widget::stateM()
{QStateMachine* stm = new QStateMachine(this);// 设置3个状态QState* st1 = new QState;st1->assignProperty(ui->pushButton, "text", QString("state1"));QState* st2 = new QState;st2->assignProperty(ui->pushButton, "size", QSize(200, 100));QState* st3 = new QState;st3->assignProperty(ui->pushButton, "styleSheet", QString("QPushButton#pushButton{background: green}"));// 设置改变信号st1->addTransition(ui->pushButton, &QPushButton::clicked, st2);st2->addTransition(ui->pushButton, &QPushButton::clicked, st3);st3->addTransition(ui->pushButton, &QPushButton::clicked, st1);// 加入状态机stm->addState(st1);stm->addState(st2);stm->addState(st3);// 设置初始状态stm->setInitialState(st1);stm->start();
}