Back to Qt.io
Contact Us Blog Download Qt

Transition QML Type

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

Import Statement: import QtQuick

속성

상세 설명

트랜지션은 State 변경이 발생할 때 적용할 애니메이션을 정의합니다.

예를 들어 다음 Rectangle 에는 기본 상태와 추가된 "이동됨" 상태의 두 가지 상태가 있습니다. "이동됨" 상태에서는 사각형의 위치가 (50, 50)으로 변경됩니다. 추가된 전환은 사각형이 기본 상태와 "이동됨" 상태 사이에서 변경될 때 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 }
    }
}

여러 개의 트랜지션을 정의하려면 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;
            }
        }
    ]

여러 개의 트랜지션을 지정하면 특정 상태 변경에 대해 하나의 (가장 잘 일치하는) 트랜지션만 적용됩니다. 위의 예에서 직사각형이 "middleRight" 또는 "bottomLeft" 이외의 상태로 전환되면 세 번째 전환이 수행되어 아이콘이 시작 지점으로 이동합니다.

상태 변경에 Behavior 와 동일한 속성과 일치하는 트랜지션이 있는 경우 트랜지션 애니메이션이 해당 상태 변경에 대한 Behavior 을 재정의합니다.

Qt Quick, 상태 예제, Qt Quick 상태의애니메이션 및전환, 그리고 Qt Qml.

프로퍼티 문서

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

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

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

reversible 를참조하세요 .


animations : list<Animation> [default]

이 속성에는 이 전환에 대해 실행할 애니메이션 목록이 있습니다.

    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 {
            // ...
        }
    ]
}

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 값을 설정하지 않은 경우 마우스를 놓으면 트랜지션은 시퀀스를 반전하는 대신 ColorAnimation 앞에 PropertyAnimation 를 재생합니다.


running : bool [read-only]

이 속성은 전환이 현재 실행 중인지 여부를 유지합니다.

참고: Animation::running 과 달리 이 속성은 읽기 전용이며 전환을 제어하는 데 사용할 수 없습니다.


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