Редактирование: Fading Effects with Qt 4.1

{{Панель навигации по Qt Quarterly|Выпуск 16}}

by Trenton Schulz
{{цитата|'''The backing store in Qt 4.1 makes it much easier toimplement transparency effectsthan previous versions of Qt. In this article, we will combine analpha channel with a timer and get some nice results that can make aninterface attractive without distracting the user.'''}}
'''[http://www.crossplatform.ru/uploads/articles/sources/qq16-fader-code.zip Download source code]'''

We use semi-transparency to implement <tt>FaderWidget</tt>, a widgetthat we'll put on top of another widget before fading it away. As it fadesaway, the widget underneath it will become visible.
<source lang="cpp-qt">
class FaderWidget : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(QColor fadeColor READ fadeColor \
               WRITE setFadeColor)
    Q_PROPERTY(int fadeDuration READ fadeDuration \
               WRITE setFadeDuration)
public:
    FaderWidget(QWidget *parent);

    QColor fadeColor() const { return color; }
    void setFadeColor(const QColor &amp;newColor);
    int fadeDuration() const { return duration; }
    void setFadeDuration(int milliseconds);
    void start();

protected:
    void paintEvent(QPaintEvent *event);

private:
    QTimer *timer;
    int currentAlpha;
    QColor color;
    int duration;
};
</source> 
The <tt>fadeColor</tt> property controls the solid color that we startfading from; <tt>fadeDuration</tt> is the time in milliseconds it takes forthe fade to complete.
<source lang="cpp-qt">
FaderWidget::FaderWidget(QWidget *parent)
    : QWidget(parent)
{
    if (parent)
        startColor = parent->palette().window().color();
    else
        startColor = Qt::white;

    currentAlpha = 0;
    duration = 333;

    timer = new QTimer(this);
    connect(timer, SIGNAL(timeout()),
            this, SLOT(update()));

    setAttribute(Qt::WA_DeleteOnClose);
    resize(parent->size());
}
</source> 
The constructor initializes the default fade color to the parent's"window" palette entry (the "background" entry in previous Qtversions), typically some shade of gray. The default fade duration is333 milliseconds. This is usually short enough for the animation tofinish without being too distracting.

We enable the <tt>Qt::WA_DeleteOnClose</tt> attribute because the fader isa short-lived widget that automatically deletes itself once thefading effect is finished. We also create a [[Qt:Документация_4.3.2/qtimer  | QTimer]]to call <tt>update()</tt> repeatedly. At the end, we resize the widget so thatit is the same size as the parent, effectively covering it completely.
<source lang="cpp-qt">
void FaderWidget::start()
{
    currentAlpha = 255;
    timer->start(33);
    show();
}
</source> 
The <tt>start()</tt> function initiates the fade. Here we simply set the<tt>currentAlpha</tt> value to 255 (opaque).To obtain a rate of 30 frames per second, we use 33 milliseconds as the timerinterval.

Now, every time the timer emits the <tt>timeout()</tt> signal, we will geta paint event. The <tt>paintEvent()</tt> handler looks like this:
<source lang="cpp-qt">
void FaderWidget::paintEvent(QPaintEvent * /* event */)
{
    QPainter painter(this);
    QColor semiTransparentColor = startColor;
    semiTransparentColor.setAlpha(currentAlpha);
    painter.fillRect(rect(), semiTransparentColor);

    currentAlpha -= 255 * timer->interval() / duration;
    if (currentAlpha <= 0) {
        timer->stop();
        close();
    }
}
</source> 
We create a new color based on the original color and our current alphavalue. We then fill the widget with this color and decrement thealpha value. The next time we paint, the <tt>FaderWidget</tt> will beslightly more transparent. When the <tt>currentAlpha</tt> reaches zero, westop the timer and close the widget since, at this point, thewidget is completely transparent. The widget will be implicitly deletedwhen it is closed because we set the[http://www.crossplatform.ru/documentation/qtdoc4.3/qt.php#WidgetAttribute-enum Qt::WA_DestroyOnClose] attributein the constructor.

Now that we have implemented the <tt>FaderWidget</tt>, let's quicklymodify the Config Dialog example that is included with Qt (in<tt>"examples/dialogs/configdialog"</tt>) to fade between its pages. Wesimply need to add a new private slot and a[[Qt:Документация_4.3.2/qpointer  | QPointer]] to the <tt>ConfigDialog</tt> class:
<source lang="cpp-qt">
private slots:
    void fadeInWidget(int index);
private:
    QPointer<FaderWidget> faderWidget;
</source> 
In the constructor, we connect[[Qt:Документация_4.3.2/qstackedwidget  | QStackedWidget]]'s[http://www.crossplatform.ru/documentation/qtdoc4.3/qstackedwidget.php#currentChanged currentChanged()] signal toour new <tt>fadeInWidget()</tt> slot:
<source lang="cpp-qt">
  connect(pagesWidget, SIGNAL(currentChanged(int)),
            this, SLOT(fadeInWidget(int)));
</source> 
Here's the slot:
<source lang="cpp-qt">
void ConfigDialog::fadeInWidget(int index)
{
    if (faderWidget)
        faderWidget->close();
    faderWidget = new FaderWidget(
                              pagesWidget->widget(index));
    faderWidget->start();
}
</source> 
First, we check if we have a <tt>FaderWidget</tt>. This is where a[[Qt:Документация_4.3.2/qpointer  | QPointer]] comes in handy since, unlike a standardpointer, it is automatically reset to zero when the object it points to isdeleted. If there is already a <tt>FaderWidget</tt>, we close it since wedon't need to have multiple fades happening at the same time.

In any case, we create a new <tt>FaderWidget</tt> with the widget to berevealed as its parent, and call start on the <tt>FaderWidget</tt>. The restjust fades away, as you will see when you run the example.