Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to animate a subset of items instantiated by Repeater one after another?
QtWS25 Last Chance

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

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
timeranimationssequencerepeateritem delegate
3 Posts 3 Posters 784 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    diredko
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #2

      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.

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0
      • GrecKoG Offline
        GrecKoG Offline
        GrecKo
        Qt Champions 2018
        wrote on last edited by
        #3

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

        1 Reply Last reply
        1

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved