how to animate matrix element change

[MichaelChen]

Dear there,

I have problem to animate entries of a matrix. The example "tableview" shows how to animate a row of a matrix. I played around try to modify it for my purpose, and had no success. Anyone can help?

import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.XmlListModel 2.0
 
Window {
 
    width: 538
    height: 360
 
    ToolBar{
        id:toolbar
        Row{
            ToolButton{
                text: "hit"
                onClicked:{
                    //I want to randomly select a cell, and flash it like we animate a selected row
                }
            }
        }
    }
 
    ListModel {//each item provides data for a row
        id: largeModel
        Component.onCompleted: {
            for (var i=0 ; i< 4 ; ++i)
                largeModel.append({"col1":0 , "col2": 0, "col3":0, "col4": 0, "col5":0, "col6": 0, "col7":0})
         }
    }
 
    TableView {
        model: largeModel
        anchors.top: toolbar.bottom
        anchors.margins: 12
        anchors.left:parent.left
        anchors.right:parent.right
        anchors.bottom:parent.bottom
        frameVisible: true
        headerVisible: true
        alternatingRowColors: true
 
        TableViewColumn {
            role: "col1"
            title: "1"
            width: 120
            horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col2"
            title: "2"
            width: 120
           horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col3"
            title: "3"
            width: 120
                  horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col4"
            title: "4"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col5"
            title: "5"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col6"
            title: "6"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col7"
            title: "7"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
 
 
        headerDelegate: BorderImage{
            source: "images/header.png"  //in examples/quick/controls/tableview/images
            border{left:2;right:2;top:2;bottom:2}
            Text {//this is how to add text on top of image, will be "name", "age", "gender"
                text: styleData.value
                anchors.centerIn:parent
                color:"#333"
            }
        }
 
        rowDelegate: Rectangle {
            height: (styleData.selected) ? 30 : 20
            Behavior on height{ NumberAnimation{} }
 
            color: styleData.selected ? "#448" : (styleData.alternate? "#eee" : "#fff")
            BorderImage{
                id: selected
                anchors.fill: parent
                source: "images/selectedrow.png"  //in examples/quick/controls/tableview/images
                visible: styleData.selected
                border{left:2; right:2; top:2; bottom:2}
                SequentialAnimation {
                    running: true; loops: Animation.Infinite
                    NumberAnimation { target:selected; property: "opacity"; easing.type: Easing.InCubic; to: 1.0; duration: 1900}
                    NumberAnimation { target:selected; property: "opacity"; to: 0.5; duration: 900}
                }
            }
        }
 
 
        itemDelegate:  Text {
            width: parent.width
            anchors.margins: 4
            anchors.centerIn: parent
            elide: styleData.elideMode
            text: styleData.value
            color: styleData.textColor
        }
    }
}

import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.XmlListModel 2.0

Window {

    width: 538
    height: 360

    ToolBar{
        id:toolbar
        Row{
            ToolButton{
                text: "hit"
                onClicked:{
                    //I want to randomly select a cell, and flash it like we animate a selected row
                }
            }
        }
    }

    ListModel {//each item provides data for a row
        id: largeModel
        Component.onCompleted: {
            for (var i=0 ; i< 4 ; ++i)
                largeModel.append({"col1":0 , "col2": 0, "col3":0, "col4": 0, "col5":0, "col6": 0, "col7":0})
         }
    }

    TableView {
        model: largeModel
        anchors.top: toolbar.bottom
        anchors.margins: 12
        anchors.left:parent.left
        anchors.right:parent.right
        anchors.bottom:parent.bottom
        frameVisible: true
        headerVisible: true
        alternatingRowColors: true

        TableViewColumn {
            role: "col1"
            title: "1"
            width: 120
            horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col2"
            title: "2"
            width: 120
           horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col3"
            title: "3"
            width: 120
                  horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col4"
            title: "4"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col5"
            title: "5"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col6"
            title: "6"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }
        TableViewColumn {
            role: "col7"
            title: "7"
            width: 120
                        horizontalAlignment: Text.AlignHCenter
        }


        headerDelegate: BorderImage{
            source: "images/header.png"  //in examples/quick/controls/tableview/images
            border{left:2;right:2;top:2;bottom:2}
            Text {//this is how to add text on top of image, will be "name", "age", "gender"
                text: styleData.value
                anchors.centerIn:parent
                color:"#333"
            }
        }

        rowDelegate: Rectangle {
            height: (styleData.selected) ? 30 : 20
            Behavior on height{ NumberAnimation{} }

            color: styleData.selected ? "#448" : (styleData.alternate? "#eee" : "#fff")
            BorderImage{
                id: selected
                anchors.fill: parent
                source: "images/selectedrow.png"  //in examples/quick/controls/tableview/images
                visible: styleData.selected
                border{left:2; right:2; top:2; bottom:2}
                SequentialAnimation {
                    running: true; loops: Animation.Infinite
                    NumberAnimation { target:selected; property: "opacity"; easing.type: Easing.InCubic; to: 1.0; duration: 1900}
                    NumberAnimation { target:selected; property: "opacity"; to: 0.5; duration: 900}
                }
            }
        }


        itemDelegate:  Text {
            width: parent.width
            anchors.margins: 4
            anchors.centerIn: parent
            elide: styleData.elideMode
            text: styleData.value
            color: styleData.textColor
        }
    }
}

To copy to clipboard, switch view to plain text mode