[Phil]

Hi. In my code I’m creating a large number of items using a Repeater element. I want each item to appear sequentially with an appear animation, eg a fade in, slide in, etc. I’ve included my code below for the case without the animation. Now I’m not sure how to include the animation. I’ve tried repeater.itemAt(i).animation.start() but it doesn’t work. Thanks, Phil

 

    Grid {
        id: grid
        anchors.centerIn: parent
        columns: 8
        rows: 12
        Repeater {
            id: repeater
            model: 8*12
            Rectangle{
                id: rectangle
                width: parent.parent.width / 8
                height: parent.parent.height / 12
                color: "black"
                opacity: 0
                NumberAnimation{
                    id: animation
                    target: parent
                    properties: "opacity"
                    from: 0
                    to: 1
                }
            }
        }
    }

    Timer{
        id: gridTimer
        repeat: true
        running: true
        interval: 10
        onTriggered: {
            if(time<8*12){
               gridRepeater(time)
            }
            time++
        }
    }

    function gridRepeater(i){
        repeater.itemAt(i).opacity = 1
    }

 

 

[AlexFelgo Team]

Hi Phil,

if you want to use repeater.itemAt(i).animation.start(), then you need to make sure that the animation is a property of the item you are accessing, you can do this by adding property alias animation: animation to the rectangle. (because else the animation component is just a private internal component of the rectangle and is not accessible from outside)

Another solution would be using a Behavior on the opacity property of the rectangle, then simply setting the opacity to 1 (like you do now) will also result in a fade.

Cheers,
Alex

[Phil]

Thanks, Alex. The first method works if I change the target in the NumberAnimation from parent to rectangle. The second method works well also.