As I would like to animate each item separately, I tried the below approach and code:-

Mymodel would include item name, x coordinate and y cordinate ((relative to item’s position in the listview) . It would allow you to animate y from 0 to final value (item animated vertically, from the bottom of the item above). Defined the items to be hidden initially, and show them as part of the sequential animation so that each item is visible and animation is run one after other for each list item.



However, all the items are being shown and then animation is run.

Please correct me if am doing anything wrong in the below code snippet.






Item {

id: root

width:640

height:480

focus: true

ListModel {

id: myModel



ListElement {

name: "Media"; posx: 300; posY: 50;

}

ListElement {

name: "Audio"; posx: 250; posY: 100;

}

ListElement {

name: "Video"; posx: 200; posY: 150;

}

ListElement {

name: "Image"; posx: 150; posY: 200;

}

}



Component {

id:myDelegate



Item {

id: delegateItem

widtharent.width

x: posx

y : posY

visible : false



Text {

id: listitem

text: name

font.pointsize: 12

}

Component.OnCompleted {

addAnimation.start()

}

SequentialAnimation {

id: adAnimation

propertyAction { target:delegateItem; property: "visible" ; value : true }

propertyAction { target:delegateItem; property: "y" ; value : 0 }

NumberAnimation { target : delegateItem ; property: "y" ; to : y; duartion : 1000 ;easing.type: Easing.InOutQuad }


}

}



ListView {

id: view

anchors.fill : parent

model:myModel

delegate : myDelegate



highlight { Item {Image { y:0 ; height:40 ; source : "focus.png" }

}



}