Qt不同页面切换 python

• 应用场景

• 淡入淡出
• 界面平移
• 回弹效果

应用场景

在开发桌面应用的时候，经常性的会在几个界面之间切换
可以是局部的，也可以是整个界面
以前我总是利用hide和show来完成
但是很缺乏动态的美感，用户在使用的时候体验不好
今天就来解决这个问题

---

下面进入正题：
QPropertyAnimation
在QT中使用这个类可以很容易的设置一般的动画

淡入淡出

QPropertyAnimation *animation = new QPropertyAnimation(&w,"windowOpacity");
    animation->setDuration(1000);
    animation->setStartValue(0);
    animation->setEndValue(1);
    animation->start();

上面这段代码首先绑定一个widget，这个动画将接收widget的图形部分

然后设置整个动画的时长为1000ms

setStartValue和setEndValue这里设置了从0到1

效果就是谈入

start以后开始慢慢的出现

当然也可以设置从1到0，效果自然就是淡出了

效果是这样的

界面平移

QLabel *label = new QLabel(this);
    label->resize(this->centralWidget()->size());
    label->setPixmap(this->centralWidget()->grab());
    label->show();
    QPropertyAnimation *animation= new QPropertyAnimation(label,"geometry");
    animation->setDuration(1000);
    animation->setStartValue(this->centralWidget()->geometry());
    animation->setEndValue(QRect(-this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));
    animation->start();

上面的代码和淡入淡出不同

我使用了一个label来获取整个界面的的大小和图像

然后使用QPropertyAnimation 绑定

重点来了，这次我在setStartValue和setEndValue的时候不是一般的整数，而是使用的整个集合图形QRect

关于QRect简单介绍下

QRect用来表示一个矩形的位置和大小

具体地说就是一个QPoint（左上角的点）、宽度和高度

有了这几个参数，这个矩形的位置和大小就统一了

下图来自官方文档

所以我们实际上我们setStartValue和setEndValue了一个矩形的位置和大小

这样，如果我们的大小不变，只改变QPoint的横坐标，那么平移的效果就出来了

如下图，向左侧移动

向上或者向下也是可以的

上面两种情况是这个界面移走，下个界面不动

那么我想让这个界面移走的时候下个界面不是不动，而是跟着移动进来呢？

那么我们就得同时拥有两个动画：

1. 移出动画
2. 移入动画
   而且要动作一致才会有好的效果

QLabel *label = new QLabel(this);
    label->resize(this->centralWidget()->size());
    label->setPixmap(this->centralWidget()->grab());
    label->show();

    QPropertyAnimation *animation= new QPropertyAnimation(label,"geometry");
    animation->setDuration(500);
    animation->setStartValue(this->centralWidget()->geometry());
    animation->setEndValue(QRect(this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));

    QPropertyAnimation *animation1= new QPropertyAnimation(this->centralWidget(),"geometry");
    animation1->setDuration(500);
    animation1->setStartValue(QRect(-this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));
    animation1->setEndValue(this->centralWidget()->geometry());

    QParallelAnimationGroup *group = new QParallelAnimationGroup;
    group->addAnimation(animation);
    group->addAnimation(animation1);
    group->start();

在上面我们使用了QParallelAnimationGroup 这个类

它就像容器一样可以装载很多个动画，然后同时让它们开始

达到的效果就是这样的：

QPropertyAnimation 同时还支持线性插值操作

animation->setKeyValueAt(0, QRect(0, 0, 00, 00));  
animation->setKeyValueAt(0.4, QRect(20, 250, 20, 30));  
animation->setKeyValueAt(0.8, QRect(100, 250, 20, 30));  
animation->setKeyValueAt(1, QRect(250, 250, 100, 30));  
animation->setEndValue(QRect(250, 250, 100, 30));

动画会在前40%由QRect(0, 0, 00, 00）移动改变到QRect(20, 250, 20, 30)
然后再40%由QRect(20, 250, 20, 30)移动改变到QRect(100, 250, 20, 30)
最后到QRect(250, 250, 100, 30)
是不是很方便？

回弹效果

QEasingCurve 类还提供了很多种线性插值，下面是使用方法

animation->setStartValue(this->centralWidget()->geometry());
    animation->setEndValue(QRect(-this->centralWidget()->width(), 0, this->centralWidget()->width(), this->centralWidget()->height()));
    animation->setEasingCurve(QEasingCurve::OutBounce);
    animation->start();

下图就是OutBounce的线性插值，会有一个回弹的效果

是不是很棒？还有很多的值可以一一试验，下面是官方文档截图

---