Animation on Opacity for children of Repeater .

Pradeep P N

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()
    }
}

}

timday

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().

Yashpal

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")
    }
}

timday

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>