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>完成。