QT中实现图片淡出淡入的效果

点击打开链接

折腾了几天，终于实现了图片的淡出淡入的效果。 其实也应该是说实现了图片的淡入效果，因为淡出效果我暂时还用不到，但原理还是一样的。

       网上关于图片的淡出淡入效果的讨论蛮多的，但是用QT实现就很少了。实现这种效果有两种途径：一是读取图片的RGB值，然后渐进达到淡出淡入的效果，这种方法我没有尝试，感觉还是比较复杂。二是设置加载图片载体的透明度，从完全透明到完全显示，控制这个过程可以用过定时器（QTimer）来实现。

      我是用QLabel加载图片的，主要运用到QTimer和QGraphicOpacityEffect这两个控制类。下面我说一下实现这种效果的步骤：

<1>   把label的属性背景透明度设置为透明，注意这并不能使你的图片变为透明，因为这只是使得label的边框，背景色彩消失而已。

1. ui->label->setAttribute(Qt::WA_TranslucentBackground, true);

复制代码

<2>   加载图片，这个就不多说了，我是加载了一张gif图片，是静态的gif图片- -。

1. ui->label->setPixmap(QPixmap("path"));

复制代码

<3>   把加载了图片的label设置完全透明

1. float opacity=0.0;
   
2. 
   
3. QGraphicOpacityEffect *effect=new QGraphicOpacityEffect()'
   
4. 
   
5. effect->setIOpacity(opacity);//透明范围为0.0-1.0，默认为0.7  ui->label->setGraphicEffect(effect);  

复制代码

<4> 利用QTimer实现渐变过程

1. QTimer timer;
   
2. 
   
3. QObject::connect(&timer,SIGNAL(timeout()),this,SLOT(fade_on_fade_out()));
   
4. 
   
5. timer.start(250);//每隔250毫秒发射一次timeout()

复制代码

<5>在槽函数fade_on_fade_out()实现渐变功能

1. void fade_on_fade_in()
   
2. 
   
3. {        if(opacity>=1.0)
   
4. 
   
5. }
   
6. 
   
7. 
   
8.     {
   
9.         timer.stop();//定时器停止
   
10.     }
    
11.     else
    
12.     {
    
13.         effect->setOpacity(opacity);
    
14.         ui->label->setGraphicsEffect(effect);
    
15.        }
    
16.     opacity+=0.1;//透明度累加
    
17. ｝

复制代码

<6>完成。