---

前言

在 Qt 中，自定义控件可以让我们实现丰富的用户界面效果和交互体验。其中，动画文本是一种常见的效果，通过文本的动态变化可以吸引用户的注意力，增强用户体验。本文将介绍如何使用 Qt 实现一个动画文本的自定义控件，让你的应用程序更加生动活泼。

---

一、动画文本的效果

功能实现：
基础功能

1. 设置text
2. 设置字体颜色
3. 设置动画速度
4. 设置字体

高级功能
设置滚动方向

二、具体实现

首先我们这个是基于QWidget为父类的QPainter来实现的，我们的介绍课也已经讲了：
扬帆起航——Qt自定义控件介绍

定义动画对象

因为在此我们是使用坐标数值的变化，且是使用的是QPainter，所以我们使用：QVariantAnimation *var;对象来进行变化。
初始化对象：

	var = new QVariantAnimation(this);connect(var,&QVariantAnimation::valueChanged,this,[=](const QVariant&v){y = v.toInt();//把动画的数值拿到qDebug() << "y=" << y;update();//进行刷新});

设置动画时长的实现

void AniLabel::Setspeed(int s)
{var->setDuration(s);//设置动画时间
}

设置text函数实现

定义存储text的变量

QString text;//实际的text
QString tempText;//过度text

tempText的功能是为了中间动画而设计的。
如下图过程所示：

所以在这个过程我们需要使用2个text。

实现text更改函数：

void AniLabel::SetText(const QString &s)
{tempText = text;//记住上次的texttext = s;//更改textvar->setStartValue(0);var->setEndValue(-height());var->start();//开启动画
}

绘制代码

开启我们的抗锯齿：

QPainter p(this);
p.setRenderHint(QPainter::Antialiasing); // 启用抗锯齿效果

核心内容：

p.setFont(QFont("Ubuntu",30));
p.drawText(0,y,width(),height(),Qt::AlignCenter,tempText);
p.drawText(0,height() + y,width(),height(),Qt::AlignCenter,text);

我们可以看着刚刚的图来实现我们这部分的内容。

设置字体函数

QFont font;void AniLabel::SetFont(const QFont &f)
{font = f;update();
}

三、高级部分

由于有上下左右四个方向，所以我们可以定义一个枚举来弄我们的方向。

enum Direct{top,//从下到上bottom,//从上到下right,//从左到右left//从右到左};定义变量：
Direct d;

设置方向函数如下：

void AniLabel::SetDirect(AniLabel::Direct dir)
{d = dir;update();//这段代码可有可无
}

注意：这边需要一些小小的计算，如果不想计算可以直接抄哦~

设置动画函数如下：

void AniLabel::SetText(const QString &s)
{//........codeswitch(d){case top:var->setStartValue(-height());var->setEndValue(0);break;case bottom:var->setStartValue(0);var->setEndValue(-height());break;case left:var->setStartValue(0);var->setEndValue(width());break;case right:var->setStartValue(width());var->setEndValue(0);break;}var->start();
}

动画槽函数如下：

connect(var,&QVariantAnimation::valueChanged,this,[=](const QVariant&v){switch(d){case top:y = v.toInt();break;case bottom:y = v.toInt();break;case left:x = v.toInt();break;case right:x = v.toInt();break;}update();});

绘画函数核心代码：

switch(d){case top:p.drawText(0,y,width(),height(),Qt::AlignCenter,text);p.drawText(0,y+height(),width(),height(),Qt::AlignCenter,tempText);break;case bottom:p.drawText(0,y,width(),height(),Qt::AlignCenter,tempText);p.drawText(0,height() + y,width(),height(),Qt::AlignCenter,text);break;case left:qDebug() << "abs(x)" << abs(x);p.drawText(x,0,width(),height(),Qt::AlignCenter,tempText);p.drawText(x-width(),0,width(),height(),Qt::AlignCenter,text);break;case right:p.drawText(x,0,width(),height(),Qt::AlignCenter,text);p.drawText(x-width(),0,width(),height(),Qt::AlignCenter,tempText);break;}

操作代码

主文件实现效果代码：

通过定时器设置text

.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>namespace Ui {
class MainWindow;
}class MainWindow : public QMainWindow
{Q_OBJECTpublic:explicit MainWindow(QWidget *parent = 0);~MainWindow();private:Ui::MainWindow *ui;
};#endif // MAINWINDOW_H.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QTimer>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{ui->setupUi(this);ui->widget->Setpeed(1000);ui->widget->SetText("Hello");QTimer *t = new QTimer(this);connect(t,&QTimer::timeout,this,[=](){static int val = 0;ui->widget->SetText(QString::number(val));val++;val%=60;});t->start(1500);
}MainWindow::~MainWindow()
{delete ui;
}

总结

通过本文的介绍，读者可以了解到如何使用 Qt 自定义控件实现动画文本，并了解相关的设计思路和实现技巧。通过掌握动画效果实现的方法，读者可以进一步深入学习和应用 Qt 的动画功能，提升自己在 Qt 开发中的能力和创造力。

（文章内容可根据实际情况进行调整和扩展，以符合你的需求和读者的背景。）