QT基础篇（18）QML动画特效_qml效果

作者：笔触狂放9 | 2024-03-24 03:31:58

踩

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 xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
 
    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="0"
        android:valueTo="300"
        android:duration="1000"
        android:repeatCount="infinite"
        android:repeatMode="reverse" />
 
    <objectAnimator
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360"
        android:duration="2000"
        android:repeatCount="infinite"
        android:repeatMode="restart" />
 
</set>

上述示例中，我们使用了一个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 <QApplication>  
#include <QWidget>  
#include <QPushButton>  
#include <QStateMachine>  
#include <QState>  
#include <QPropertyAnimation>  
  
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 <QApplication>  
#include <QWidget>  
#include <QPushButton>  
#include <QLabel>  
#include <QPropertyAnimation>  
#include <QSequentialAnimationGroup>  
  
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 <QApplication>  
#include <QOpenGLWidget>  
#include <QTimer>  
#include <QOpenGLFunctions>  
  
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 <QApplication>  
#include <QLabel>  
#include <QPushButton>  
#include <QFileDialog>  
#include <QImage>  
#include <QColorDialog>  
#include <QColor>  
  
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对象，设置了窗口大小，显示窗口，并运行应用程序。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/299586