Qt窗口动画-淡入淡出-移动-缩放

SubWidget.h

#ifndef SUBWIDGET_H
#define SUBWIDGET_H
#include <QPainter>
#include <QWidget>
#include <QPaintEvent>
#include <QStyleOption>
class SubWidget : public QWidget
{
    Q_OBJECT
public:
    SubWidget(QWidget *parent = nullptr);
    ~SubWidget();
protected:
    void paintEvent(QPaintEvent *e);
};
#endif

SubWidget.cpp

#include "SubWidget.h"
SubWidget::SubWidget(QWidget *parent) : QWidget(parent)
{
    setStyleSheet("QWidget{background-color:  rgb(116, 220, 255);}");
}
SubWidget::~SubWidget(){}
void SubWidget::paintEvent(QPaintEvent *e)
{
    QPainter paint(this);
    QStyleOption option;
    option.init(this);
    style()->drawPrimitive(QStyle::PE_Widget, &option, &paint, this);
    QWidget::paintEvent(e);
}

MainWidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H
#include <QWidget>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPropertyAnimation>
#include <QGraphicsOpacityEffect>
#include "SubWidget.h"
class MainWidget : public QWidget
{
    Q_OBJECT
private:
    QPushButton* btnFadeIn;
    QPushButton* btnFadeOut;
    QPushButton* btnZoonIn;
    QPushButton* btnZoonOut;
    QPushButton* btnMoveIn;
    QPushButton* btnMoveOut;
    QHBoxLayout* btnLayout;
    QVBoxLayout* mainLayout;
    SubWidget* subWidget;
public:
    MainWidget(QWidget *parent = nullptr);
    ~MainWidget();
};
#endif

MainWidget.cpp

#include "MainWidget.h"
constexpr int widgetWidth=600;
constexpr int widgetHeight=400;
MainWidget::MainWidget(QWidget *parent) : QWidget(parent)
{
    setFixedSize(widgetWidth,widgetHeight);
    btnFadeIn  =new QPushButton(this);
    btnFadeOut  =new QPushButton(this);
    btnZoonIn  =new QPushButton(this);
    btnZoonOut  =new QPushButton(this);
    btnMoveIn  =new QPushButton(this);
    btnMoveOut  =new QPushButton(this);
    btnLayout=new QHBoxLayout();
    mainLayout=new QVBoxLayout();
    subWidget=new SubWidget(this);
    subWidget->hide();
    btnFadeIn->setText(tr("FadeIn"));
    btnFadeOut->setText(tr("FadeOut"));
    btnZoonIn->setText(tr("ZoonIn"));
    btnZoonOut->setText(tr("ZoonOut"));
    btnMoveIn->setText(tr("MoveIn"));
    btnMoveOut->setText(tr("MoveOut"));
    btnLayout->setMargin(0);
    btnLayout->setSpacing(9);
    btnLayout->addWidget(btnFadeIn);
    btnLayout->addWidget(btnFadeOut);
    btnLayout->addWidget(btnZoonIn);
    btnLayout->addWidget(btnZoonOut);
    btnLayout->addWidget(btnMoveIn);
    btnLayout->addWidget(btnMoveOut);
    mainLayout->setMargin(9);
    mainLayout->addLayout(btnLayout);
    mainLayout->addStretch(1);
    setLayout(mainLayout);
    //淡入
    connect(btnFadeIn,&QPushButton::clicked,this,[=](bool){
        subWidget->setFixedSize(widgetWidth-20,widgetHeight-50);
        subWidget->setGeometry(10,40,subWidget->width(),subWidget->height());
        QPropertyAnimation* m_pAnimation = new QPropertyAnimation();
        m_pAnimation->setTargetObject(subWidget);
        m_pAnimation->setDuration(2000);
        QGraphicsOpacityEffect* m_pOpacity = new QGraphicsOpacityEffect();
        subWidget-> setGraphicsEffect(m_pOpacity);
        m_pOpacity->setOpacity(1);
        m_pAnimation->setTargetObject(m_pOpacity);
        m_pAnimation->setPropertyName("opacity");
        m_pAnimation->setStartValue(0);
        m_pAnimation->setEndValue(1);
        m_pAnimation->start();
        subWidget->show();
        connect(m_pAnimation,&QPropertyAnimation::finished,this,[subWidget=subWidget,m_pAnimation,m_pOpacity]{
            if(m_pAnimation!=Q_NULLPTR){
                delete m_pAnimation;
            }
            if(m_pOpacity!=Q_NULLPTR){
                delete m_pOpacity;
            }
            if(subWidget!=Q_NULLPTR){
                subWidget->hide();
            }
        });
    });    
	//淡出
    connect(btnFadeOut,&QPushButton::clicked,this,[=](bool){
        subWidget->setFixedSize(widgetWidth-20,widgetHeight-50);
        subWidget->setGeometry(10,40,subWidget->width(),subWidget->height());
        QPropertyAnimation* m_pAnimation = new QPropertyAnimation();
        m_pAnimation->setTargetObject(subWidget);
        m_pAnimation->setDuration(2000);
        QGraphicsOpacityEffect* m_pOpacity = new QGraphicsOpacityEffect();
        subWidget-> setGraphicsEffect(m_pOpacity);
        m_pOpacity->setOpacity(1);
        m_pAnimation->setTargetObject(m_pOpacity);
        m_pAnimation->setPropertyName("opacity");
        m_pAnimation->setStartValue(1);
        m_pAnimation->setEndValue(0);
        m_pAnimation->start();
        subWidget->show();
        connect(m_pAnimation,&QPropertyAnimation::finished,this,[subWidget=subWidget,m_pAnimation,m_pOpacity]{
            if(m_pAnimation!=Q_NULLPTR){
                delete m_pAnimation;
            }
            if(m_pOpacity!=Q_NULLPTR){
                delete m_pOpacity;
            }
            if(subWidget!=Q_NULLPTR){
                subWidget->hide();
            }
        });
    });
    //变大
    connect(btnZoonIn,&QPushButton::clicked,this,[=](bool){
        QPropertyAnimation* m_pAnimation = new QPropertyAnimation();
        m_pAnimation->setTargetObject(subWidget);
        m_pAnimation->setPropertyName("geometry");
        m_pAnimation->setDuration(2000);
        QRect stopRect  = QRect(10,40,widgetWidth-20,widgetHeight-50);
        QRect startRect = QRect(stopRect.center(), QSize(0, 0));
        m_pAnimation->setStartValue(startRect);
        m_pAnimation->setEndValue(stopRect);
        m_pAnimation->start();
        subWidget->show();
        connect(m_pAnimation,&QPropertyAnimation::finished,this,[subWidget=subWidget,m_pAnimation]{
            if(m_pAnimation!=Q_NULLPTR){
                delete m_pAnimation;
            }
            if(subWidget!=Q_NULLPTR){
                subWidget->hide();
            }
        });
    });
    
	//变小
    connect(btnZoonOut,&QPushButton::clicked,this,[=](bool){
        QPropertyAnimation* m_pAnimation = new QPropertyAnimation();
        m_pAnimation->setTargetObject(subWidget);
        m_pAnimation->setPropertyName("geometry");
        m_pAnimation->setDuration(2000);
        QRect startRect = QRect(10,40,widgetWidth-20,widgetHeight-50);
        QRect stopRect = QRect(startRect.center(), QSize(0, 0));
        m_pAnimation->setStartValue(startRect);
        m_pAnimation->setEndValue(stopRect);
        m_pAnimation->start();
        subWidget->show();
        connect(m_pAnimation,&QPropertyAnimation::finished,this,[subWidget=subWidget,m_pAnimation]{
            if(m_pAnimation!=Q_NULLPTR){
                delete m_pAnimation;
            }
            if(subWidget!=Q_NULLPTR){
                subWidget->hide();
            }
        });
    });
    //移入
    connect(btnMoveIn,&QPushButton::clicked,this,[=](bool){
        subWidget->setFixedSize(widgetWidth-20,widgetHeight-50);
        subWidget->setGeometry(10,40,subWidget->width(),subWidget->height());
        QPropertyAnimation* m_pAnimation = new QPropertyAnimation();
        m_pAnimation->setTargetObject(subWidget);
        m_pAnimation->setPropertyName("pos");
        m_pAnimation->setDuration(2000);
        m_pAnimation->setEndValue (QPoint(0,40));
        m_pAnimation->setStartValue(QPoint(width(), 40));
        m_pAnimation->start();
        subWidget->show();
        connect(m_pAnimation,&QPropertyAnimation::finished,this,[subWidget=subWidget,m_pAnimation]{
            if(m_pAnimation!=Q_NULLPTR){
                delete m_pAnimation;
            }
            if(subWidget!=Q_NULLPTR){
                subWidget->hide();
            }
        });
    });
    
	//移出
    connect(btnMoveOut,&QPushButton::clicked,this,[=](bool){
        subWidget->setFixedSize(widgetWidth-20,widgetHeight-50);
        subWidget->setGeometry(10,40,subWidget->width(),subWidget->height());
        QPropertyAnimation* m_pAnimation = new QPropertyAnimation();
        m_pAnimation->setTargetObject(subWidget);
        m_pAnimation->setPropertyName("pos");
        m_pAnimation->setDuration(2000);
        m_pAnimation->setStartValue(QPoint(0,40));
        m_pAnimation->setEndValue(QPoint(width(), 40));
        m_pAnimation->start();
        subWidget->show();
        connect(m_pAnimation,&QPropertyAnimation::finished,this,[subWidget=subWidget,m_pAnimation]{
            if(m_pAnimation!=Q_NULLPTR){
                delete m_pAnimation;
            }
            if(subWidget!=Q_NULLPTR){
                subWidget->hide();
            }
        });
    });
}
MainWidget::~MainWidget()
{
    if(btnLayout!=Q_NULLPTR){
        delete btnLayout;
        btnLayout=Q_NULLPTR;
    }
    if(mainLayout!=Q_NULLPTR){
        delete  mainLayout;
        mainLayout=Q_NULLPTR;
    }
}

main.cpp

#include "MainWidget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWidget mainWidget;
    mainWidget.show();
    return a.exec();
}
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue.js 提供了一种灵活的方式来添加动画效果,其中淡入淡出和位移是常见的视觉过渡。在 Vue 中,你可以使用第三方库如 `vue-animate`、`v-enter-active` 或直接使用 CSS 和 Vue 的 `v-show`、`v-if` 结合 `transition` 或 `v-enter`、`v-leave` 来实现这些效果。 1. **淡入淡出**(Fade in/out): 在 Vue 中,你可以使用 `v-enter` 和 `v-leave` 修饰符配合 CSS 过渡(`transition`)来实现元素的淡入淡出效果。例如: ```html <template> <div class="fade" v-enter="fadeIn" v-leave="fadeOut"> 这是一个动态组件 </div> </template> <script> export default { methods: { fadeIn() { this.$el.style.opacity = 0; }, fadeOut() { this.$el.style.opacity = 0; setTimeout(() => { this.$el.style.display = 'none'; }, 300); } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 在这个例子中,`.fade-enter-active` 和 `.fade-leave-active` 设置了淡入淡出的过渡效果,`.fade-enter` 和 `.fade-leave-to` 是状态开始和结束时的样式。 2. **位移**(Position transition): 如果你想让元素在淡入淡出的同时还有位置移动,可以在 CSS 里定义 `transform: translate()` 并结合过渡效果。例如: ```css .fade-translate-enter-active, .fade-translate-leave-active { transition: all 0.5s ease; } .fade-translate-enter { transform: translateY(100px); } .fade-translate-leave-to { transform: translateY(0); } ``` 在上述代码中,`.fade-translate-enter` 和 `.fade-translate-leave-to` 分别设置了进入和离开时的初始和结束位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值