[Qt-qml] Animate Listview Highlight transition when interactive is false

[martin.jones at nokia.com]

If your menu doesn't have dynamic content and all items are the same height (which seems to be the case), the easiest is to simply animate contentY to the new position.  The attached adds a NumberAnimation for menuList.contentY and sets the contentY using nIndex * ldHeight.

Br,
Martin.

From: ext Vinayakam Murugan [mailto:mvinayakam at gmail.com]
Sent: Wednesday, 2 March 2011 3:05 AM
To: Jones Martin (Nokia-MS-Qt/Brisbane)
Cc: qt-qml at qt.nokia.com
Subject: Re: [Qt-qml] Animate Listview Highlight transition when interactive is false

Any luck, anybody

Warm Regards
~~~~~~~~~~~~~~~
Vinayak

http://www.flickr.com/photos/rightplacerighttime/

On Mon, Feb 28, 2011 at 10:55 AM, Vinayakam Murugan <mvinayakam at gmail.com<mailto:mvinayakam at gmail.com>> wrote:
Hello Martin

Please find attached  a zip file with a standalone example.

The target is to have a scroll like animation when down arrow is pressed.

Warm Regards
~~~~~~~~~~~~~~~
Vinayak

http://www.flickr.com/photos/rightplacerighttime/

On Mon, Feb 28, 2011 at 10:46 AM, <martin.jones at nokia.com<mailto:martin.jones at nokia.com>> wrote:
Hi Vinayak,

Are you able to provide a stand-alone example that we can run in qmlviewer?

Br,
Martin.

From: qt-qml-bounces+martin.jones=nokia.com<http://nokia.com>@qt.nokia.com<http://qt.nokia.com> [mailto:qt-qml-bounces+martin.jones<mailto:qt-qml-bounces%2Bmartin.jones>=nokia.com<http://nokia.com>@qt.nokia.com<http://qt.nokia.com>] On Behalf Of ext Vinayakam Murugan
Sent: Saturday, 26 February 2011 2:54 AM
To: qt-qml at qt.nokia.com<mailto:qt-qml at qt.nokia.com>
Subject: Re: [Qt-qml] Animate Listview Highlight transition when interactive is false

On further analysis, it seems that list.positionViewAtIndex that I am using to refresh the content is the culprit. Is there any way I can animate this transition

Warm Regards
~~~~~~~~~~~~~~~
Vinayak

http://www.flickr.com/photos/rightplacerighttime/
On Fri, Feb 25, 2011 at 4:58 PM, Vinayakam Murugan <mvinayakam at gmail.com<mailto:mvinayakam at gmail.com>> wrote:
Hello

I have a requirement to manage the navigation within the listview. Also I want to have a scroll effect when the highlight moves .

A snippet is given below.


ListView {

    id:currentList



    width:parent.width

    height:parent.height





    anchors.top:parent.top

    anchors.bottom:parent.bottom

    highlightMoveDuration:1

    highlightMoveSpeed:500





    interactive:false

    highlightFollowsCurrentItem:true

    highlightRangeMode: ListView.StrictlyEnforceRange

    preferredHighlightBegin:0

    preferredHighlightEnd: parent.height

    smooth:true

    delegate: FocusScope{

        id:currentMenuItem





            Column{

                anchors.fill:parent

                Image {

                    source: Style.imagePath + "category_o.png"

                    anchors{top:parent.top}

                    height:parent.height

                    visible:!currentMenuItem.activeFocus

                }

                Text {

                    id:mmText

                    width:parent.width

                    anchors{top:parent.top; horizontalCenter: parent.horizontalCenter;}                        //x:list.currentItem.x

                    height:parent.height

                    horizontalAlignment:Text.AlignHCenter

                    verticalAlignment:Text.AlignVCenter

                    text: title

                }

                Image {

                    anchors.top:parent.top

                    anchors.topMargin:Style.arrows.rtTopMargin

                    anchors.right:mmText.right

                    anchors.rightMargin:Style.arrows.rtRightMargin

                    source:Style.imagePath + "arrow_right.png"

                }

            }

            Keys.onUpPressed:{

                moveUp()

            }

            Keys.onDownPressed:{

                moveDown()

            }

        }

    highlight:catHighlight

    Component

    {

        id:catHighlight





        Image

        {

            source: Style.imagePath + "category_h.png"

            y:currentList.currentItem.y

            Behavior on y {

                SpringAnimation {

                    spring: 3

                    damping: 0.1

                }

            }

        }

    }


Warm Regards
~~~~~~~~~~~~~~~
Vinayak

http://www.flickr.com/photos/rightplacerighttime/



-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110302/ee9d4c31/attachment-0001.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: catMenu.qml
Type: application/octet-stream
Size: 4766 bytes
Desc: catMenu.qml
Url : http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110302/ee9d4c31/attachment-0001.obj