QtQLabel之动态阴影边框

Posted 2020-12-31 zhehan54

效果如下：

实现思路参考了下面的文章：

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,完成5，完成iBorderRadius从30到递减
    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,完成5，完成iBorderRadius从30到递减
    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();