애니메이션 및 전환 Qt Quick

애니메이션 및 전환 유형

• Transition - 상태 변경 시 전환 효과를 애니메이션으로 표현
• SequentialAnimation - 애니메이션을 순차적으로 실행합니다
• ParallelAnimation - 애니메이션을 병렬로 실행합니다
• Behavior - 속성 변경 시 적용될 기본 애니메이션을 지정합니다
• PropertyAction - 애니메이션 실행 중 속성을 즉시 변경합니다
• PauseAnimation - 애니메이션에 일시 정지 삽입
• SmoothedAnimation - 속성이 값을 부드럽게 추적하도록 허용
• SpringAnimation - 속성이 스프링과 같은 움직임으로 값을 추적하도록 허용
• ScriptAction - 애니메이션 진행 중 스크립트를 실행합니다

데이터 유형에 따라 속성을 애니메이션 처리하는 유형

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

애니메이션을 생성하려면 애니메이션이 적용될 속성의 유형에 적합한 애니메이션 유형을 사용하고, 필요한 동작 유형에 따라 애니메이션을 적용하십시오.

애니메이션 트리거하기

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

직접 속성 애니메이션

애니메이션은 속성 값에 애니메이션 객체를 적용하여 시간이 지남에 따라 속성을 점진적으로 변화시킴으로써 생성됩니다. 이러한 속성 애니메이션은 속성 값이 변경되는 과정의 값을 보간하여 부드러운 움직임을 구현합니다. 속성 애니메이션은 타이밍 제어를 제공하며, 이즈링 곡선을 통해 다양한 보간 방식을 적용할 수 있습니다.

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`, 회전(rotations)과 같은 다양한 QML 유형에 애니메이션을 적용하는 데 사용됩니다. 마찬가지로, ` ParentAnimation `은 부모 요소의 변경 사항을 애니메이션으로 표현할 수 있습니다.

다양한 애니메이션 속성에 대한 자세한 내용은 ‘애니메이션 제어’ 섹션을 참조하십시오.

사전 정의된 대상 및 속성 사용

이전 예제에서 ` PropertyAnimation ` 및 ` NumberAnimation ` 객체는 애니메이션이 적용될 객체와 속성을 지정하기 위해 특정 ` target ` 및 ` properties ` 값을 명시해야 했습니다. 이는 <Animation> on <Property> 구문을 사용하여 애니메이션이 속성 값 소스로 적용되도록 지정함으로써 이러한 과정을 생략할 수 있습니다.

다음은 이 구문을 사용하여 지정된 두 개의 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 값에 자동으로 적용됩니다. <Animation> on <Property> 구문을 사용했기 때문에, 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 객체가 <Animation> on <Property> 구문을 사용하여 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 ` 유형에서 선언된 애니메이션은 해당 속성에 적용되어 속성 값이 변경될 때마다 애니메이션을 생성합니다. 그러나 `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() ` 등의 메서드가 있으며, 이 모든 메서드는 애니메이션의 실행을 제어합니다.

이징

이징 곡선은 애니메이션이 시작값과 끝값 사이에서 어떻게 보간될지를 정의합니다. 이징 곡선에 따라 정의된 보간 범위를 벗어날 수도 있습니다. 이징 곡선을 사용하면 바운스 효과, 가속, 감속, 주기적인 애니메이션과 같은 애니메이션 효과를 쉽게 만들 수 있습니다.

QML 객체는 각 속성 애니메이션마다 서로 다른 이징 곡선을 가질 수 있습니다. 또한 곡선을 제어하는 다양한 매개변수가 있으며, 그중 일부는 특정 곡선에만 적용됩니다. 이징 곡선에 대한 자세한 내용은 easing 문서를 참조하십시오.

이 이징 예제는 다양한 이징 유형을 시각적으로 보여줍니다.

기타 애니메이션 유형

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

• PauseAnimation: 애니메이션 도중 일시 정지를 가능하게 합니다
• ScriptAction: 애니메이션 도중 JavaScript를 실행할 수 있게 하며, ` StateChangeScript `와 함께 사용하여 기존 스크립트를 재사용할 수 있습니다
• PropertyAction: 애니메이션 도중 속성 변경을 애니메이션 효과 없이 즉시 변경합니다

이는 서로 다른 속성 유형을 애니메이션 처리하는 특수한 애니메이션 유형입니다

• SmoothedAnimation: 대상 값이 변경될 때 애니메이션에서 부드러운 변화를 제공하는 특수한 ` NumberAnimation `입니다
• SpringAnimation: ` mass`, ` damping ` 및 epsilon
• ParentAnimation: 부모 변경을 애니메이션화하는 데 사용됩니다( ParentChange 참조)
• AnchorAnimation: 앵커 변경을 애니메이션화하는 데 사용됩니다( AnchorChanges 참조)

애니메이션 인스턴스 공유

전환(Transitions)이나 동작(Behaviors) 간에 애니메이션 인스턴스를 공유하는 것은 지원되지 않으며, 정의되지 않은 동작을 유발할 수 있습니다. 다음 예제에서 Rectangle의 위치 변경은 올바르게 애니메이션 처리되지 않을 가능성이 높습니다.

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 {} }
}