Qt实现QQ音乐轮播图

Posted 2021-03-04 during

由于项目中需要使用到类似轮播图这样的东西，百度之后发现并没有效果不错的案例，于是仿照QQ音乐的轮播图写了一个

效果如下

和QQ音乐的基本没什么差别

这里记录一下需要用到的模块QParallelAnimationGroup、QPropertyAnimation、QGraphicsOpacityEffect

基本实现原理是，通过并行动画组QParallelAnimationGroup添加QPropertyAnimation的geometry属性作为动画，其中每次切换(左移为例)geometry属性的动画有四个，包括坐标的图片消失，中间图片左移，右边的图片左移至中间，隐藏的右边图片移至右边
这其中还添加了透明度动画实现渐变效果，一次切换(左移为例)需要用到的透明度动画(QGraphicsOpacityEffect中的opacity属性)包括两个 左侧图片消失 透明度从1到0，右侧隐藏图片出现，透明度从0到1。一次切换需要将这些动画全都添加到并行动画组中，每次结束动画需要将并行动画组中的动画全部清空，下一次切换时再添加

• 这里贴上左移示例的动画属性示例（右移也差不多）

        QRect preStartRect = this->_switchLabelList[c_preIndex]->geometry();
        QRect preEndRect = QRect(QPoint(this->_switchLabelList[_index]->x(), this->_switchLabelList[c_preIndex]->y()), this->_switchLabelList[c_preIndex]->size());

        QRect cStartRect = this->_switchLabelList[_index]->geometry();
        QRect cEndRect = this->_switchLabelList[c_preIndex]->geometry();

        QRect nextStartRect = this->_switchLabelList[c_nextIndex]->geometry();
        QRect nextEndRect = this->_switchLabelList[_index]->geometry();

        QRect d_nextStartRect = QRect(QPoint(this->_switchLabelList[_index]->x() + (this->_switchLabelList[_index]->width() - this->_switchLabelList[c_nextIndex]->width()), this->_switchLabelList[c_nextIndex]->y()), this->_switchLabelList[c_nextIndex]->size());
        QRect d_nextEndRect = this->_switchLabelList[c_nextIndex]->geometry();

        QPropertyAnimation* preAnimation = new QPropertyAnimation(this->_switchLabelList[c_preIndex], "geometry", this);
        QPropertyAnimation* preOpacityAnimation = new QPropertyAnimation(this->_labelOpacityList[c_preIndex], "opacity", this);
        QPropertyAnimation* indexAnimation = new QPropertyAnimation(this->_switchLabelList[_index], "geometry", this);
        QPropertyAnimation* nextAnimation = new QPropertyAnimation(this->_switchLabelList[c_nextIndex], "geometry", this);
        QPropertyAnimation* d_nextAnimation = new QPropertyAnimation(this->_switchLabelList[d_nextIndex], "geometry", this);
        QPropertyAnimation* d_nextOpacityAnimation = new QPropertyAnimation(this->_labelOpacityList[d_nextIndex], "opacity", this);

        preAnimation->setStartValue(preStartRect);
        preAnimation->setEndValue(preEndRect);
        preAnimation->setEasingCurve(this->_mEasingCurve);
        preAnimation->setDuration(400);

        preOpacityAnimation->setStartValue(1.00);
        preOpacityAnimation->setEndValue(0.2);
        preOpacityAnimation->setEasingCurve(this->_mEasingCurve);
        preOpacityAnimation->setDuration(400);

        indexAnimation->setStartValue(cStartRect);
        indexAnimation->setEndValue(cEndRect);
        indexAnimation->setEasingCurve(this->_mEasingCurve);
        indexAnimation->setDuration(400);

        nextAnimation->setStartValue(nextStartRect);
        nextAnimation->setEndValue(nextEndRect);
        nextAnimation->setEasingCurve(this->_mEasingCurve);
        nextAnimation->setDuration(400);

        d_nextAnimation->setStartValue(d_nextStartRect);
        d_nextAnimation->setEndValue(d_nextEndRect);
        d_nextAnimation->setEasingCurve(this->_mEasingCurve);
        d_nextAnimation->setDuration(400);

        d_nextOpacityAnimation->setStartValue(0.2);
        d_nextOpacityAnimation->setEndValue(1.0);
        d_nextOpacityAnimation->setEasingCurve(this->_mEasingCurve);
        d_nextOpacityAnimation->setDuration(400);

        this->_mAnimationGroup->addAnimation(preAnimation);
        this->_mAnimationGroup->addAnimation(indexAnimation);
        this->_mAnimationGroup->addAnimation(nextAnimation);
        this->_mAnimationGroup->addAnimation(d_nextAnimation);
        this->_mAnimationGroup->addAnimation(preOpacityAnimation);
        this->_mAnimationGroup->addAnimation(d_nextOpacityAnimation);
        ui->leftSwitchButton->setEnabled(false);
        ui->rightSwitchButton->setEnabled(false);
        this->_mAnimationGroup->start();