【Qt】QLabel之動態陰影邊框

效果如下：

實現思路參考了下面的文章：

Qt 之 QPropertyAnimation

 

該文章是自定義屬性alpha，原理類似，代碼如下：

 

//在頭文件加入
 Q_PROPERTY(int iBorderRadius READ iBorderRadius WRITE setBorderRadius)

    //自定義屬性修改QLable的邊框，以達到動畫效果
private:
    int iBorderRadius() const;
    void setBorderRadius(const int radius);

    void initLableAnimation();

 

 

 

 

//cpp
int MainWindow::iBorderRadius() const
{
    return m_borderRadius;
}

void MainWindow::setBorderRadius(const int radius)
{
    m_borderRadius = radius;

    //下面在自定義屬性中修改BlurRadius
    m_lblSnapImgshadowEffect->setBlurRadius(m_borderRadius);

    m_lblIdentityImgshadowEffect->setBlurRadius(m_borderRadius);

   // ui->lblIdentityImg->setGraphicsEffect(m_lblSnapImgshadowEffect);
}


void MainWindow::initLableAnimation()
{
    //設備圖片周圍的陰影
    m_lblIdentityImgshadowEffect =new QGraphicsDropShadowEffect(this);
    m_lblIdentityImgshadowEffect->setColor(Qt::darkGreen);//邊框顏色
    m_lblIdentityImgshadowEffect->setOffset(0,0);
    m_lblIdentityImgshadowEffect->setBlurRadius(0); //此處初始化為0，下面會由QPropertyAnimation 修改 自定義屬性iBorderRadius

    m_lblSnapImgshadowEffect = new QGraphicsDropShadowEffect(this);
    m_lblSnapImgshadowEffect->setColor(Qt::red); //邊框顏色
    m_lblSnapImgshadowEffect->setOffset(0,0);
    m_lblSnapImgshadowEffect->setBlurRadius(0); //此處初始化為0，下面會由QPropertyAnimation 修改 自定義屬性iBorderRadius


    ui->lblIdentityImg->setGraphicsEffect(m_lblIdentityImgshadowEffect);
    ui->lblSnapImg->setGraphicsEffect(m_lblSnapImgshadowEffect);

    //抓拍圖片的邊框動畫特效
    m_lblSnapImgAnimation = new QPropertyAnimation();
    m_lblSnapImgAnimation->setTargetObject(this);
    m_lblSnapImgAnimation->setDuration(2000); //完整周期2秒
    m_lblSnapImgAnimation->setPropertyName("iBorderRadius");
    //下面代碼是由狀態機自動完成
    //0-0.5，完成iBorderRadius從1到30遞增；
    //0.5-1,完成iBorderRadius從30到1遞減
    m_lblSnapImgAnimation->setKeyValueAt(0,1);
    m_lblSnapImgAnimation->setKeyValueAt(0.5,30);
    m_lblSnapImgAnimation->setKeyValueAt(1,1);

    m_lblSnapImgAnimation->setLoopCount(-1);

    //身份證照片的邊框動畫特效    
    m_lblIdentityImgAnimation = new QPropertyAnimation();
    m_lblIdentityImgAnimation->setTargetObject(this);
    m_lblIdentityImgAnimation->setDuration(2000);//完整周期2秒
    m_lblIdentityImgAnimation->setPropertyName("iBorderRadius");
    //下面代碼是由狀態機自動完成
    //0-0.5，完成iBorderRadius從1到30遞增；
    //0.5-1,完成iBorderRadius從30到1遞減
    m_lblIdentityImgAnimation->setKeyValueAt(0,1);
    m_lblIdentityImgAnimation->setKeyValueAt(0.5,30);
    m_lblIdentityImgAnimation->setKeyValueAt(1,1);

    m_lblIdentityImgAnimation->setLoopCount(-1);

    connect(this, SIGNAL(StartLableAnimation()), m_lblSnapImgAnimation, SLOT(start()));

    connect(this, SIGNAL(StartLableAnimation()), m_lblIdentityImgAnimation, SLOT(start()));
}

 

 

只要觸發信號，兩個QLabel的動畫效果就會啟動。

emit StartLableAnimation();

 

代碼：

鏈接: https://pan.baidu.com/s/1X5o4C283lA2tjcGmqS9Mgg 密碼: ned3