父母的中心位置的y位置動畫

Question

我有一個Column三個元素，如果用戶點擊空格鍵，其中一個元素可以更改其可見性。爲了使可見性改變一下我順利可以添加move過渡：

ApplicationWindow { 
    title: qsTr("Hello World") 
    width: 640 
    height: 480 
    visible: true 

    Column { 
     spacing: 2 

     Rectangle { color: "red"; width: 50; height: 50 } 
     Rectangle { id: greenRect; color: "green"; width: 20; height: 50 } 
     Rectangle { color: "blue"; width: 50; height: 20 } 

     move: Transition { 
      NumberAnimation { properties: "x,y"; duration: 1000 } 
     } 

     focus: true 
     Keys.onSpacePressed: greenRect.visible = !greenRect.visible 
    } 
} 

這工作。但是，如果我將Column置於其母公司中，則可見性更改也會導致Column的新的height，因此也會導致新的y的位置。

現在我不想Column'跳'到新的位置，但也順利移動。因此，我已將此添加到Column：

anchors.centerIn: parent 
    Behavior on y { 
     NumberAnimation { duration: 1000 } 
    } 

但y位置變化仍然沒有動畫。如何實現這一目標？

Answer 1

由anchors誘發的屬性變化似乎不會觸發Behaviour s。

作爲一種變通方法，手動居中Column：

import QtQuick 2.2 

Rectangle { 
    width: 640 
    height: 480 

    Column { 
     spacing: 2 
     anchors.horizontalCenter: parent.horizontalCenter 
     y: (parent.height - height)/2 

     Behavior on y { 
      NumberAnimation { duration: 1000 } 
     } 

     Rectangle { color: "red"; width: 50; height: 50 } 
     Rectangle { id: greenRect; color: "green"; width: 20; height: 50 } 
     Rectangle { color: "blue"; width: 50; height: 20 } 

     move: Transition { 
      NumberAnimation { properties: "x,y"; duration: 1000 } 
     } 

     focus: true 
     Keys.onSpacePressed: greenRect.visible = !greenRect.visible 
    } 
} 

Answer 2

我增加了另一個Item元素，其中包含Column。這使您可以設置項目的height財產Behavior，是你在找什麼：

import QtQuick 2.4 
import QtQuick.Controls 1.3 

ApplicationWindow { 
    width: 640 
    height: 480 
    visible: true 

    Item { 
     id: container 
     width: col.width 
     height: col.height 
     anchors.centerIn: parent 
     property int animationDuration: 200 

     Behavior on height { 
      PropertyAnimation { 
       duration: container.animationDuration 
      } 
     } 

     Column { 
      id: col 
      spacing: 2 
      focus: true 

      Rectangle { color: "red"; width: 50; height: 50 } 
      Rectangle { id: greenRect; color: "green"; width: 20; height: 50 } 
      Rectangle { color: "blue"; width: 50; height: 20 } 

      move: Transition { 
       NumberAnimation { properties: "x,y"; duration: container.animationDuration } 
      } 

      Keys.onSpacePressed: greenRect.visible = !greenRect.visible 
     } 
    } 
} 

希望這有助於！