Qt第十五章动画和状态机

news2024/9/21 14:43:12

文章目录

动画框架
- 动画架构
- 动画框架类
- QPropertyAnimation
- 串行动画组QSequentialAnimationGroup
- 并行动画组QPararallelAnimationGroup
- QPauseAnimation
- QTimeLine
- 窗口动画
- - 下坠效果
  - 抖动效果
  - 透明效果
状态机
- QState
- QStateMachine

动画框架

动画架构

在这里插入图片描述

动画框架类

类名	描述
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;
    // 定义属性动画1
    QPropertyAnimation* pAnm = new QPropertyAnimation(ui->pushButton, "pos");
    pAnm->setStartValue(QPoint());
    pAnm->setEndValue(QPoint(300, 400));
    pAnm->setDuration(2000);
    pAnm->setEasingCurve(QEasingCurve::Type(40));
    // 定义属性动画2
    QPropertyAnimation* 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;
    // 定义属性动画1
    QPropertyAnimation* pAnm = new QPropertyAnimation(ui->pushButton, "pos");
    pAnm->setStartValue(QPoint());
    pAnm->setEndValue(QPoint(300, 400));
    pAnm->setDuration(2000);
    pAnm->setEasingCurve(QEasingCurve::Type(40));
    // 定义属性动画2
    QPropertyAnimation* 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();
}