애니메이션 프레임워크

애니메이션 프레임워크는 GUI 요소에 애니메이션을 적용할 수 있는 간편한 방법을 제공합니다. 이를 통해 위젯의 Qt 속성 값이나 QObject 에 애니메이션을 적용할 수 있습니다. 이 프레임워크가 제공하는 대부분의 기능은 Qt Quick에서도 사용할 수 있으며, 여기서는 선언적인 방식으로 애니메이션을 정의할 수 있습니다.

이 개요에서는 프레임워크의 아키텍처를 설명하고, QObject 및 GUI 요소에 애니메이션을 적용하는 데 사용되는 일반적인 기법을 보여주는 예제를 다룹니다.

애니메이션 아키텍처

다음 다이어그램은 프레임워크에서 제공하는 가장 중요한 클래스들을 보여줍니다:

여기에는 애니메이션에 필요한 기반을 제공하는 ` QAbstractAnimation ` 클래스가 포함됩니다. 이 클래스는 프레임워크에서 지원하는 모든 애니메이션에 대한 일반적인 속성을 정의합니다. 예를 들어, 애니메이션을 시작, 중지 및 일시 정지하는 기능 등이 있습니다. 또한 이 클래스는 시간 변경 알림을 수신합니다.

또한 이 프레임워크는 기본 클래스인 ` QAbstractAnimation`을 기반으로 하는 ` QVariantAnimation ` 및 ` QAnimationGroup ` 클래스를 제공합니다. 계층 구조에서 다음 단계는 ` QVariantAnimation`에서 파생된 ` QPropertyAnimation`로, 이를 통해 위젯의 Qt 속성이나 ` QObject`에 애니메이션을 적용할 수 있습니다. 이 클래스는 이징 곡선을 사용하여 속성 값에 대해 보간 처리를 수행합니다. 이것들이 준비되어 있다면, 애니메이션을 적용할 수 있는 Qt 속성 값을 가진 QObject 클래스만 있으면 됩니다.

복잡한 애니메이션은 QAbstractAnimation의 트리 구조를 구축하여 만들 수 있으며, 이 트리는 다른 애니메이션을 포함하는 애니메이션 그룹( QAnimationGroup )입니다. 이러한 애니메이션 그룹은 QParallelAnimationGroup 및 QSequentialAnimationGroup 와 같이 서로 다른 그룹이나 애니메이션을 나타내는 하위 그룹을 포함할 수도 있습니다.

내부적으로는 모든 애니메이션이 전역 타이머에 의해 제어되며, 이 타이머는 실행 중인 모든 애니메이션에 대한 정보를 ` updates `에 전달합니다.

이러한 개별 클래스와 프레임워크 내에서의 역할에 대한 자세한 정보는 해당 문서를 참조하십시오.

프레임워크에서 제공하는 클래스

이 클래스들은 단순하고 복잡한 애니메이션을 모두 생성하는 데 필요한 인프라를 제공합니다.

Qt 속성 애니메이션 적용

QPropertyAnimation 클래스는 Qt 속성에 대해 보간 처리를 수행할 수 있으므로 자주 사용됩니다. 사실, 이 클래스의 슈퍼클래스인QVariantAnimation는 updateCurrentValue() 메서드의 추상 구현을 제공하며, 이 메서드는 valueChanged signal 에서 값을 변경하지 않는 한 어떤 값도 변경하지 않습니다.

이 프레임워크를 사용하면 Qt에 포함된 기존 클래스의 Qt 속성을 애니메이션화할 수 있습니다. 예를 들어, ` QGraphicsView`에 삽입될 수 있는 ` QWidget ` 클래스에는 경계, 색상 등에 대한 속성이 있습니다. 다음 예제는 ` QPushButton ` 위젯을 애니메이션화하는 방법을 보여줍니다:

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>

class MyButtonWidget : public QWidget
{
public:
    MyButtonWidget(QWidget *parent = nullptr);
};

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *button = new QPushButton(tr("Animated Button"), this);
    QPropertyAnimation *anim = new QPropertyAnimation(button, "pos", this);
    anim->setDuration(10000);
    anim->setStartValue(QPoint(0, 0));
    anim->setEndValue(QPoint(100, 250));
    anim->start();
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyButtonWidget buttonAnimWidget;
    buttonAnimWidget.resize(QSize(800, 600));
    buttonAnimWidget.show();
    return a.exec();
}

이 예제는 QPushButton 의 pos Qt 속성을 애니메이션 처리하여, 화면의 왼쪽 상단 모서리에서 최종 위치(250, 250)로 10초(10000밀리초)에 걸쳐 이동하도록 합니다.

이 예제는 선형 보간 방법을 사용하여 시작값과 끝값 사이의 애니메이션 속도를 제어합니다. 시작값과 끝값 사이에 다른 값을 추가하여 어떻게 보간되는지 확인해 보세요. 이번에는 QPropertyAnimation::setKeyValueAt() 함수를 사용하여 이러한 값을 추가해 보십시오:

...
anim->setDuration(10000);
anim->setKeyValueAt(0, QPoint(0, 0));
anim->setKeyValueAt(0.8, QPoint(250, 250));
anim->setKeyValueAt(1, QPoint(0, 0));
...

이 예제에서 애니메이션은 버튼을 8초 만에 (250, 250) 위치로 이동시키고, 남은 2초 동안 버튼을 원래 위치로 되돌립니다. 버튼의 움직임은 이 두 지점 사이에서 선형 보간됩니다.

값에 setter 메서드가 있다면, Qt XML 속성으로 선언되지 않은 QObject 의 값도 애니메이션 처리할 수 있습니다. 이러한 경우, 해당 값을 포함하는 클래스에서 파생된 새로운 클래스를 만들고, setter가 포함된 해당 값에 대한 Qt XML 속성을 추가하십시오.

class MyGraphicsRectItem : public QObject, public QGraphicsRectItem
{
    Q_OBJECT
    Q_PROPERTY(QPointF pos READ pos WRITE setPos)
};

이 예제에서 ` MyGraphicsRectItem `은 ` QGraphicsRectItem `과 ` QObject`을 상속받으며, ` pos ` 속성을 정의합니다. ` QGraphicsRectItem `이 ` pos ` 속성을 제공하지 않더라도 해당 항목의 ` pos `에 애니메이션을 적용할 수 있습니다.

Qt 속성 시스템에 대한 일반적인 소개는 Qt의 속성 시스템을 참조하십시오.

애니메이션과 그래픽 뷰 프레임워크

QPropertyAnimation 는 QObject 을 상속하지 않는 QGraphicsItem 에도 애니메이션을 적용하는 데 사용할 수 있습니다. 이러한 경우, 애니메이션을 적용하려는 그래픽스 아이템에서 클래스를 파생시킵니다. 이 파생 클래스는 QGraphicsItem 에 QPropertyAnimation 를 사용할 수 있도록 QObject 을 상속해야 합니다. 다음 예제는 이를 수행하는 방법을 보여줍니다:

class Pixmap : public QObject, public QGraphicsPixmapItem
{
    Q_OBJECT
    Q_PROPERTY(QPointF pos READ pos WRITE setPos)
    ...
}

이전 섹션에서 설명한 바와 같이, 애니메이션을 적용할 속성을 정의해야 합니다. 메타 객체 시스템의 요구 사항에 따라 파생 클래스는 먼저 QObject 을 상속받아야 합니다.

이징 커브

QPropertyAnimation 는 시작 및 종료 속성 값 사이에서 선형 보간을 수행합니다. 애니메이션에 키프레임을 더 추가하는 것 외에도, 이징 커브를 선택하여 경로를 변경하지 않고 0과 1 사이의 보간 속도를 제어할 수 있습니다.

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *button = new QPushButton(tr("Animated Button"), this);
    QPropertyAnimation *anim = new QPropertyAnimation(button, "pos", this);
    anim->setDuration(10000);
    anim->setStartValue(QPoint(0, 0));
    anim->setEndValue(QPoint(100, 250));
    anim->setEasingCurve(QEasingCurve::OutBounce);
    anim->start();
}

이 예제에서는 애니메이션이 ‘ button ’가 공처럼 튀어 오르게 하는 곡선을 따릅니다. ` QEasingCurve `는 ` QEasingCurve::Type ` 열거형에서 선택할 수 있는 다양한 곡선을 제공합니다. 제공되지 않는 다른 곡선을 사용하려면 직접 구현한 후 ` QEasingCurve`에 등록하십시오.

애니메이션 그룹화

애플리케이션에는 종종 하나 이상의 애니메이션이 포함됩니다. 예를 들어, 하나 이상의 그래픽 항목을 동시에 이동하거나 순차적으로 차례대로 이동시키고자 할 수 있습니다.

QAnimationGroup의 하위 클래스인QSequentialAnimationGroup 와 QParallelAnimationGroup는 다른 애니메이션들을 담는 컨테이너 역할을 하여, 이러한 애니메이션들이 순차적으로 또는 병렬로 재생될 수 있도록 합니다. QAnimationGroup 는 속성을 직접 애니메이션화하지는 않지만, 주기적으로 시간 변경 사항을 알림을 받습니다. 이를 통해 시간 변경 사항을 애니메이션 그룹으로 전달할 수 있으며, 애니메이션 그룹은 각 애니메이션이 재생될 시점을 제어합니다.

다음 두 예제는 QSequentialAnimationGroup 와 QParallelAnimationGroup 의 사용법을 보여줍니다:

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *bonnie = new QPushButton(tr("Bonnie"), this);
    QPushButton *clyde = new QPushButton(tr("Clyde"), this);

    QPropertyAnimation *anim1 = new QPropertyAnimation(bonnie, "pos", this);
    anim1->setDuration(3000);
    anim1->setStartValue(QPoint(0, 0));
    anim1->setEndValue(QPoint(100, 250));

    QPropertyAnimation *anim2 = new QPropertyAnimation(clyde, "pos", this);
    anim2->setDuration(3000);
    anim2->setStartValue(QPoint(100, 250));
    anim2->setEndValue(QPoint(500, 500));

    QParallelAnimationGroup *parallelAnim = new QParallelAnimationGroup;
    parallelAnim->addAnimation(anim1);
    parallelAnim->addAnimation(anim2);
    parallelAnim->start();
}

병렬 그룹은 하나 이상의 애니메이션을 동시에 재생합니다. 이 그룹의 start() 함수는 그룹에 속한 모든 애니메이션을 시작합니다.

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *bonnie = new QPushButton(tr("Bonnie"), this);
    QPushButton *clyde = new QPushButton(tr("Clyde"), this);

    QPropertyAnimation *anim1 = new QPropertyAnimation(bonnie, "pos", this);
    anim1->setDuration(3000);
    anim1->setStartValue(QPoint(0, 0));
    anim1->setEndValue(QPoint(100, 250));

    QPropertyAnimation *anim2 = new QPropertyAnimation(clyde, "pos", this);
    anim2->setDuration(3000);
    anim2->setStartValue(QPoint(0, 0));
    anim2->setEndValue(QPoint(200, 250));

    QSequentialAnimationGroup *sequenceAnim = new QSequentialAnimationGroup;
    sequenceAnim->addAnimation(anim1);
    sequenceAnim->addAnimation(anim2);
    sequenceAnim->start();
}

이름에서 알 수 있듯이, 순차 그룹( QSequentialAnimationGroup )은 애니메이션을 순서대로 재생합니다. 이전 애니메이션이 끝나면 목록에 있는 다음 애니메이션을 시작합니다.

그룹은 그 자체로 하나의 애니메이션이므로, 다른 그룹에 추가할 수 있습니다. 이를 통해 애니메이션들이 서로 어떤 관계에서 재생될지를 정의하는 애니메이션 트리를 구축할 수 있습니다.

객체 소유권

애니메이션 그룹( QPropertyAnimation )은 항상 그 수명을 제어하는 부모를 가져야 합니다. 일반적인 애플리케이션에는 그룹화된 여러 애니메이션이 포함될 수 있으며, 이 경우 애니메이션 그룹이 해당 애니메이션들의 소유권을 갖습니다. 독립적인 애니메이션 그룹( QPropertyAnimation )은 수명을 제어하기 위해 부모를 명시적으로 지정해야 합니다. 다음 예제에서 볼 수 있듯이, 독립적인 애니메이션 그룹( QPropertyAnimation )은 애니메이션 그룹 인스턴스( QApplication )를 부모로 가지고 있습니다:

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>

class MyButtonWidget : public QWidget
{
public:
    MyButtonWidget(QWidget *parent = nullptr);
};

MyButtonWidget::MyButtonWidget(QWidget *parent) : QWidget(parent)
{
    QPushButton *button = new QPushButton(tr("Animated Button"), this);
    QPropertyAnimation *anim = new QPropertyAnimation(button, "pos", this);
    anim->setDuration(10000);
    anim->setStartValue(QPoint(0, 0));
    anim->setEndValue(QPoint(100, 250));
    anim->start();
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MyButtonWidget buttonAnimWidget;
    buttonAnimWidget.resize(QSize(800, 600));
    buttonAnimWidget.show();
    return a.exec();
}