QT基础篇（18）QML动画特效
1.QML动画元素
2.1 PropertyAnimation元素
PropertyAnimation元素是Android中的一个UI元素，用于在动画中改变视图的属性。使用PropertyAnimation元素可以实现各种动画效果，如平移、旋转、缩放和透明度变化等。
PropertyAnimation元素有两个主要的子元素：ObjectAnimator和ValueAnimator。
-
ObjectAnimator：用于在一段时间内改变一个对象的属性值。可以通过设置目标对象、属性名称、起始值和结束值来创建一个ObjectAnimator对象。
-
ValueAnimator：用于在一段时间内改变一个或多个属性的值。可以通过设置起始值和结束值来创建一个ValueAnimator对象。
PropertyAnimation元素还有一些常用属性，包括：
- duration：动画的持续时间，以毫秒为单位。
- repeatCount：动画的重复次数。默认为0，表示不重复。可以设置为-1，表示无限重复。
- repeatMode：动画的重复模式。默认为RESTART，表示每次重复时从起始值开始。还可以设置为REVERSE，表示每次重复时从结束值开始。
使用PropertyAnimation元素可以实现流畅的动画效果，可以应用于各种场景，如按钮点击动画、页面切换动画等。
以下是一个使用PropertyAnimation元素的实例：
上述示例中，我们使用了一个set元素来组合两个ObjectAnimator动画。第一个ObjectAnimator将视图在垂直方向上进行平移，起始位置为0，结束位置为300，持续时间为1秒，重复次数为无限，重复模式为反向。第二个ObjectAnimator将视图进行旋转，起始角度为0，结束角度为360，持续时间为2秒，重复次数为无限，重复模式为重新开始。
此动画组合将会产生一个视图先进行平移，然后再进行旋转的效果。动画的插值器使用了系统提供的加速减速插值器。
使用PropertyAnimation元素，我们可以通过设置不同的属性和值来创建各种不同的动画效果。可以根据需要修改上述示例中的属性和值来实现自定义的动画效果。
1.2 其他动画元素
在QML中，其他的动画元素大多继承自Propertyanimation，主要有NumberAnimation，ColorAnimation，RotationAnimation和Vector3dAnimation等
NumberAnimation、ColorAnimation、RotationAnimation和Vector3dAnimation都是常见的动画类型，它们各自有其特定的应用场景和效果。
- NumberAnimation：这是一种数值动画，用于在一定时间范围内改变某个数值。可以通过设置起始值、结束值和持续时间等属性来控制动画效果。这种动画通常用于实现动态效果，如物体移动、缩放等。
- ColorAnimation：颜色动画用于改变颜色值。可以通过设置起始颜色和结束颜色等属性来控制动画效果。这种动画通常用于实现渐变、过渡等效果，如文字变色、背景渐变等。
- RotationAnimation：旋转动画用于控制物体的旋转。可以通过设置起始角度和结束角度等属性来控制动画效果。这种动画通常用于实现旋转效果，如旋转图标、旋转球体等。
- Vector3dAnimation：这是一种三维向量动画，用于在三维空间中改变向量的值。可以通过设置起始向量和结束向量等属性来控制动画效果。这种动画通常用于实现三维空间中的动态效果，如物体移动、旋转等。
这些动画类型可以通过组合使用来实现更复杂的动态效果，也可以通过调整属性值来改变动画的节奏、方向等。在实现动画时，还需要注意动画的持续时间、缓动函数等属性，以确保动画效果符合预期。
2.动画流UI界面
2.1 状态和切换
在Qt中，使用动画流UI界面中的状态和切换可以通过多种方式实现，其中一种常见的方法是使用状态机框架（State Machine Framework）。
下面是一个简单的示例，展示了如何在Qt中使用状态机框架来实现动画流UI界面中的状态和切换：
#include
#include
#include
#include
#include
#include
class MyWidget : public QWidget
{
Q_OBJECT
public:
MyWidget(QWidget *parent = nullptr) : QWidget(parent)
{
// 创建状态机
QStateMachine *machine = new QStateMachine(this);
// 创建状态
QState *state1 = new QState(machine);
QState *state2 = new QState(machine);
// 设置状态属性
state1->setProperty("color", "red");
state2->setProperty("color", "blue");
// 创建动画
QPropertyAnimation *animation = new QPropertyAnimation(this, "color");
// 设置动画的持续时间等属性
animation->setDuration(2000);
animation->setStartValue("red");
animation->setEndValue("blue");
// 将动画与状态机关联
machine->addState(state1);
machine->addState(state2);
machine->setInitialState(state1);
machine->start();
// 触发状态切换事件（例如按钮点击事件）
connect(button, &QPushButton::clicked, this, [=]() { machine->switchToState(state2); });
}
public slots:
void setColor(const QString &color)
{
// 设置界面元素的颜色属性（例如按钮的背景色）
button->setStyleSheet("background-color: " + color + ";");
}
private:
QPushButton *button = new QPushButton("Toggle Color", this);
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
MyWidget widget;
widget.show();
return app.exec();
} 在上面的示例中，我们创建了一个MyWidget类，继承自QWidget。我们创建了一个状态机，并定义了两个状态state1和state2。每个状态都有一个颜色属性，用于设置界面元素的颜色。我们还创建了一个属性动画，用于在状态之间切换时改变颜色。通过将动画与状态机关联，并在按钮点击事件中触发状态切换，我们可以实现UI界面的动画效果。当按钮被点击时，颜色将在红色和蓝色之间切换。
2.2 设计组合动画
在Qt中，组合动画可以通过将多个动画添加到一个动画组中来实现。QSequentialAnimationGroup是一个顺序动画组，它按照指定的顺序播放其包含的动画。而QParallelAnimationGroup是一个并行动画组，它同时播放其包含的所有动画。
以下是一个使用QSequentialAnimationGroup的简单示例，展示了如何在Qt中组合多个动画：
#include
#include
#include
#include
#include
#include
class MyWidget : public QWidget
{
Q_OBJECT
public:
MyWidget(QWidget *parent = nullptr) : QWidget(parent)
{
// 创建UI元素
label = new QLabel("Hello World!", this);
button = new QPushButton("Animate", this);
// 创建动画组
animationGroup = new QSequentialAnimationGroup(this);
// 创建并添加动画
QPropertyAnimation *animation1 = new QPropertyAnimation(label, "pos");
animation1->setDuration(1000);
animation1->setStartValue(QPoint(0, 0));
animation1->setEndValue(QPoint(200, 200));
animationGroup->addAnimation(animation1);
QPropertyAnimation *animation2 = new QPropertyAnimation(label, "rotation");
animation2->setDuration(1000);
animation2->setStartValue(0);
animation2->setEndValue(360);
animationGroup->addAnimation(animation2);
// 连接按钮的点击事件到动画组的播放槽函数
connect(button, &QPushButton::clicked, animationGroup, &QSequentialAnimationGroup::start);
}
private:
QLabel *label;
QPushButton *button;
QSequentialAnimationGroup *animationGroup;
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
MyWidget widget;
widget.show();
return app.exec();
} 在上面的示例中，我们创建了一个MyWidget类，其中包含一个标签和一个按钮。我们创建了一个QSequentialAnimationGroup对象，并将两个属性动画添加到其中。第一个动画是标签的位置动画，将标签从坐标(0, 0)移动到坐标(200, 200)。第二个动画是标签的旋转动画，将标签旋转360度。通过将这两个动画添加到顺序动画组中，它们将按照设定的顺序播放。最后，我们将按钮的点击事件连接到动画组的start槽函数，以便在点击按钮时开始播放动画。
3.图像特效
3.1 3D旋转
在Qt中实现3D旋转图像特效，可以使用QOpenGLWidget和OpenGL技术。以下是一个简单的示例，展示了如何使用OpenGL在Qt中实现3D旋转图像：
#include
#include
#include
#include
class MyOpenGLWidget : public QOpenGLWidget, protected QOpenGLFunctions
{
public:
MyOpenGLWidget(QWidget *parent = nullptr) : QOpenGLWidget(parent) {}
protected:
void initializeGL() override
{
initializeOpenGLFunctions();
glClearColor(0, 0, 0, 1); // 设置背景色为黑色
}
void resizeGL(int w, int h) override
{
glViewport(0, 0, w, h); // 设置视口大小
glMatrixMode(GL_PROJECTION); // 设置矩阵模式为投影矩阵
glLoadIdentity(); // 重置投影矩阵
gluPerspective(60, (double)w/h, 1, 100); // 设置透视投影矩阵
glMatrixMode(GL_MODELVIEW); // 设置矩阵模式为模型视图矩阵
glLoadIdentity(); // 重置模型视图矩阵
}
void paintGL() override
{
glClear(GL_COLOR_BUFFER_BIT); // 清除颜色缓冲区
glRotatef(rotationAngle, 0, 1, 0); // 旋转物体，每次旋转3度
drawObject(); // 绘制物体
swapBuffers(); // 交换前后缓冲区，显示绘制结果
}
void timerEvent(QTimerEvent *event) override
{
if (event->timerId() == timerId) {
rotationAngle += 3; // 每次旋转3度
update(); // 更新界面，重新绘制
} else {
QOpenGLWidget::timerEvent(event); // 处理其他定时器事件
}
}
private:
void drawObject() { /* 在这里绘制3D物体 */ }
int timerId = -1; // 定时器ID
float rotationAngle = 0; // 旋转角度
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
MyOpenGLWidget widget;
widget.resize(800, 600); // 设置窗口大小
widget.show(); // 显示窗口
widget.timerId = widget.startTimer(30); // 设置定时器，每30毫秒更新一次界面
return app.exec(); // 运行应用程序
} 在上面的示例中，我们创建了一个MyOpenGLWidget类，继承自QOpenGLWidget。我们重写了initializeGL、resizeGL、paintGL和timerEvent函数来实现3D旋转效果。在initializeGL中，我们设置了背景色为黑色，并初始化OpenGL函数。在resizeGL中，我们设置了视口大小和投影矩阵。在paintGL中，我们清除颜色缓冲区，然后旋转物体并绘制物体。在timerEvent中，我们处理定时器事件，更新旋转角度并重新绘制界面。最后，在main函数中，我们创建了MyOpenGLWidget对象，设置了窗口大小，显示窗口，并启动定时器来更新界面。
3.2 色彩处理
在Qt中实现图像的色彩处理，可以使用Qt的图像处理类和算法。以下是一个简单的示例，展示如何使用Qt的图像处理功能来实现色彩处理：
#include
#include
#include
#include
#include
#include
#include
class ColorEffectWidget : public QLabel
{
public:
ColorEffectWidget(QWidget *parent = nullptr) : QLabel(parent) {}
public slots:
void openImage() {
QString fileName = QFileDialog::getOpenFileName(this, "Open Image File");
if (!fileName.isEmpty()) {
QImage image(fileName);
if (!image.isNull()) {
QPixmap pixmap = QPixmap::fromImage(image);
QColor newColor = QColorDialog::getColor(Qt::white, this); // 获取新的颜色
if (newColor.isValid()) { // 如果选择了颜色
QColor color(newColor); // 将QColor对象转换为RGB格式
// 在这里添加色彩处理代码，例如将图像中的所有像素替换为新颜色
// 这里只是简单地将图像转换为灰度图像作为示例
QImage grayImage = pixmap.toImage().convertToFormat(QImage::Format_Grayscale8);
setPixmap(QPixmap::fromImage(grayImage)); // 将处理后的图像显示在label上
}
}
}
}
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
ColorEffectWidget widget;
widget.resize(800, 600); // 设置窗口大小
widget.show(); // 显示窗口
return app.exec(); // 运行应用程序
} 在上面的示例中，我们创建了一个ColorEffectWidget类，继承自QLabel。我们添加了一个槽函数openImage，用于打开图像文件并显示在标签上。在槽函数中，我们使用QFileDialog选择图像文件，并使用QImage和QPixmap进行图像处理。我们使用QColorDialog获取新的颜色，并在色彩处理代码中替换图像中的所有像素为新颜色。在这个示例中，我们只是简单地将图像转换为灰度图像作为示例。你可以根据需要添加其他色彩处理算法和效果。最后，在main函数中，我们创建了ColorEffectWidget对象，设置了窗口大小，显示窗口，并运行应用程序。