QML - 如何申請動畫頁面中所有的元素？

Question

啓發位的Windows 8「現代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 */ 
    } 
    /* ... */ 
} 

這樣你也必須定義動畫一次。