QPropertyAnimation- 淡入淡出并且大小转换同时动画

在应用中,有时候会有这样一种效果,就是某一个按键按下去之后,会弹出一个带有多个按键的界面。这个动画效果,经常是淡入淡出和界面转换同时运行。在QT中,也可以实现。

这里参考的网络例子是:https://www.jianshu.com/p/0050eae56929

还是先上结果好了,点击start按键后,开始动画。

这里比较简要,所以只上主函数的代码即可:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPropertyAnimation>
#include <QParallelAnimationGroup>
#include <QSequentialAnimationGroup>
#include <QGraphicsOpacityEffect>
#include <QDebug>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //scale
    //初始化透明效果
    QGraphicsOpacityEffect *pButtonOpacity = new QGraphicsOpacityEffect(this);
    pButtonOpacity->setOpacity(1);
    ui->scaleButton->setGraphicsEffect(pButtonOpacity);

    //大小变化动画
    pScaleAnimation1 = new QPropertyAnimation(ui->scaleButton, "geometry");
    pScaleAnimation1->setDuration(1000);
    pScaleAnimation1->setStartValue(QRect(70, 110, 0, 0));
    pScaleAnimation1->setEndValue(QRect(70, 110, 140, 140));
    pScaleAnimation1->setEasingCurve(QEasingCurve::InOutQuad);

    //透明度变化动画
    pOpacityAnimation1 = new QPropertyAnimation(pButtonOpacity, "opacity");
    pOpacityAnimation1->setDuration(1000);
    pOpacityAnimation1->setStartValue(0);
    pOpacityAnimation1->setEndValue(1);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_startButton_clicked()
{
    static bool Flag = 0;
    if(Flag)
    {
        //设置动画方向
        pScaleAnimation1->setDirection(QAbstractAnimation::Forward);
        pOpacityAnimation1->setDirection(QAbstractAnimation::Forward);
        //动画同时开始
        pScaleAnimation1->start();
        pOpacityAnimation1->start();
        Flag = 0;
    }
    else
    {
        pScaleAnimation1->setDirection(QAbstractAnimation::Backward);
        pOpacityAnimation1->setDirection(QAbstractAnimation::Backward);
        pScaleAnimation1->start();
        pOpacityAnimation1->start();
        Flag = 1;
    }
}


void MainWindow::on_scaleButton_clicked()
{
    qDebug()<<"click";
}

 

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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` 分别设置了进入和离开时的初始和结束位置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值