flipimgf.gif

源码地址:https://www.fearlazy.com/demos.html

 

一、思路

       使用Qt的Graphics View Framework可以非常容易实现翻转的效果。该框架中的item可以通过设置QGraphicsRotation实现沿x轴、y轴和z轴(垂直于屏幕)方向上的旋转。再配合上动画便能达到上图的效果。

 

二、关键代码

    1.既然是基于图形视图框架,那view是必不可少的。从基类中派生出我们的视图类FlipView:

      FlipView : public QGraphicsView

 

     在这个demo中视图和场景都不是主角。场景无需做其他设置,视图也只是做了一些简单的设置即可。

   
   
   

    2.demo的主角,图片Item从QGraphicsObject中派生,其主要成员变量如下:

   class Picture : public QGraphicsObject


    在构造函数中做设置变换:

    在构造函数中的设置已经能够实现图片的翻转效果,为了让翻转效果更逼真,我们在旋转到90度左右(图片与屏幕垂直)时换一张图片显示,好像两张图片刚好是正反两面。

    在旋转动画的槽函数中进行判断: