Results 1 to 1 of 1

Thread: how to animate matrix element change

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Dec 2013
    Posts
    1
    Thanked 1 Time in 1 Post

    Default how to animate matrix element change

    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?

    Qt Code:
    1. import QtQuick 2.1
    2. import QtQuick.Window 2.1
    3. import QtQuick.Controls 1.1
    4. import QtQuick.XmlListModel 2.0
    5.  
    6. Window {
    7.  
    8. width: 538
    9. height: 360
    10.  
    11. ToolBar{
    12. id:toolbar
    13. Row{
    14. ToolButton{
    15. text: "hit"
    16. onClicked:{
    17. //I want to randomly select a cell, and flash it like we animate a selected row
    18. }
    19. }
    20. }
    21. }
    22.  
    23. ListModel {//each item provides data for a row
    24. id: largeModel
    25. Component.onCompleted: {
    26. for (var i=0 ; i< 4 ; ++i)
    27. largeModel.append({"col1":0 , "col2": 0, "col3":0, "col4": 0, "col5":0, "col6": 0, "col7":0})
    28. }
    29. }
    30.  
    31. TableView {
    32. model: largeModel
    33. anchors.top: toolbar.bottom
    34. anchors.margins: 12
    35. anchors.left:parent.left
    36. anchors.right:parent.right
    37. anchors.bottom:parent.bottom
    38. frameVisible: true
    39. headerVisible: true
    40. alternatingRowColors: true
    41.  
    42. TableViewColumn {
    43. role: "col1"
    44. title: "1"
    45. width: 120
    46. horizontalAlignment: Text.AlignHCenter
    47. }
    48. TableViewColumn {
    49. role: "col2"
    50. title: "2"
    51. width: 120
    52. horizontalAlignment: Text.AlignHCenter
    53. }
    54. TableViewColumn {
    55. role: "col3"
    56. title: "3"
    57. width: 120
    58. horizontalAlignment: Text.AlignHCenter
    59. }
    60. TableViewColumn {
    61. role: "col4"
    62. title: "4"
    63. width: 120
    64. horizontalAlignment: Text.AlignHCenter
    65. }
    66. TableViewColumn {
    67. role: "col5"
    68. title: "5"
    69. width: 120
    70. horizontalAlignment: Text.AlignHCenter
    71. }
    72. TableViewColumn {
    73. role: "col6"
    74. title: "6"
    75. width: 120
    76. horizontalAlignment: Text.AlignHCenter
    77. }
    78. TableViewColumn {
    79. role: "col7"
    80. title: "7"
    81. width: 120
    82. horizontalAlignment: Text.AlignHCenter
    83. }
    84.  
    85.  
    86. headerDelegate: BorderImage{
    87. source: "images/header.png" //in examples/quick/controls/tableview/images
    88. border{left:2;right:2;top:2;bottom:2}
    89. Text {//this is how to add text on top of image, will be "name", "age", "gender"
    90. text: styleData.value
    91. anchors.centerIn:parent
    92. color:"#333"
    93. }
    94. }
    95.  
    96. rowDelegate: Rectangle {
    97. height: (styleData.selected) ? 30 : 20
    98. Behavior on height{ NumberAnimation{} }
    99.  
    100. color: styleData.selected ? "#448" : (styleData.alternate? "#eee" : "#fff")
    101. BorderImage{
    102. id: selected
    103. anchors.fill: parent
    104. source: "images/selectedrow.png" //in examples/quick/controls/tableview/images
    105. visible: styleData.selected
    106. border{left:2; right:2; top:2; bottom:2}
    107. SequentialAnimation {
    108. running: true; loops: Animation.Infinite
    109. NumberAnimation { target:selected; property: "opacity"; easing.type: Easing.InCubic; to: 1.0; duration: 1900}
    110. NumberAnimation { target:selected; property: "opacity"; to: 0.5; duration: 900}
    111. }
    112. }
    113. }
    114.  
    115.  
    116. itemDelegate: Text {
    117. width: parent.width
    118. anchors.margins: 4
    119. anchors.centerIn: parent
    120. elide: styleData.elideMode
    121. text: styleData.value
    122. color: styleData.textColor
    123. }
    124. }
    125. }
    To copy to clipboard, switch view to plain text mode 

  2. The following user says thank you to MichaelChen for this useful post:


Similar Threads

  1. how to change the html element aftter loading
    By lypkiller in forum Qt Programming
    Replies: 0
    Last Post: 26th July 2013, 10:17
  2. Replies: 3
    Last Post: 22nd July 2011, 15:48
  3. Can't change form element names after copying them
    By Computer Hater in forum Qt Tools
    Replies: 0
    Last Post: 8th July 2011, 04:24
  4. Change a QList element
    By mcrahr in forum Newbie
    Replies: 1
    Last Post: 23rd August 2009, 12:16
  5. Change shape of window / animate window
    By sabeesh in forum Qt Programming
    Replies: 3
    Last Post: 31st October 2007, 09:16

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.