一、前言

最近一个小项目需要动画交互：鼠标进入区域，显示动画（循环）；鼠标离开区域，停止动画；

思路：动画采用视频播放肯定不现实，所以改为QLabel切换图片来显示动画（有足够的视频帧）。继承QLabel重写显示动画的类，在内部定义一个区域变量、一个新状态变量、一个旧状态变量；

---

如果进入区域，则旧变量等于新变量，新变量为true；如果离开区域，则旧变量等于新变量，新变量为false；最后如果两个状态量不同，则说明需要改变：

• 如果旧变量为false，新变量为true，则说明刚刚进入区域，播放动画；
• 如果旧变量为true，新变量为false，则说明刚刚离开区域，停止动画；

！！！特别注意！！！
鼠标移动事件 mouseMoveEvent 默认需要点击之后移动才触发事件，设置setMouseTracking(true)之后才可以直接移动就触发事件，且不能是QMainWindow类，要用QWidget及其子类，此设置才管用！

---

二、效果展示

---

三、详细代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QLabel>
#include <QDebug>
#include <QMouseEvent>
#include <QDialog>
#include <QHBoxLayout>

class Widget : public QLabel
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    QRect annimation_rect;
    bool old_flag;
    bool new_flag;

    QDialog* dialog;
    QLabel* label;

protected:
    void mouseMoveEvent(QMouseEvent *event);

signals:
    void sig_flag(bool);
};

#endif // WIDGET_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

#include "widget.h"

Widget::Widget(QWidget* parent) : QLabel(parent)
{
    this->setMouseTracking(true);	//必须设置这个mouseMoveEvent才不用点击鼠标之后才触发

    dialog = new QDialog(this);
    dialog->resize(200,300);
    dialog->setStyleSheet("background-color: red");
    dialog->setWindowFlag(Qt::WindowStaysOnTopHint);
    dialog->setWindowFlag(Qt::FramelessWindowHint);
    QHBoxLayout* layout_dialog = new QHBoxLayout(dialog);
    layout_dialog->setMargin(0);
    layout_dialog->setSpacing(0);

    label = new QLabel(dialog);
    layout_dialog->addWidget(label);
}
Widget::~Widget()
{

}

void Widget::mouseMoveEvent(QMouseEvent *event)
{
    QPoint mousePos = event->pos();

    if(annimation_rect.contains(mousePos)) {
        old_flag = new_flag;
        new_flag = true;
    }else {
       old_flag = new_flag;
       new_flag = false;
    }

    if(old_flag != new_flag) {
        if(old_flag && !new_flag) {
            sig_flag(false);
            dialog->hide();
        }
        if(!old_flag && new_flag) {
            sig_flag(true);
            label->setText("鼠标进入动画区域");
            dialog->show();
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48