0

受 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; } }
}
4

1 回答 1

2

不，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 */
    }
    /* ... */
}

这样，您还必须只定义一次动画。

于 2012-11-21T19:00:54.313 回答