0

Inspired a bit by Windows 8 "Modern UI" applications, I would like to apply an animation to all QML elements in a page when the page loads. This way each individual element on the page animates when it appears.

I can't seem to find anything in the QML documentation that would help. In XAML, I could accomplish this with:

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

Is there a QML equivalent?

I've figured out how to do this for a single element, but I would like an easy way to apply the animation to every element of some parent like in the XAML example above. Here's my single-element implementation:

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

そうすれば、アニメーションを1回だけ定義する必要もあります。

于 2012-11-21T19:00:54.313 に答える