Back to Qt.io
Contact Us Blog Download Qt

애니메이션 및 전환 Qt Quick

애니메이션 및 전환 유형

  • Transition - 상태 변경 중 트랜지션 애니메이션
  • SequentialAnimation - 애니메이션을 순차적으로 실행합니다.
  • ParallelAnimation - 애니메이션을 병렬로 실행합니다.
  • Behavior - 프로퍼티 변경에 대한 기본 애니메이션을 지정합니다.
  • PropertyAction - 애니메이션 중 즉각적인 속성 변경 설정
  • PauseAnimation - 애니메이션에 일시정지 도입
  • SmoothedAnimation - 프로퍼티가 값을 부드럽게 추적할 수 있도록 허용
  • SpringAnimation - 프로퍼티가 스프링과 같은 동작으로 값을 추적할 수 있도록 합니다.
  • ScriptAction - 애니메이션 중에 스크립트 실행

데이터 유형에 따라 프로퍼티에 애니메이션을 적용하는 유형

AnchorAnimation

앵커 값의 변화를 애니메이션으로 표시합니다.

ColorAnimation

색상 값의 변화를 애니메이션으로 표현합니다.

NumberAnimation

큐리얼 타입 값의 변경 사항 애니메이션

ParentAnimation

부모 값의 변경 사항 애니메이션

PathAnimation

경로를 따라 항목 애니메이션

PropertyAnimation

속성 값 변경 애니메이션

RotationAnimation

회전 값의 변화 애니메이션

Vector3dAnimation

QVector3d 값의 변화를 애니메이션화합니다.

애니메이션은 속성 값에 애니메이션 유형을 적용하여 생성됩니다. 애니메이션 유형은 프로퍼티 값을 보간하여 부드러운 전환을 만듭니다. 또한 상태 전환은 상태 변경에 애니메이션을 할당할 수 있습니다.

애니메이션을 만들려면 애니메이션을 적용하려는 속성 유형에 적합한 애니메이션 유형을 사용하고 필요한 동작 유형에 따라 애니메이션을 적용합니다.

애니메이션 트리거하기

개체에 애니메이션을 설정하는 방법에는 여러 가지가 있습니다.

직접 프로퍼티 애니메이션

애니메이션은 애니메이션 개체를 속성 값에 적용하여 시간에 따라 속성을 점진적으로 변경하는 방식으로 생성됩니다. 이러한 프로퍼티 애니메이션은 프로퍼티 값 변경 사이에 값을 보간하여 부드러운 움직임을 적용합니다. 프로퍼티 애니메이션은 타이밍 제어 기능을 제공하며 완화 커브를 통해 다양한 보간을 허용합니다.

Rectangle {
    id: flashingblob
    width: 75; height: 75
    color: "blue"
    opacity: 1.0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animateColor.start()
            animateOpacity.start()
        }
    }

    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

    NumberAnimation {
        id: animateOpacity
        target: flashingblob
        properties: "opacity"
        from: 0.99
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutBack; overshoot: 500}
   }
}

특수 프로퍼티 애니메이션 유형은 PropertyAnimation 유형보다 더 효율적으로 구현됩니다. int , color, 회전과 같은 다양한 QML 유형에 애니메이션을 설정하기 위한 것입니다. 마찬가지로 ParentAnimation 는 부모 변경 사항에 애니메이션을 적용할 수 있습니다.

다양한 애니메이션 속성에 대한 자세한 내용은 애니메이션 제어하기 섹션을 참조하세요.

미리 정의된 대상 및 속성 사용

이전 예제에서 PropertyAnimation 및 NumberAnimation 객체는 특정 target 및 properties 값을 지정하여 애니메이션이 적용되어야 하는 객체 및 속성을 지정해야 했습니다. 애니메이션을 속성 값 소스로 적용할 애니메이션을 지정하는 <프로퍼티>에 <애니메이션> 구문을 사용하면 이 문제를 피할 수 있습니다.

다음은 이 구문을 사용하여 지정된 두 개의 PropertyAnimation 개체입니다:

import QtQuick 2.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

사각형이 로드되는 즉시 애니메이션이 시작되며 x 및 y 값에 자동으로 적용됩니다. <프로퍼티>의 <애니메이션> 구문이 사용되었으므로 PropertyAnimation 객체의 target 값을 rect 로 설정할 필요가 없으며 property 값을 x 및 y 로 설정할 필요도 없습니다.

그룹화된 애니메이션에서도 이 구문을 사용하여 그룹 내의 모든 애니메이션이 동일한 프로퍼티에 적용되도록 할 수 있습니다. 예를 들어, 이전 예제에서는 SequentialAnimation 을 사용하여 사각형의 color 을 먼저 노란색으로 애니메이션한 다음 파란색으로 애니메이션할 수 있습니다:

import QtQuick 2.0

Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on color {
        ColorAnimation { to: "yellow"; duration: 1000 }
        ColorAnimation { to: "blue"; duration: 1000 }
    }
}

SequentialAnimation 개체가 <프로퍼티>의 <애니메이션> 구문을 사용하여 color 프로퍼티에 지정되었으므로 하위 ColorAnimation 개체도 이 프로퍼티에 자동으로 적용되므로 target 또는 property 애니메이션 값을 지정할 필요가 없습니다.

상태 변경 중 트랜지션

Qt Quick States 는 프로퍼티가 다른 상태를 반영하기 위해 다른 값을 가질 수 있는 프로퍼티 구성입니다. 상태 변경은 갑작스러운 속성 변경을 가져오지만 애니메이션은 전환을 부드럽게 하여 시각적으로 매력적인 상태 변경을 만들어냅니다.

Transition 유형에는 상태 변경으로 인한 속성 변경을 보간하는 애니메이션 유형이 포함될 수 있습니다. 전환을 개체에 할당하려면 transitions 프로퍼티에 바인딩합니다.

버튼에는 사용자가 버튼을 클릭할 때의 pressed 상태와 사용자가 버튼을 놓을 때의 released 상태라는 두 가지 상태가 있을 수 있습니다. 각 상태에 대해 서로 다른 속성 구성을 할당할 수 있습니다. 트랜지션은 pressed 상태에서 released 상태로 변경될 때 애니메이션을 적용합니다. 마찬가지로 released 상태에서 pressed 상태로 변경되는 동안 애니메이션이 표시됩니다.

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

to 및 from 속성을 상태 이름에 바인딩하면 특정 전환이 상태 변경에 할당됩니다. 단순 또는 대칭 전환의 경우 to 속성을 와일드카드 기호인 "*"로 설정하면 전환이 모든 상태 변경에 적용됨을 나타냅니다.

    transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

동작으로서의 기본 애니메이션

기본 속성 애니메이션은 동작 애니메이션을 사용하여 설정됩니다. Behavior 유형에 선언된 애니메이션은 프로퍼티에 적용되며 모든 프로퍼티 값 변경에 애니메이션을 적용합니다. 그러나 동작 유형에는 동작 애니메이션을 의도적으로 활성화 또는 비활성화할 수 있는 enabled 속성이 있습니다.

공 컴포넌트는 x, y, color 프로퍼티에 동작 애니메이션을 할당할 수 있습니다. 동작 애니메이션은 탄성 효과를 시뮬레이션하도록 설정할 수 있습니다. 실제로 이 동작 애니메이션은 공이 움직일 때마다 프로퍼티에 탄성 효과를 적용합니다.

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    component BounceAnimation : NumberAnimation {
       easing {
          type: Easing.OutElastic
          amplitude: 1.0
          period: 0.5
       }
    }

    Behavior on x {
        BounceAnimation {}
    }
    Behavior on y {
        BounceAnimation {}
    }
    Behavior on color {
        ColorAnimation { target: ball; duration: 100 }
    }
}

프로퍼티에 동작 애니메이션을 할당하는 방법에는 여러 가지가 있습니다. Behavior on <property> 선언은 프로퍼티에 동작 애니메이션을 할당하는 편리한 방법입니다.

동작 애니메이션에 대한 데모는 Qt Quick 예제 - 애니메이션을 참조하세요.

애니메이션을 병렬 또는 순서대로 재생하기

애니메이션은 병렬 또는 순서대로 실행할 수 있습니다. 병렬 애니메이션은 애니메이션 그룹을 동시에 재생하는 반면, 순차 애니메이션은 애니메이션 그룹을 차례대로 재생합니다. SequentialAnimation 및 ParallelAnimation 에서 애니메이션을 그룹화하면 애니메이션이 순서대로 또는 병렬로 재생됩니다.

배너 컴포넌트에는 여러 개의 아이콘이나 슬로건이 차례로 표시될 수 있습니다. opacity 속성은 불투명 객체를 나타내는 1.0 로 변환될 수 있습니다. SequentialAnimation 유형을 사용하면 앞의 애니메이션이 끝난 후 불투명도 애니메이션이 재생됩니다. ParallelAnimation 유형은 애니메이션을 동시에 재생합니다.

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}

개별 애니메이션이 SequentialAnimation 또는 ParallelAnimation 에 배치되면 더 이상 독립적으로 시작 및 중지할 수 없습니다. 순차 또는 병렬 애니메이션은 그룹으로 시작 및 중지해야 합니다.

SequentialAnimation 유형은 애니메이션이 전환 내에서 병렬로 재생되므로 전환 애니메이션을 재생하는 데에도 유용합니다.

애니메이션 제어하기

애니메이션을 제어하는 방법에는 여러 가지가 있습니다.

애니메이션 재생

모든 애니메이션 유형은 Animation 유형을 상속합니다. Animation 객체를 만들 수는 없지만 대신 이 유형은 애니메이션 유형에 필수적인 프로퍼티와 메서드를 제공합니다. 애니메이션 유형에는 start(), stop(), resume(), pause(), restart(), complete() 가 있으며, 이 메서드들은 모두 애니메이션 실행을 제어합니다.

Easing

이징 커브는 애니메이션이 시작 값과 끝 값 사이에서 보간하는 방법을 정의합니다. 다른 보간 커브는 정의된 보간 범위를 초과할 수 있습니다. 완화 커브는 바운스 효과, 가속, 감속 및 주기적 애니메이션과 같은 애니메이션 효과 생성을 간소화합니다.

QML 객체는 각 속성 애니메이션에 대해 서로 다른 완화 커브를 가질 수 있습니다. 또한 커브를 제어하는 다양한 파라미터가 있으며, 그 중 일부는 특정 커브에만 적용됩니다. 완화 커브에 대한 자세한 내용은 easing 문서를 참조하세요.

이 완화 예시에서는 각기 다른 완화 유형을 시각적으로 보여줍니다.

기타 애니메이션 유형

이 외에도 QML은 애니메이션에 유용한 몇 가지 다른 유형을 제공합니다:

  • PauseAnimation: 애니메이션 중 일시정지 가능
  • ScriptAction애니메이션 중에 JavaScript를 실행할 수 있으며 StateChangeScript 와 함께 사용하여 기존 스크립트를 재사용할 수 있습니다.
  • PropertyAction: 애니메이션 중에 프로퍼티 변경을 애니메이션화하지 않고 즉시 프로퍼티를 변경합니다.

다음은 다양한 프로퍼티 유형에 애니메이션을 적용하는 특수 애니메이션 유형입니다.

애니메이션 인스턴스 공유

트랜지션 또는 동작 간에 애니메이션 인스턴스를 공유하는 것은 지원되지 않으며, 정의되지 않은 동작이 발생할 수 있습니다. 다음 예시에서는 직사각형의 위치 변경이 제대로 애니메이션화되지 않을 가능성이 높습니다.

Rectangle {
    // NOT SUPPORTED: this will not work correctly as both Behaviors
    // try to control a single animation instance
    NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
    Behavior on x { animation: anim }
    Behavior on y { animation: anim }
}

가장 쉬운 해결 방법은 두 동작에 대해 NumberAnimation 을 반복하는 것입니다. 반복되는 애니메이션이 다소 복잡하다면 사용자 지정 애니메이션 컴포넌트를 만들고 각 동작에 인스턴스를 할당하는 것도 고려할 수 있습니다:

Rectangle {
    component MyNumberAnimation : NumberAnimation {
        duration: 300; easing.type: Easing.InBack
    }
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}

Qt Quick 예제 - 애니메이션을참조하세요 .

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.