Animation on Opacity for children of Repeater .



  • Hi,
    How to run animation on children of a Repeater .

    import QtQuick 2.5
    import QtQuick.Window 2.0

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row {
        anchors.centerIn: parent
        spacing: 10
        Repeater {
            id : rep
            model: 5
            Rectangle {
                width: 40; height: 40
                border.width: 1
                color: "blue"
    

    // Behavior on opacity { PropertyAnimation { duration: 500 }} // WORKS GOOD
    }
    }
    }

    // Component.onCompleted: rep.itemAt(0).opacity = 0 // WORKS GOOD

    SequentialAnimation {
        id: anim
        loops: 4
    
        PropertyAnimation {
            target: rep.itemAt(1)
            property: "opacity"
            from: 0; to: 1
            duration: 3000 / 2
        }
        PropertyAnimation {
            target: rep.itemAt(1)
            property: "opacity"
            from: 1; to: 0
            duration: 3000 / 2
        }
    }
    
    
    MouseArea{
        anchors.fill: parent
        onClicked: {
            console.log("---")
            anim.start()
        }
    }
    

    }



  • Hmmm personally I've always put this sort of behaviour in the repeated item rather than try and impose it from outside (probably just because I've found things less painful that way). ie put the SequentialAnimation in the Rectangle you're Repeater-ing, then you can trigger it from outside with something like onClicked: rep.itemAt(1).anim.start().



  • Something like this may be,

    property variant array
    Column
    {
        Repeater{
            id: _repeater
            model: 4
    
            Rectangle {
                width: 100; height: 40
                border.width: 1
                color: "blue"
            }
            Component.onCompleted: {
                var i = 0
                var t = new Array (0)
                while( i < count)
                {
                    t.push(_repeater.itemAt(i))
                    i++
                }
                array = t
            }
        }
    }
    SequentialAnimation{
        id: _seqAnim
    
        onRunningChanged: {
            console.log(" _repeater.itemAt(0) +++++++++++ " +  _repeater.itemAt(0).width)
            console.log(" array[0] +++++++++++ " +  array[0].width)
    

    // _repeater.itemAt(0).height = 200
    // _repeater.itemAt(0).color = "yellow"
    }

        PropertyAnimation{
            target: array[2]
            property: "width"
            to: 400
            duration: 5000
            onRunningChanged: {
                console.log("Property changed")
            }
        }
    
        PropertyAnimation{
            target: array[2]
            property: "color"
            to: "yellow"
            duration: 5000
            onRunningChanged: {
                console.log("Property changed")
            }
        }
    }
    
    Timer{
        interval: 5000
        running: true
        repeat: true
        onTriggered: {
            _seqAnim.start()
            console.log("Timer triggered")
        }
    }


  • Er, that's not really what I was thinking.... does it work? It's just I've always had an aversion to any sort of non-trivial expression in target: properties, but I might picked up that habit from older Qt/QML versions.... maybe it works better now.

    For example, instead of trying to write

    Repeater {
      model: 10
      Item {}
    }
    Animation {
      target: <logic to try and pick n-th child item of the Repeater>
    }
    

    my instinct is to write:

    Repeater {
      model: 10
      Item {
        Animation {}
      }
    }
    <logic to invoke start() on Animation of n-th item of Repeater>
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.