Back to Qt.io
Contact Us Blog Download Qt
이 페이지에서

Transition QML Type

상태 변경 시 발생하는 애니메이션 전환을 정의합니다. 더 보기...

Import Statement: import QtQuick

속성

상세 설명

전환(Transition)은 요소( State )의 변경이 발생할 때 적용될 애니메이션을 정의합니다.

예를 들어, 다음 Rectangle 에는 기본 상태와 추가된 "moved" 상태, 총 두 가지 상태가 있습니다. "moved" 상태에서는 사각형의 위치가 (50, 50)으로 변경됩니다. 추가된 전환(Transition)은 사각형이 기본 상태와 “moved” 상태 사이를 전환할 때, x 및 y 속성의 모든 변경 사항이 Easing.InOutQuad 를 사용하여 애니메이션 처리되어야 함을 지정합니다.

import QtQuick

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

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    states: State {
        name: "moved"; when: mouseArea.pressed
        PropertyChanges { target: rect; x: 50; y: 50 }
    }

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

이 예제에서는 NumberAnimation 에 대한 to 및 from 값을 지정할 필요가 없다는 점에 유의하십시오. 편의상, 이러한 속성은 상태 변경 전후에 x 및 y 의 값으로 자동 설정됩니다. from 값은 x 및 y 의 현재 값에서 제공되며, to 값은 PropertyChanges 객체에서 제공됩니다. 원한다면 to 및 from 값을 직접 지정하여 기본값을 재정의할 수도 있습니다.

기본적으로 트랜지션의 애니메이션은 상위 항목의 모든 상태 변경 시 적용됩니다. 트랜지션의 from 및 to 값을 설정하여, 특정 상태에서 다른 상태로 변경될 때만 애니메이션이 적용되도록 제한할 수 있습니다.

전환 내의 최상위 애니메이션은 병렬로 실행됩니다. 이를 순차적으로 실행하려면 ` SequentialAnimation` 내에 정의하십시오:

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

여러 개의 'Transition'을 정의하려면 ' Item::transitions '을 목록 형태로 지정하십시오:

    transitions: [
        Transition {
            from: "*"; to: "middleRight"
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 2000;
            }
        },
        Transition {
            from: "*"; to: "bottomLeft";
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 200;
            }
        },
        //If any other rectangle is clicked, the icon will return
        //to the start position at a slow speed and bounce.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutBounce;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

여러 개의 `Transition`이 지정된 경우, 특정 상태 변경 시에는 단 하나의 (가장 잘 일치하는) `Transition`만 적용됩니다. 위 예시에서, Rectangle이 ` "middleRight" ` 또는 ` "bottomLeft"` 이외의 상태로 진입하면 세 번째 `Transition`이 실행되어 아이콘이 시작점으로 이동하게 됩니다.

상태 변경에 ‘ Behavior ’와 동일한 속성에 일치하는 ‘Transition’이 있는 경우, 해당 상태 변경에 대해서는 ‘Transition’ 애니메이션이 ‘ Behavior ’을 우선합니다.

또한 ‘ Qt Quick ’의 ‘애니메이션 및 전환’, ‘상태 예제’, ‘Qt Quick States’ 및 Qt Qml.

속성 문서

animations : list<Animation> [default read-only]

이 속성은 이 전환에 대해 실행될 애니메이션 목록을 보관합니다.

    transitions: Transition {
        PropertyAnimation { duration: 3000 }
        ColorAnimation { duration: 3000 }
    }

최상위 애니메이션은 병렬로 실행됩니다. 순차적으로 실행하려면 ` SequentialAnimation` 내부에 정의하십시오:

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

enabled : bool

이 속성은 ‘ from ’ 상태에서 ‘ to ’ 상태로 이동할 때 전환 효과가 실행될지 여부를 결정합니다.

기본적으로 전환은 활성화되어 있습니다.

일부 상황에서는 전환을 비활성화하면 그 대신 다른 전환이 사용될 수 있다는 점에 유의하십시오. 다음 예시에서, 첫 번째 전환은 "state1"에서 "state2"로의 상태 변경을 애니메이션으로 처리하도록 설정되어 있지만, ` enabled `을 ` false`으로 설정하여 이 전환이 비활성화되었으므로, 실제로는 두 번째 전환에 의해 해당 상태 변경이 애니메이션 처리됩니다.

Item {
    states: [
        State { name: "state1" },
        State { name: "state2" }
    ]
    transitions: [
        Transition { from: "state1"; to: "state2"; enabled: false },
        Transition {
            // ...
        }
    ]
}

from : string

to : string

이러한 속성은 전환을 유발하는 상태 변화를 나타냅니다.

이 속성들의 기본값은 "*"입니다(즉, 모든 상태).

예를 들어, 다음 전환에서는 to 및 from 속성이 설정되어 있지 않으므로, 두 상태 간에 전환될 때(즉, 마우스를 눌렀다가 놓을 때) 항상 애니메이션이 적용됩니다.

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

    MouseArea { id: mouseArea; anchors.fill: parent }

    states: State {
        name: "brighter"; when: mouseArea.pressed
        PropertyChanges { target: rect; color: "yellow" }
    }

    transitions: Transition {
        ColorAnimation { duration: 1000 }
    }
}

이 전환을 다음과 같이 변경한 경우:

transitions: Transition {
    to: "brighter"
    ColorAnimation { duration: 1000 }
}

애니메이션은 기본 상태에서 "brighter" 상태로 변경될 때만 적용됩니다(즉, 마우스를 눌렀을 때는 적용되지만, 놓았을 때는 적용되지 않습니다).

쉼표로 구분된 문자열을 사용하여 여러 개의 to 및 from 값을 설정할 수 있습니다.

reversible도 참조하십시오 .

reversible : bool

이 속성은 이 전환을 유발한 조건이 반전되었을 때 전환이 자동으로 역방향으로 진행되어야 하는지 여부를 지정합니다.

기본값은 false입니다.

기본적으로, ` from ` 및 ` to ` 상태가 설정되지 않은 경우 전환은 병렬로 실행되며 모든 상태 변경에 적용됩니다. 이 경우, 상태 변경이 되돌려지면 전환이 자동으로 적용되므로 전환을 되돌리기 위해 이 속성을 설정할 필요가 없습니다.

그러나 ` SequentialAnimation `가 사용되거나, ` from ` 또는 ` to ` 속성이 설정된 경우, 상태 변경이 되돌려질 때 전환을 역방향으로 적용하려면 이 속성을 설정해야 합니다. 예를 들어, 다음 전환은 마우스를 눌렀을 때 순차적인 애니메이션을 적용하고, 마우스를 놓았을 때 애니메이션의 순서를 역방향으로 바꿉니다:

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

    TapHandler { id: tapHandler }

    states: State {
        name: "brighter"
        when: tapHandler.pressed
        PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
    }

    transitions: Transition {
        to: "brighter"
        reversible: true
        SequentialAnimation {
            PropertyAnimation { property: "x"; duration: 1000 }
            ColorAnimation { duration: 1000 }
        }
    }
}

만약 이 전환에 to 및 reversible 값이 설정되지 않았다면, 마우스 버튼이 놓일 때 전환은 순서를 역순으로 바꾸는 대신 PropertyAnimation 을 ColorAnimation 보다 먼저 재생하게 됩니다.

running : bool [read-only]

이 속성은 현재 전환이 진행 중인지 여부를 나타냅니다.

참고: ` Animation::running`와 달리 , 이 속성은 읽기 전용이며 트랜지션을 제어하는 데 사용할 수 없습니다.

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