ViewTransition QML Type

뷰에서 전환 중인 항목을 지정합니다. 자세히...

• 상속된 멤버를 포함한 모든 멤버 목록

첨부된 속성

• destination : point
• index : int
• item : item
• targetIndexes : list
• targetItems : list

자세한 설명

ListView 및 GridView 을 사용하면 뷰의 모델 수정으로 인해 뷰의 항목이 변경될 때마다 적용해야 하는 전환을 지정할 수 있습니다. 두 가지 모두 다양한 작업에 대해 실행할 적절한 전환으로 설정할 수 있는 다음과 같은 속성을 가지고 있습니다:

• populate - 뷰에 대해 처음에 만든 항목에 적용하거나 모델이 변경될 때 적용할 전환
• add - 뷰가 만들어진 후 뷰에 추가되는 항목에 적용할 전환
• remove - 뷰에서 제거되는 항목에 적용하는 전환
• move - 뷰 내에서 이동되는 항목에 적용할 전환(즉, 모델에서 이동 작업의 결과로)
• displaced - 추가, 이동 또는 제거 작업에 의해 이동되는 모든 항목에 적용될 일반 전환
• addDisplaced, removeDisplaced 및 moveDisplaced - 각각 추가, 이동 또는 제거 작업으로 항목이 이동될 때 적용할 전환(지정된 경우 일반 이동 전환을 재정의함)

데이터 모델이 아닌 하위 항목 컬렉션으로 작동하는 Row, Column, Grid 및 Flow 포지셔너 유형의 경우 다음 속성이 대신 사용됩니다:

• populate - 포지셔너 생성 시점에 포지셔너에 추가된 항목에 적용할 전환
• add - 포지셔너에 추가되거나 포지셔너에 다시 부모가 된 항목 또는 다음과 같이 된 항목에 적용하는 전환 visible
• move - 다른 항목의 추가 또는 제거로 인해 항목이 이동하거나 포지셔너 내에서 항목이 재배치되거나 포지셔너의 다른 항목 크기 조정으로 인해 항목이 재배치되는 경우를 포함하여 포지셔너 내에서 이동한 항목에 적용될 전환입니다.

보기 전환은 전환 중인 항목과 전환을 트리거한 작업에 대한 세부 정보를 제공하는 ViewTransition 첨부 프로퍼티에 액세스할 수 있습니다. 보기 전환은 항목당 한 번 실행되므로 이러한 세부 정보를 사용하여 각 개별 항목에 대한 각 전환을 사용자 지정할 수 있습니다.

ViewTransition 첨부 속성은 전환이 적용되는 항목과 관련된 다음 속성을 제공합니다:

• ViewTransition.item - 전환 중인 항목
• ViewTransition.index - 이 항목의 인덱스
• ViewTransition.destination - 관련 보기 작업을 위해 이 항목이 이동하는 (x,y) 지점입니다.

또한 뷰 트랜지션은 전환을 트리거한 작업의 대상인 항목에 특정한 속성을 제공합니다:

• ViewTransition.targetIndexes - 대상 항목의 인덱스
• ViewTransition.targetItems - 대상 항목 자체

( Row, Column, Grid 및 Flow 포지셔너 유형의 경우, move 전환은 포지셔너에 항목을 추가하여 전환이 트리거될 때 이 두 가지 추가 세부 정보만 제공합니다).

뷰 전환은 위에 나열된 속성을 참조하지 않고도 작성할 수 있습니다. 이러한 속성은 뷰 전환을 사용자 지정하는 데 유용한 추가 세부 정보를 제공할 뿐입니다.

다음은 뷰 트랜지션에 대한 소개와 뷰 트랜지션 첨부 속성을 사용하여 뷰 트랜지션을 보강하는 방법에 대한 소개입니다.

뷰 전환: 간단한 예제

다음은 뷰 전환을 사용하는 기본적인 예입니다. 아래 뷰는 뷰에 항목이 추가될 때 실행되는 add 및 displaced 속성에 대한 전환을 지정합니다:

ListView {
    width: 240; height: 320
    model: ListModel {}

    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "lightsteelblue"
        Text {
            anchors.centerIn: parent
            text: name
        }
    }

    add: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
    }

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
    }

    focus: true
    Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count })
}

스페이스 키를 누른 상태에서 모델에 항목을 추가하면 새 항목이 뷰에 추가되면서 400밀리초 이상 페이드 인되고 배율이 증가합니다. 또한 새 항목이 추가되어 위치가 변경된 모든 항목은 displaced 전환에 지정된 대로 400밀리초에 걸쳐 뷰의 새 위치로 애니메이션이 적용됩니다.

인덱스 0에 5개의 항목이 연속적으로 삽입된 경우 효과는 다음과 같습니다:

위의 NumberAnimation 개체는 해당 항목에 애니메이션을 적용하기 위해 target 을 지정할 필요가 없습니다. 또한 addTransition 의 NumberAnimation 는 항목을 뷰의 올바른 위치로 이동하기 위해 to 값을 지정할 필요가 없습니다. 이러한 속성이 명시적으로 정의되지 않은 경우 뷰에서 target 및 to 값을 올바른 항목 및 최종 항목 위치 값으로 암시적으로 설정하기 때문입니다.

가장 간단하게, 뷰 전환은 위의 displaced 전환처럼 뷰 작업 후 새 위치로 항목을 애니메이션하거나 위의 add 전환처럼 일부 항목 속성에 애니메이션을 적용할 수 있습니다. 또한 뷰 트랜지션은 뷰 트랜지션 첨부 속성을 사용하여 다양한 항목에 대한 애니메이션 동작을 사용자 지정할 수 있습니다. 다음은 이를 수행하는 방법에 대한 몇 가지 예입니다.

뷰 트랜지션 첨부 속성 사용

앞서 설명한 바와 같이, 다양한 뷰 트랜지션 프로퍼티는 전환되는 개별 항목과 전환을 트리거한 작업에 대한 세부 정보를 제공합니다. 위의 애니메이션에서는 인덱스 0에서 5개의 항목이 연속적으로 삽입됩니다. 다섯 번째이자 마지막 삽입인 '항목 4'가 뷰에 추가되면 add 전환이 한 번(삽입된 항목에 대해) 실행되고 displaced 전환이 네 번(뷰의 기존 항목 4개에 대해 각각 한 번씩) 실행됩니다.

이 시점에서 가장 아래쪽에 배치된 항목("Item 0")에 대해 실행된 displaced 전환을 살펴보면 이 전환에 제공되는 ViewTransition 속성 값은 다음과 같습니다:

targetIndexes 및 ViewTransition.targetItems 목록은 관련 작업의 대상이 되는 모든 델리게이트 인스턴스의 항목과 인덱스를 제공합니다. 추가 작업의 경우 뷰에 추가되는 모든 항목이, 제거 작업의 경우 뷰에서 제거되는 모든 항목이 이 목록에 포함됩니다. (이러한 목록에는 뷰 내에서 만들어진 항목 또는 캐시된 항목에 대한 참조만 포함되며, 뷰의 표시 영역이나 항목 캐시 내에 있지 않은 대상은 액세스할 수 없습니다.) 참고.

따라서 실행되는 각 개별 전환마다 ViewTransition.item, ViewTransition.index 및 ViewTransition.destination 값이 다르지만 특정 추가 작업에 의해 트리거되는 모든 add 및 displaced 전환에 대해 ViewTransition.targetIndexes 및 ViewTransition.targetItems 값은 동일합니다.

인덱스에 따라 애니메이션 지연

각 뷰 전환은 전환의 영향을 받는 각 항목에 대해 한 번씩 실행되므로 전환 내에서 ViewTransition 속성을 사용하여 각 항목의 전환에 대한 사용자 지정 동작을 정의할 수 있습니다. 예를 들어, 이전 예제의 ListView 에서는 이 정보를 사용하여 이동된 항목의 이동에 리플형 효과를 만들 수 있습니다.

이는 displaced 전환을 수정하여 해당 인덱스(ViewTransition.index에서 제공)와 첫 번째 제거된 인덱스(ViewTransition에서 제공)의 차이에 따라 각 이동된 항목의 애니메이션을 지연시키도록 하면 됩니다.targetIndexes)를 수정하여 달성할 수 있습니다:

    displaced: Transition {
        id: dispTrans
        SequentialAnimation {
            PauseAnimation {
                duration: (dispTrans.ViewTransition.index -
                        dispTrans.ViewTransition.targetIndexes[0]) * 100
            }
            NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
        }
    }

이동된 각 항목은 애니메이션이 추가로 100밀리초씩 지연되어 다음과 같이 항목이 추가에 의해 이동될 때 미묘한 물결 모양의 효과를 냅니다:

중간 위치로 아이템 애니메이션 적용

ViewTransition.item 속성은 전환이 적용되고 있는 항목에 대한 참조를 제공합니다. 이 속성을 사용하여 항목의 속성, 사용자 지정 property 값 등에 액세스할 수 있습니다.

아래는 이전 예제의 displaced 전환을 수정한 것입니다. 이 예제에서는 전환이 시작될 때 각 항목의 x 및 y 값에 액세스하기 위해 ViewTransition.item을 참조하는 중첩된 NumberAnimation 객체가 있는 ParallelAnimation 을 추가합니다. 이렇게 하면 각 항목이 뷰의 최종 위치로 애니메이션되기 전에 전환 시작점을 기준으로 중간 위치로 애니메이션할 수 있습니다:

    displaced: Transition {
        id: dispTrans
        SequentialAnimation {
            PauseAnimation {
                duration: (dispTrans.ViewTransition.index -
                        dispTrans.ViewTransition.targetIndexes[0]) * 100
            }
            ParallelAnimation {
                NumberAnimation {
                    property: "x"; to: dispTrans.ViewTransition.item.x + 20
                    easing.type: Easing.OutQuad
                }
                NumberAnimation {
                    property: "y"; to: dispTrans.ViewTransition.item.y + 50
                    easing.type: Easing.OutQuad
                }
            }
            NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutBounce }
        }
    }

이제 이동된 항목은 먼저 시작 위치를 기준으로 (20, 50)의 위치로 이동한 다음 뷰의 최종 올바른 위치로 이동합니다:

최종 NumberAnimation 에는 to 값이 지정되어 있지 않으므로 뷰에서 이 값을 뷰에서 항목의 최종 위치로 암시적으로 설정하므로 이 마지막 애니메이션은 이 항목을 올바른 위치로 이동합니다. 전환에 일부 계산을 위해 항목의 최종 위치가 필요한 경우 ViewTransition.destination을 통해 액세스할 수 있습니다.

여러 개의 숫자 애니메이션을 사용하는 대신 PathAnimation 을 사용하여 곡선 경로를 따라 항목에 애니메이션을 적용할 수 있습니다. 예를 들어, 이전 예제의 add 전환을 다음과 같이 PathAnimation 으로 보강하여 경로를 따라 새로 추가된 항목에 애니메이션을 적용할 수 있습니다:

    add: Transition {
        id: addTrans
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }

        PathAnimation {
            duration: 1000
            path: Path {
                startX: addTrans.ViewTransition.destination.x + 200
                startY: addTrans.ViewTransition.destination.y + 200
                PathCurve { relativeX: -100; relativeY: -50 }
                PathCurve { relativeX: 50; relativeY: -150 }
                PathCurve {
                    x: addTrans.ViewTransition.destination.x
                    y: addTrans.ViewTransition.destination.y
                }
            }
        }
    }

이렇게 하면 경로를 따라 새로 추가된 항목에 애니메이션이 적용됩니다. 각 경로는 각 항목의 최종 목적지 지점을 기준으로 지정되므로 다른 인덱스에 삽입된 항목은 다른 위치에서 경로를 시작한다는 점에 유의하세요:

중단된 애니메이션 처리하기

원래 전환이 진행 중일 때 다른 보기 전환을 적용해야 하는 경우 언제든지 보기 전환이 중단될 수 있습니다. 예를 들어, 항목 A가 인덱스 0에 삽입되어 '추가' 전환을 거친 다음, 항목 A의 전환이 완료되기 전에 항목 B가 인덱스 0에 연속적으로 삽입된다고 가정해 보겠습니다. 항목 B는 항목 A보다 먼저 삽입되므로 항목 A를 대체하여 뷰가 항목 A의 "추가" 전환을 중간에 중단하고 대신 항목 A에서 "대체" 전환을 시작합니다.

단순히 항목이 최종 목적지까지 이동하는 단순한 애니메이션의 경우 이러한 중단을 추가로 고려할 필요는 없습니다. 그러나 전환이 다른 속성을 변경하는 경우 이 중단으로 인해 원치 않는 부작용이 발생할 수 있습니다. 편의를 위해 아래에서 반복되는 이 페이지의 첫 번째 예를 생각해 보세요:

ListView {
    width: 240; height: 320
    model: ListModel {}

    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "lightsteelblue"
        Text {
            anchors.centerIn: parent
            text: name
        }
    }

    add: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
        NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
    }

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
    }

    focus: true
    Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count })
}

이전 전환이 완료될 때까지 기다리지 않고 여러 항목을 연속적으로 빠르게 추가하는 경우 다음과 같은 결과가 발생합니다:

새로 추가된 각 항목은 add 전환을 거치지만 전환이 완료되기 전에 다른 항목이 추가되어 이전에 추가된 항목이 대체됩니다. 이 때문에 이전에 추가된 항목의 add 전환이 중단되고 대신 해당 항목에서 displaced 전환이 시작됩니다. 중단으로 인해 opacity 및 scale 애니메이션이 완료되지 않아 불투명도와 배율이 1.0 미만인 항목이 생성됩니다.

이 문제를 해결하려면 displaced 전환에서 항목 속성이 add 전환에 지정된 끝 값으로 설정되어 있는지 추가로 확인하여 항목이 이동될 때마다 해당 값을 효과적으로 재설정해야 합니다. 이 경우 항목 불투명도와 배율을 1.0으로 설정해야 합니다:

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }

        // ensure opacity and scale values return to 1.0
        NumberAnimation { property: "opacity"; to: 1.0 }
        NumberAnimation { property: "scale"; to: 1.0 }
    }

이제 항목의 add 전환이 중단되면 항목의 불투명도와 배율이 이동 시 1.0으로 애니메이션되어 이전의 잘못된 시각 효과를 피할 수 있습니다:

보기 전환의 모든 조합에도 동일한 원칙이 적용됩니다. 추가된 항목이 추가 전환이 완료되기 전에 이동되거나 이동된 항목이 이동 전환이 완료되기 전에 제거될 수 있으므로 모든 전환은 동일한 속성 집합을 처리해야 한다는 것이 경험 법칙입니다.

스크립트 액션 관련 제한 사항

뷰 전환이 초기화되면 전환을 준비하기 위해 뷰 전환에 연결된 속성을 참조하는 모든 속성 바인딩이 평가됩니다. 뷰 전환의 내부 구조의 특성으로 인해 뷰 전환 첨부 속성의 속성은 전환이 초기화될 때만 관련 항목에 유효하며 전환이 실제로 실행될 때는 유효하지 않을 수 있습니다.

따라서 뷰 전환 내의 ScriptAction 은 ScriptAction 이 실제로 호출될 때 예상되는 값을 참조하지 않을 수 있으므로 ViewTransition 첨부 속성을 참조해서는 안 됩니다. 다음 예제를 살펴보겠습니다:

ListView {
    width: 240; height: 320
    model: ListModel {
        Component.onCompleted: {
            for (var i=0; i<8; i++)
                append({"name": i})
        }
    }

    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "lightsteelblue"
        Text {
            anchors.centerIn: parent
            text: name
        }
        objectName: name
    }

    move: Transition {
        id: moveTrans
        SequentialAnimation {
            ColorAnimation { property: "color"; to: "yellow"; duration: 400 }
            NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.OutBack }
            ScriptAction { script: moveTrans.ViewTransition.item.color = "lightsteelblue" }
        }
    }

    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
    }

    focus: true
    Keys.onSpacePressed: model.move(5, 1, 3)
}

스페이스 키를 누르면 세 개의 항목이 인덱스 5에서 인덱스 1로 이동합니다. 이동된 각 항목에 대해 moveTransition 시퀀스는 항목의 색상을 "노란색"으로 애니메이션한 다음 최종 위치로 애니메이션한 다음 ScriptAction 을 사용하여 항목 색상을 "lightsteelblue"로 다시 변경합니다. 그러나 실행하면 전환이 의도한 결과를 생성하지 않습니다:

마지막으로 이동한 항목만 "lightsteelblue" 색상으로 반환되고 다른 항목은 노란색으로 유지됩니다. 이는 트랜지션이 이미 초기화된 후에야 ScriptAction 이 실행되기 때문이며, 이때 ViewTransition.item 값이 다른 항목을 참조하도록 변경되어 스크립트가 참조하려고 했던 항목은 ScriptAction 이 실제로 호출될 때 ViewTransition.item이 보유한 항목이 아닙니다.

이 경우 이 문제를 방지하려면 뷰에서 대신 PropertyAction 을 사용하여 속성을 설정할 수 있습니다:

    move: Transition {
        id: moveTrans
        SequentialAnimation {
            ColorAnimation { property: "color"; to: "yellow"; duration: 400 }
            NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.OutBack }
            //ScriptAction { script: moveTrans.ViewTransition.item.color = "lightsteelblue" } BAD!

            PropertyAction { property: "color"; value: "lightsteelblue" }
        }
    }

트랜지션이 초기화되면 PropertyAction target 이 트랜지션에 대한 각 ViewTransition.item으로 설정되고 나중에 예상대로 올바른 항목 대상으로 실행됩니다.

첨부된 속성 문서