Getting into PathView delegate - qt

Question

I am trying to animate a property within my PathView delegate once it comes into view.
Component {
id: pathViewDelegate
Item {
Text {
id: tempText
color: "red"
text: "test"
}
function intoView() {
myAnimation.start()
}
SequentialAnimation {
id: myAnimation
PropertyAnimation {duration: 1000; target: tempText; properties: "color"; to: "green"}
PropertyAnimation {duration: 1000; target: tempText; properties: "color"; to: "yellow"}
}
}
}
The only way I know how to display my PathView correctly (like a linear carousel) is to have the currentItem clipped off screen. In other words, the displayed item is always currentIndex+1 in my PathView.
PathView {
id: mainCarousel
width: parent.width
height: parent.height
interactive: false
highlightMoveDuration: 300
clip: true
model: pathViewModel
delegate: pathViewDelegate
path: Path {
startX: -mainCarousel.width*0.5
startY: mainCarousel.height/2
PathLine { x: mainCarousel.width*0.5; y: mainCarousel.height/2 }
PathLine { x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 }
}
}
}
So, when I try to implement a function with "mainCarousel.currentItem.intoView()", it animates the item clipped off screen. I know there isn't a way to do "currentItem+1", but is there some other workaround?
EDIT: Full example code
ListModel {
id: pathViewModel
ListElement {header: "text 1"}
ListElement {header: "text 2"}
ListElement {header: "text 3"}
ListElement {header: "text 4"}
}
Component {
id: pathViewDelegate
Item {
width: mainCarousel.width
height: mainCarousel.height
Text {
color: "red"
text: header
}
function runAnimation() {
myAnimation.start()
}
SequentialAnimation {
id: myAnimation
PropertyAnimation {property: "color"; to: "green"; duration: 1000}
PropertyAnimation {property: "color"; to: "yellow"; duration: 1000}
PropertyAnimation {property: "color"; to: "purple"; duration: 1000}
}
}
}
PathView {
id: mainCarousel
width: 500
height: 500
interactive: false
highlightMoveDuration: 300
clip: true
model: pathViewModel
delegate: pathViewDelegate
path: Path {
startX: -mainCarousel.width*0.5
startY: mainCarousel.height/2
PathLine { x: mainCarousel.width*0.5; y: mainCarousel.height/2 }
PathLine { x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 }
}
}
MouseArea {
id: telltaleMouseArea
anchors.fill: mainCarousel
onClicked: {
mainCarousel.incrementCurrentIndex()
mainCarousel.currentItem.runAnimation()
}
}
The initial item displayed is "text 2". The currentItem is "text 1", initially. In the code, when the MouseArea is clicked, "text 2" animates, but it is off screen. I am just trying to animate the item that is in view, when it becomes into view.

Answer 1

Change the animation to the following:
Text {
color: "red"
text: header
SequentialAnimation on color{
id: myAnimation
ColorAnimation {
to: "green"
duration: 1000
}
ColorAnimation {
to: "yellow"
duration: 1000
}
ColorAnimation {
to: "purple"
duration: 1000
}
}
}
and make sure your currentItem is in view with : startX: mainCarousel.width*0.5