• Qt之窗口动画(下坠、抖动、透明度)


    简述

    前面几节中我们介绍了关于动画的基本使用,有属性动画、串行动画组、并行动画组。这节我们来实现一些特效,让交互更顺畅。

    示例

    下面,我们以geometry、pos、windowOpacity属性为例,来实现窗体的下坠、抖动、透明度效果。

    效果

    这里写图片描述

    源码

    下坠效果:

    通过计算桌面的宽度、高度,来设置动画的起始值和结束值。

    void MainWindow::onDropWindow()
    {
        QPropertyAnimation *pAnimation = new QPropertyAnimation(this, "geometry");
    
        QDesktopWidget *pDesktopWidget = QApplication::desktop();
        int x = (pDesktopWidget->availableGeometry().width() - width()) / 2;
        int y = (pDesktopWidget->availableGeometry().height() - height()) / 2;
    
        pAnimation->setDuration(1000);
        pAnimation->setStartValue(QRect(x, 0, width(), height()));
        pAnimation->setEndValue(QRect(x, y, width(), height()));
        pAnimation->setEasingCurve(QEasingCurve::OutElastic);
        pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
    }

    抖动效果:

    获取界面的坐标,然后进行上、下、左、右坐标浮动,通过setKeyValueAt()来设置每一时刻的位置,实现抖动效果。

    void MainWindow::onShakeWindow()
    {
        QPropertyAnimation *pAnimation = new QPropertyAnimation(this, "pos");
        pAnimation->setDuration(500);
        pAnimation->setLoopCount(2);
        pAnimation->setKeyValueAt(0, QPoint(geometry().x() - 3, geometry().y() - 3));
        pAnimation->setKeyValueAt(0.1, QPoint(geometry().x() + 6, geometry().y() + 6));
        pAnimation->setKeyValueAt(0.2, QPoint(geometry().x() - 6, geometry().y() + 6));
        pAnimation->setKeyValueAt(0.3, QPoint(geometry().x() + 6, geometry().y() - 6));
        pAnimation->setKeyValueAt(0.4, QPoint(geometry().x() - 6, geometry().y() - 6));
        pAnimation->setKeyValueAt(0.5, QPoint(geometry().x() + 6, geometry().y() + 6));
        pAnimation->setKeyValueAt(0.6, QPoint(geometry().x() - 6, geometry().y() + 6));
        pAnimation->setKeyValueAt(0.7, QPoint(geometry().x() + 6, geometry().y() - 6));
        pAnimation->setKeyValueAt(0.8, QPoint(geometry().x() - 6, geometry().y() - 6));
        pAnimation->setKeyValueAt(0.9, QPoint(geometry().x() + 6, geometry().y() + 6));
        pAnimation->setKeyValueAt(1, QPoint(geometry().x() - 3, geometry().y() - 3));
        pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
    }

    透明度效果:

    设置每一时刻的透明度值,动画结束时界面还原(透明度再为1)。

    void MainWindow::onOpacityWindow()
    {
        QPropertyAnimation *pAnimation = new QPropertyAnimation(this, "windowOpacity");
        pAnimation->setDuration(1000);
        pAnimation->setKeyValueAt(0, 1);
        pAnimation->setKeyValueAt(0.5, 0);
        pAnimation->setKeyValueAt(1, 1);
        pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
    }

    是不是很有趣,还不快点儿,实现属于自己的动画。

    更多参考

  • 相关阅读:
    比较两个json数组是否有相同的选项
    使用gulp实现静态资源版本号替换
    Happy Halloween
    前端学习plan
    Python之函数式编程
    秋意浓
    2018给自己个plan,给自己一个小目标
    see goodbye with 2017
    杂记(一)
    The fruit in mid-summer
  • 原文地址:https://www.cnblogs.com/new0801/p/6146579.html
Copyright © 2020-2023  润新知