Qt动画

一、介绍

（一）QPropertyAnimation 

QPropertyAnimation 对 Qt 属性进行插值。由于属性值存储在 QVariant 中，该类继承了 QVariantAnimation，并支持与其超类相同元类型的动画。

1.常用接口函数

setTargetObject：设置仿真对象
setPropertyName：设置仿真属性的名称，
setDuration：设置仿真持续的时间
setStartValue：设置初始值
setEndValue：设置结束值
start：开始仿真
currentValue：返回当前值
setKeyValueAt：设置关键点的值
valueChanged：只要仿真追踪的值发生变化，就发送该信号

• void setDuration(int msecs)函数是设置动画持续的时间。
• voidsetEasingCurve(const QEasingCurve & easing)函数可以设置动画的缓和曲线，可以理解为移动曲线。例如QEasingCurve::InCirc可以提供圆形凹型曲线，QEasingCurve::Linear可以提供一个直线。

• • QEasingCurve::InBounce
  • QEasingCurve::OutBounce
  • QEasingCurve::InOutBounce
  • QEasingCurve::OutInBounce
  • QEasingCurve::InElastic
  • QEasingCurve::OutElastic
  • QEasingCurve::InOutElastic
  • QEasingCurve::OutInElastic

• voidsetStartValue(const QVariant & value)用于设置动画的开始位置，这个位置和属性是密切相关的，属性的Type是什么，这里的value也必须是什么Type的，比如在propertyName为geometry，其属性是QRect，这里的数据的Type也应该是QRect.
• voidsetEndValue(const QVariant & value)和voidsetStartValue(const QVariant & value)一致，设置的是动画结束的位置。

（二）QSequentialAnimationGroup

该类就是用来按照动画添加顺序来执行动画的。我们只用实例化该类，然后通过调用addAnimation()或者insertAnimation()方法把各个动画添加进去就可以了

• QSequentialAnimationGroup：串行动画组，按照添加的先后顺序，动画依次执行。
• QParallelAnimationGroup：并行动画组，不区分先后顺序，动画同时执行。

二、样例

（一）按键动画效果

1.分步下降上升

void MyPushButton::zoom1()
{
    //创建动态对象
    QPropertyAnimation * animation = new QPropertyAnimation(this,"geometry");
    //设置动画时间间隔
    animation->setDuration(200);

    //起始位置
    animation->setStartValue(QRect(this->x(),this->y(),this->width(),this->height()));
    animation->setEndValue(QRect(this->x(),this->y()+10,this->width(),this->height()));

    //设置弹跳曲线
    animation->setEasingCurve(QEasingCurve::OutBounce);

    //开始执行动画
    animation->start();
}

void MyPushButton::zoom2()
{
    //创建动态对象
    QPropertyAnimation * animation = new QPropertyAnimation(this,"geometry");

    //设置动画时间间隔
    animation->setDuration(200);

    //起始位置
    animation->setStartValue(QRect(this->x(),this->y()+10,this->width(),this->height()));
    animation->setEndValue(QRect(this->x(),this->y(),this->width(),this->height()));

    //设置弹跳曲线
    animation->setEasingCurve(QEasingCurve::OutBounce);

    //开始执行动画
    animation->start();

}

//使用
connect(startBtn,&MyPushButton::clicked,[=](){
        //播放开始音效资源
        startSound->play();
        startBtn->zoom1(); //向下跳跃
        startBtn->zoom2(); //向上跳跃

        //延时进入到选择关卡场景中，好显示出按键动画效果
        QTimer::singleShot(500,this,[=](){
            //设置chooseScene场景的位置
            chooseScene->setGeometry(this->geometry());
            //自身隐藏
            this->hide();
            //显示选择关卡场景
            chooseScene->show();
        });
});

2.顺序执行

// 弹跳动画
void zoom(QWidget* widget)
{
    int x = widget->x();
    int y = widget->y();

    // 用QSequentialAnimationGroup串联下降和上升两个动画
    QSequentialAnimationGroup* group = new QSequentialAnimationGroup;
    
    // 下降动画
    QPropertyAnimation* animation = new QPropertyAnimation(widget, "geometry");

    animation->setDuration(ZOOM_DURATION);
    animation->setStartValue(QRect(x, y, widget->width(), widget->height()));
    animation->setEndValue(QRect(x, y + 10, widget->width(), widget->height()));
    animation->setEasingCurve(QEasingCurve::OutBounce);

    group->addAnimation(animation);

    // 上升动画
    animation->setStartValue(QRect(x, y + 10, widget->width(), widget->height()));
    animation->setEndValue(QRect(x, y, widget->width(), widget->height()));
    
    group->addAnimation(animation);

    group->start();
   
}

//使用
connect(m_button[0], &ClickLabel::clicked, this, [=]() {
    zoom(m_button[0]);
    QTimer::singleShot(ZOOM_DURATION*1.5, this, [=]() {
        m_guideScene->show();
        this->hide();
        });
    });