按钮带动画效果（2）

最新推荐文章于 2022-08-29 14:25:39 发布

原创最新推荐文章于 2022-08-29 14:25:39 发布 · 802 阅读

CC 4.0 BY-SA版权

文章标签：

13 篇文章

订阅专栏

按钮带动画效果（1）我们看到了动画效果。

但是播放动画也要在一定的规则之内。

我们一般看到的button最少有4中状态，normal、hover、pressed、disable

而且我们使用button最重要的一条就是点击发送信号，连接槽。

这里我们就简单的解决这些问题。

还是先看下这两个图片。

不用说你肯定就知道了。下图对应4中button状态，上图是动画效果。

我们使用两组QList

    QList<QPixmap> m_pPixList;
    QList<QPixmap> m_pIconList;

来处理对应的图片。

我们的目的是：

1.平时button是normal状态，当鼠标划上上button播放动画效果，播放完毕鼠标在按钮上，按钮高亮(hover)

2.当鼠标划上button，但是在button动画效果没有播放完毕按下去button，动画要停止并且pressed图片

3.当鼠标划上button，但是在button动画效果没有播放完毕鼠标离开button，button要做相应的操作

所以在这里我们离不开QWidget的虚函数

    void enterEvent(QEvent *);
    void leaveEvent(QEvent *);
    void mousePressEvent(QMouseEvent *e);
    void mouseReleaseEvent(QMouseEvent *e);

我们定义一个枚举

typedef enum{
    BUTTON_NORMAL,
    BUTTON_HOVER,
    BUTTON_PRESSED,
    BUTTON_DISABLE,
    BUTTON_ENTER,
    BUTTON_LEAVE
}BUTTONSTATUS;

根据鼠标操作不同，我们设置鼠标的不同状态。

根据这些状态，我们去paintEvent画不同的图。

不知道我讲清楚了没有

哦哦，对了，还有一个最重要的，添加click信号

signals:
    clickWidget();

这样才能触发你的槽函数。

看不明白的，还是下载我的demo吧。

http://download.youkuaiyun.com/detail/c3060911030/9468677

请各位指教