QML - 페이지의 모든 요소에 애니메이션을 적용하는 방법은 무엇입니까?

Question

Windows 8 "Modern UI"응용 프로그램에서 조금 영감을 얻은 다음 페이지가로드 될 때 페이지의 모든 QML 요소에 애니메이션을 적용하고 싶습니다. 이렇게하면 페이지의 각 요소가 나타납니다.

QML 문서에서 도움이되는 내용을 찾지 못하는 것 같습니다. XAML에서 다음을 통해이 작업을 수행 할 수 있습니다.

<StackPanel Orientation="Vertical" VerticalAlignment="Center"> 
    <StackPanel.ChildrenTransitions> 
     <TransitionCollection> 
      <EntranceThemeTransition FromHorizontalOffset="100"/> 
     </TransitionCollection> 
    </StackPanel.ChildrenTransitions> 
    [...] 
</StackPanel> 

QML에 해당하는 항목이 있습니까?

하나의 요소에 대해이 작업을 수행하는 방법을 알아 냈습니다. 위의 XAML 예와 같이 일부 부모의 모든 요소에 애니메이션을 적용하는 쉬운 방법을 원합니다.

Rectangle { 
    id: foobar 
    opacity: 0.001 
    anchors.centerIn: parent 
    anchors.horizontalCenterOffset: -100 

    Component.onCompleted: { 
     foobar.anchors.horizontalCenterOffset = 0 
     foobar.opacity = 1 
    } 

    Behavior on anchors.horizontalCenterOffset { PropertyAnimation{ duration: 250; easing.type: Easing.OutQuad } } 
    Behavior on opacity { NumberAnimation { property: "opacity"; to: 1; duration: 250; } } 
} 

Answer 1

아니, QML에는 해당 없다 : 여기 내 단일 요소의 구현입니다. 각 하위 요소에 대한 애니메이션을 정의해야합니다.

그러나 원하는 애니메이션 동작을 캡슐화 한 QML 구성 요소를 쉽게 정의하여 각 하위에 사용할 수 있습니다.

/* SlidingRectangle.qml */ 

import QtQuick 1.1 

Rectangle { 
    id: foobar 
    opacity: 0.001 
    anchors.centerIn: parent 
    anchors.horizontalCenterOffset: -100 

    Component.onCompleted: { 
     foobar.anchors.horizontalCenterOffset = 0 
     foobar.opacity = 1 
    } 

    Behavior on anchors.horizontalCenterOffset { PropertyAnimation{ duration: 250; easing.type: Easing.OutQuad } } 
    Behavior on opacity { NumberAnimation { property: "opacity"; to: 1; duration: 250; } } 
} 



/* main.qml */ 

import QtQuick 1.1 

Item { 
    anchors.fill: parent 
    SlidingRectangle { 
     /* child items of first rectangle */ 
    } 
    SlidingRectangle { 
     /* child items of second rectangle */ 
    } 
    /* ... */ 
} 

그런 식으로 애니메이션을 한 번만 정의해야합니다.