使用QPropertyAnimation

时间:2016-03-10 14:54:28

标签: c++ qt qpushbutton qpropertyanimation qcolor

我尝试将柔和的颜色更改应用于QPushButton点击事件。我对QPropertyAnimation的第一种方法就像一个魅力。

头:

class myAnim : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(QColor color READ color WRITE setColor)

public:
    explicit myAnim(QWidget *parent = 0);

    void setColor (QColor color){
        setStyleSheet(QString(" QPushButton { background-color: rgb(%1, %2, %3); }").arg(color.red()).arg(color.green()).arg(color.blue()));
    }

和来源:

QPropertyAnimation *anim = new QPropertyAnimation(this, "color");
anim->setDuration(300);                      // duration in ms
anim->setStartValue(QColor(0, 0, 0);
anim->setEndValue(QColor(249, 249, 249));
anim->start();

但是由于我的Button确实有线性渐变作为背景,我需要更改多种颜色。尝试更改标题,如下所示:

void setColor (QColor color[3]){
        setStyleSheet(QString("QPushButton { background: qlineargradient(x1:0, y1:0, x2:0, y2:1,") +
                      QString("stop: 0    rgba(%1, %2, %3, 255),").arg( color[0].red() ).arg( color[0].green() ).arg( color[0].blue() ) +
                      QString("stop: 0.5  rgba(%1, %2, %3, 255),").arg( color[1].red() ).arg( color[1].green() ).arg( color[1].blue() ) +
                      QString("stop: 0.6  rgba(%1, %2, %3, 255),").arg( color[2].red() ).arg( color[2].green() ).arg( color[2].blue() ) +
                      QString("stop: 1    rgba(%1, %2, %3, 255),").arg( color[0].red() ).arg( color[0].green() ).arg( color[0].blue() ));
    }

我的问题:如何编辑" setStartValue"和" setEndValue"在源文件中正确??

编辑1: 我的应用程序中的按钮如下所示: button_1

QPushButton的样式表:

background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f9f9f9 , stop: 0.5 #B5B5B5 , stop: 0.6 #D6D6D6 , stop:1 #f9f9f9 );

已按下事件的样式表:

background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #005da8, stop: 0.5 #2882cc, stop: 0.6 #418ecd, stop:1 #005da8);

点击银色后,渐变变为蓝色渐变。释放后,它们应该再次轻柔地褪色到银色的外观中。 如前所述,第一种方法正是如此,但只有一种平面颜色。 我之前从未使用过QPainter或定制的paintEvent,所以任何帮助都会受到高度赞赏!

谢谢!

米莎

1 个答案:

答案 0 :(得分:0)

最简单的方法是为每个停靠点定义一个属性:

Q_PROPERTY(QColor color1 READ color1 WRITE setColor1)
Q_PROPERTY(QColor color2 READ color2 WRITE setColor2)
Q_PROPERTY(QColor color3 READ color3 WRITE setColor3)
Q_PROPERTY(QColor color4 READ color4 WRITE setColor4)

虽然这很难看。

在你的评论中,你提到每种颜色的RGB组件是相同的,组件基本上是249,181,214和249.如果你知道每种颜色基于249,你可以做这样的事情:

void setColor (QColor color){
    const int base = color.red();
    const int stop2 = (181.0 / 249.0) * base;
    const int stop3 = (214.0 / 249.0) * base;
    setStyleSheet(QString("QPushButton { background: qlineargradient(x1:0, y1:0, x2:0, y2:1,") +
                  QString("stop: 0    rgba(%1, %2, %3, 255),").arg( base ).arg( base ).arg( base ) +
                  QString("stop: 0.5  rgba(%1, %2, %3, 255),").arg( stop2 ).arg( stop2 ).arg( stop2 ) +
                  QString("stop: 0.6  rgba(%1, %2, %3, 255),").arg( stop3 ).arg( stop3 ).arg( stop3 ) +
                  QString("stop: 1    rgba(%1, %2, %3, 255),").arg( base ).arg( base ).arg( base ));
}

这允许您为color属性使用任何颜色(只要所有组件都相同),其他颜色将自动缩放。

如@SaZ所述,以这种方式修改样式表可能会很慢。您可以考虑使用QPalette或(可能是最快的选项),覆盖paintEvent()并自己绘制小部件。