Qt Quick 의 ‘상태’와 ‘비헤이비어’ 함께 사용하기

상태와 함께 비헤이비어 사용하기

경우에 따라 상태 변경으로 인한 속성 변경을 애니메이션화하기 위해 비헤이비어를 사용하기로 선택할 수 있습니다. 이는 어떤 상황에서는 잘 작동하지만, 다른 상황에서는 예상치 못한 동작을 유발할 수 있습니다.

다음은 이 문제를 보여주는 예시입니다:

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: "red"
        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        }
    }
}

마우스를 색이 칠해진 사각형 안으로 빠르게 반복해서 이동시키고 다시 밖으로 빼는 방식으로 예제를 테스트해 보면, 색이 칠해진 사각형이 시간이 지남에 따라 점차 녹색으로 고정되고, 다시 완전히 빨간색으로 돌아오지 않는 것을 확인할 수 있습니다. 이것은 우리가 원했던 결과가 아닙니다! 이 문제는 색상 변화를 애니메이션화하기 위해 ‘Behavior’를 사용했고, 상태 변화가 마우스가 ‘ MouseArea ’ 영역에 들어갔다 나가는 것으로 트리거되는데, 이 과정이 쉽게 중단될 수 있기 때문에 발생합니다.

이 문제를 좀 더 공식적으로 표현하자면, ‘상태(States)’와 ‘비헤이비어(Behaviors)’를 함께 사용할 때 다음과 같은 경우 예상치 못한 동작이 발생할 수 있습니다:

'Behavior'를 사용하여 속성 변경을 애니메이션 처리할 때, 특히 명시적으로 정의된 상태에서 암시적인 기본 상태로 되돌아갈 때; 그리고
이 Behaviors가 중단되어 명시적으로 정의된 상태로 (다시) 진입할 수 있는 경우입니다.

이 문제는 QML에서 기본 상태가 명시적으로 정의된 상태로 진입하기 직전의 애플리케이션 “스냅샷” 상태로 정의되는 방식 때문에 발생합니다. 이 경우, 녹색에서 빨간색으로 애니메이션이 진행 중일 때 애니메이션을 중단하고 "GreenState"로 되돌아가면, 기본 상태에는 애니메이션 중간 단계의 색상이 포함됩니다.

향후 QML 버전에서는 이러한 상황을 더 원활하게 처리할 수 있을 것이지만, 현재로서는 이 문제를 피하기 위해 애플리케이션을 수정할 수 있는 몇 가지 방법이 있습니다.

1. Behavior 대신 전환(transition)을 사용하여 변경을 애니메이션으로 표현합니다.

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: "red"

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        }

        transitions: Transition {
            ColorAnimation {}
        }
    }
}

2. 상태 대신 조건부 바인딩을 사용하여 속성 값을 변경하십시오.

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        color: mouser.containsMouse ? "green" : "red"
        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }
    }
}

3. 암시적 기본 상태 대신 명시적으로 정의된 상태만 사용합니다.

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: coloredRect
        width: 100
        height: 100
        anchors.centerIn: parent

        Behavior on color {
            ColorAnimation {}
        }

        MouseArea {
            id: mouser
            anchors.fill: parent
            hoverEnabled: true
        }

        states: [
        State {
            name: "GreenState"
            when: mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "green"
            }
        },
        State {
            name: "RedState"
            when: !mouser.containsMouse

            PropertyChanges {
                target: coloredRect
                color: "red"
            }
        }]
    }
}

상태 애니메이션 및 전환

© 2026 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.