Sequential animations on each listitem

[rama.kesi]

I'm using Qt 5 Beta, QtQuick 2 and want to define Transitions when listview is loaded with different x,y positions

of each listview.( the animation should be like each item should fall with contentY and settle in different x,y positions)


The delegate of the ListView contains a text and I want to change the highlight while changing to the next ListItem using key press.


Is this possible?

Like below:

I'm trying to arrange list items in the form of arc as shown below and want to scale each element with an OutQuad animation, and highlight each element on key down event with a background image with a background image which moves forward and backword on key down and up respectively.



ListItem1



ListItem2 ---> highlighted on key down pressed it should also conatain a highlight image



ListItem3



ListItem4



ListItem5

[wyjyan]

This is doable, but required clarity on the problem.

[sonulohani]

I think you have to try for the PathView.

[rama.kesi]

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

}



}