How to make a fade in animation for each item in GridView using QML

Question

I am trying to make a fade in animation everytime the model of the gridview changes. I am trying to make use of the example mention in the link:

http://qt-project.org/doc/qt-4.8/qml-gridview.html#delayRemove-prop

But i'm trying to do it on the attached signal onAdd.

Is it possible or is there a workaround i can use??

Below is my code

        GridView{
            id:productGView
            height: 100
            width: 100
            anchors{
                left: parent.left; top: parent.top;
            }
            cellHeight:20;
            cellWidth: 20;
            keyNavigationWraps :true
            delegate: Image{
                id:gridDel
                height: productGView.cellHeight
                width: productGView.cellWidth
                source:(productGView.currentIndex==index)?("item_h.png"):("item_n.png")
                GridView.onAdd: SequentialAnimation {
                    PropertyAction { target: gridDel; property: "GridView.delayRemove"; value: true }
                    NumberAnimation { target: gridDel; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                    PropertyAction { target: gridDel; property: "GridView.delayRemove"; value: false }
                }
                GridView.onRemove: {
                    core.log("Del | onRemove | index = "+index)
                }

                Component.onCompleted: {
                    core.log("Del | onCompleted | index = "+index)
                }
            }
            snapMode: GridView.SnapToRow
            boundsBehavior: Flickable.DragOverBounds
        }

Thanks in advance

Answer 1

When adding an item to the view, it does not need to be guarded against removal, so you can simplify the GridView.onAdd handler by removing both PropertyActions, and then also the SequentialAnimation becomes unnecessary.

In your code, the NumberAnimation animates the scale to 0, making the individual delegates infinitely small as a result. Try this:

delegate: Image {
     ..
     ..
   scale: 0 /* When a delegate is created, scale is initially zero */
   GridView.onAdd: NumberAnimation { 
          target: gridDel
          property: "scale"
          to: 1  /* When the delegate is added to the view, */
                 /* the scale will be animated to 1 */
          duration: 250
          easing.type: Easing.InOutQuad
   }