Qt实现几何、颜色、不透明度动画

Qt实现几何、颜色、不透明度动画

在一般的项目开发中，我们使用动画效果要比使用单纯的文字又更好地人机交互的效果，比如说，我们做一个温度显示的窗口如果里面只显示温度的数字，那就显得非常的单调，如果我们使用动画效果和数字来实现，是不是就很不错。

那我们这章就来讲讲动画的制作效果！

 1.UI界面设计

直接放我话的吧

这是他们的属性：

2.头文件

实现动画效果首先要有我们的头文件

#include"QGraphicsColorizeEffect"
#include"QGraphicsOpacityEffect"

• QGraphicsColorizeEffect：这个类允许你对图形项进行颜色化处理，即你可以将图形项的所有像素转换为另一种颜色（或色调），同时保持原始图形的形状和透明度不变。这对于实现各种视觉效果（如夜间模式、强调特定元素等）非常有用。

• QGraphicsOpacityEffect：这个类允许你改变图形项的透明度。通过调整透明度，你可以使图形项完全可见、半透明或完全不可见。这对于创建淡入淡出效果、覆盖层或简单地调整元素的可视性非常有用。

 3.widget.h文件

我们在我们的.h文件中声名一下：（记得要加头文件）

#include"QPropertyAnimation"

private:
    Ui::Widget *ui;
    QPropertyAnimation *propertyAnimation;
    QPropertyAnimation *propertyAnimation1;
    QPropertyAnimation *propertyAnimation2;

};

4.几何动画

几何动画就是让他实现从一个地方的一个大小变化到另一个地方的另一个大小。比如说我的初始位置在左上角，大小是10*20，然后设置最终位置是右下角，大小是100*300。大致就是这样的一个效果，那么我们接下来就来讲讲是如何实现的吧！

1.编写代码

接下来我们来实现一下：

//几何属性动画初始化
    propertyAnimation = new QPropertyAnimation(ui->geometryWidget,"geometry");

    //设置动画的起始值
    propertyAnimation->setStartValue(QRect(0,0,100,100));
    //设置中间值
    propertyAnimation->setKeyValueAt(0.1,QRect(500,100,100,200));
    //结束值
    propertyAnimation->setEndValue(QRect(600,500,200,200));
    //设置时间
    propertyAnimation->setDuration(2000);
    //设置动画循环周期
    propertyAnimation->setLoopCount(11);
    //设置动画的曲线
    propertyAnimation->setEasingCurve(QEasingCurve::OutInQuint);

我们使用按钮来控制他的开始，还是转到槽，这个我就不截图了，直接上代码（一定是在UI界面中转到槽，因为这样会自动在widget.h文件中生成声名函数）

void Widget::on_pushButton_2_clicked()
{
    propertyAnimation->start();
}

对，就这么简单！！

4.颜色动画

就是设置颜色的起始颜色和最终颜色还有变化时间，然后系统会自动的变化；

1.编写代码

 QGraphicsColorizeEffect *graphicsColorizeEffect= new QGraphicsColorizeEffect(this);
    ui->colorwidget->setGraphicsEffect(graphicsColorizeEffect);
    propertyAnimation1 = new QPropertyAnimation(graphicsColorizeEffect,"color");
    propertyAnimation1->setStartValue(QColor(Qt::red));
    propertyAnimation1->setEndValue(QColor(Qt::blue));
    propertyAnimation1->setDuration(2000);

按钮的转到槽的代码（一定是在UI界面中转到槽，因为这样会自动在widget.h文件中生成声名函数）

void Widget::on_pushButton_clicked()
{
    propertyAnimation1->start();
}

5.不透明度动画

这个看一下文字都大概能猜到它是什么意思吧，它使用的频率还是比较高的，比如说在做智能家居的时候做个呼吸灯，又或者~~~~~~~~~~~~等等。哈哈哈哈

1.代码编写

QGraphicsOpacityEffect *graphicsOpacityEffect = new QGraphicsOpacityEffect(this);
    ui->butoumin->setGraphicsEffect(graphicsOpacityEffect);
    propertyAnimation2 = new QPropertyAnimation(graphicsOpacityEffect,"opacity");
    propertyAnimation2->setStartValue(0.0);
    propertyAnimation2->setEndValue(1.0);
    propertyAnimation2->setDuration(2000);

其实实现的代码逻辑都是一样的，

按钮的转到槽的代码（一定是在UI界面中转到槽，因为这样会自动在widget.h文件中生成声名函数）

void Widget::on_pushButton_3_clicked()
{
    propertyAnimation2->start();
}