【Qt】动画使用及惯性效果

动画惯性

效果

收下来和展开会有一个惯性的效果，这个使用QPropertyAnimation可以实现的，是通过设置setEasingCurve来实现的

我们来看看这个函数，传参是传QEasingCurve的类型，根据官方文档的介绍，QEasingCurve类提供用于控制动画的缓动曲线，我们上面效果的动画就是有现成的缓动曲线，QEasingCurve总共支持一下的缓动曲线

这些缓动的效果帮助文档都写有相关的曲线，下面我们结合这个例子来看一下

上面的例子我们使用到了InBack和OutBack两种。

代码

m_maxRect = QRect(0, 12, 48, 438);
m_middleRect = QRect(0, 150, 48, 300);
m_minRect = QRect(0, 384, 48, 66);m_pAnimal = new QPropertyAnimation(this, "geometry", this);
m_pAnimal->setDuration(1000);m_pAnimal->setStartValue(m_maxRect);
m_pAnimal->setEndValue(m_middleRect);
m_pAnimal->setDirection(m_middleDirection);
if(m_middleDirection == QPropertyAnimation::Forward) {m_pAnimal->setEasingCurve(QEasingCurve::OutBack);m_middleDirection = QPropertyAnimation::Backward;m_pAnimal->setDuration(800);
}
else {m_pAnimal->setEasingCurve(QEasingCurve::InBack);m_middleDirection = QPropertyAnimation::Forward;m_pAnimal->setDuration(1100);
}

这里只贴出部分代码，向下收起使用的是OutBack，向上展开使用的是InBack

我们来看这两种的曲线：

对于OutBack，纵坐标value相当于动画设置的属性值，我们例子中就是geometry值，当纵坐标的值从小到大变化时，后半部分的值会比最终值大再变成最终值。例子中点击收起来的时候，geometry的y值是从小到大变化的，最后比有一段往下沉的动画再回到最终设定的位置。

对于InBack曲线，同样的，当纵坐标的值从小到大变化时，一开始会有一部分小于初始值，最后变成最终值；反过来看，就是从最终值回到初始值，在回到初始值之前值会比初始值小。例子中点击展开的时候，y值是从大变小的，所以我们要反过来看，就是回到初始值之前会有向上伸出的效果，就是y值要比初始值小。

所以我们选用曲线的时候，要看我们的属性值是从小到大变化还是大到小变化，根据曲线来选我们想要的缓动效果

动画组

上面的动画效果中，我们看到展开的时候，上面的三个按钮是逐步显现出来的，这个效果就是用到动画组，串行动画组QSequentialAnimationGroup，就是多个动画逐步执行。

代码

//串行动画组m_pBtnShowAnimal = new QSequentialAnimationGroup(this);QList<QAbstractButton*> btnList = m_pBtnGroup->buttons();for(int i = 2; i >= 0; --i) {QAbstractButton *btn = btnList.at(i);QPropertyAnimation *btnAnimal = addBtnHideAnimal(btn, btn->pos());m_pBtnShowAnimal->addAnimation(btnAnimal);}QPropertyAnimation * MainWindow::addBtnHideAnimal(QWidget *item, QPoint pos)
{QPropertyAnimation *animation = new QPropertyAnimation(item, "geometry", this);animation->setDuration(200);animation->setStartValue(QRect(qobject_cast<QWidget *>(item->parent())->width()/2,         item->y() + item->height()/2, 0, 0));animation->setEndValue(QRect(pos, item->size()));return animation;
}

执行的循序和添加的循序一样，用法很简单。

与串行动画组相对应的是并行动画组QParallelAnimationGroup

动画过程

效果

代码

m_pBtnStopAnimal = new QPropertyAnimation(m_pBtnGroup->button(6), "geometry", this);m_pBtnStopAnimal->setDuration(800);QRect originRect = m_pBtnGroup->button(6)->geometry();m_pBtnStopAnimal->setKeyValueAt(0, originRect);m_pBtnStopAnimal->setKeyValueAt(0.2, QRect(originRect.x() - 6, originRect.y() - 6,originRect.width() + 12, originRect.height() + 12));m_pBtnStopAnimal->setKeyValueAt(0.6, QRect(originRect.x() - 6, originRect.y() - 6,originRect.width() + 12, originRect.height() + 12));m_pBtnStopAnimal->setKeyValueAt(0.7, originRect);m_pBtnStopAnimal->setKeyValueAt(0.9, QRect(originRect.x() - 3, originRect.y() - 3,originRect.width() + 6, originRect.height() + 6));m_pBtnStopAnimal->setKeyValueAt(1, originRect);static int animalcout = 0;connect(m_pBtnStopAnimal, &QPropertyAnimation::finished, this, [=](){++animalcout;//执行2次if(animalcout < 3){QThread::msleep(300);m_pBtnStopAnimal->start();}else {animalcout = 0;}});

这个效果我们使用的是setKeyValueAt给动画设定更细的步骤，区别于一般的设置初始值和最终值，动画效果是按钮变最大，有个停顿的时间，回到初始大小，又变到稍微大，最后回到初始大小这么一个效果，就是这么几个过程，其中变到最大停顿一下，通过设定连续两个状态0.2和0.6都是最大状态，那这部分时间都会维持最大的状态，看起来就像停顿了一下。

结尾

一个小小的例子用到qt动画的很多东西，还是有一定的参考价值的。

完整的代码可到我的csdn资源下载处下载

下载地址