CODEWITHSUNDEEP
qtqmlqt-quick
Bret Kuhns
Bret Kuhns

Reputation: 4084

QML - How to apply animation to all elements in a page?

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

Upvotes: 1

Views: 2571

Answers (1)

sebasgo
sebasgo

Reputation: 3851

No, there is no equivalent in QML. You will have to define the animation for each child element.

But you could easily define an QML component encapsulating the desired animation behavior and use that for each child.

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

That way you also have to define the animation only once.

Upvotes: 3

Related Questions