Solved 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.0Window {
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>