How to animate a subset of items instantiated by Repeater one after another?

diredko

Hi All,

Is there a standard QML component using which several items created in Repeater can be animated one after the other with some delay (i.e. not simultaneously)?
So far I could only come up with a Timer based solution like below:

import QtQuick 6.3

Item {
    width: 600; height: 400

    Row {
        anchors.fill: parent
        spacing: 5
        Repeater {
            id: _repeater
            anchors.fill: parent
            model: 10
            delegate: Rectangle {
                id: _rect
                width: 50; height: 50
                color: "green"
                function animate() {_anim.start()}
                SequentialAnimation {
                    id: _anim
                    NumberAnimation {target: _rect; property: "height"; from: 50; to: 150}
                    NumberAnimation {target: _rect; property: "height"; from: 150; to: 50}
                }
            }
        }
    }

    Timer {
        id: _timer
        property var indexes
        repeat: true
        interval: 150
        onTriggered: {
            if (indexes.length !== 0) {
                 _repeater.itemAt(indexes.shift()).animate()
            } else
                stop()
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            _timer.indexes = [1, 2, 3, 4]
            _timer.start() 
        }
    }
}

Thanks in advance

fcarney

You could put a Timer in the delegate of the Repeater. This would allow the interval of the Timer to be a function of the index:

interval: index * 150

This might give you more options for overlaying the animations. There is also a duration in the animation itself. So you could play with that as well to overlap animations.

I think your solution is fine as is though.

GrecKo

Use a SequentialAnimation and put a PauseAnimation in it first, with a duration depending on the index of the delegate.