QT界面切换

• 应用场景
  • 淡入淡出
  • 界面平移
  • 回弹效果

应用场景

在开发桌面应用的时候，经常性的会在几个界面之间切换
可以是局部的，也可以是整个界面
以前我总是利用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的线性插值，会有一个回弹的效果

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

---

源码已经上传，基于QT 5.5.1

点击下载