动画 qml 中的边距变化

Question

我正在尝试使用 QML 中的动画为边距值变化设置动画，但我做不到。动画不工作

这是我的状态

State {
    name: "up"
    PropertyChanges {
        target: drag_line
        anchors.topMargin: 50
    }

在转换过程中我尝试了

transitions: [

    Transition {
        to: "up"
        NumberAnimation {  properties: "margin" ;easing.type: Easing.InOutQuad;duration: 300 }
    }

]

我也试过数字动画，但还是不行。有什么办法吗，我做错了什么

Answer 1

属性不是margin而是anchors.topMargin

这是我的工作示例：

ApplicationWindow {
  visible: true
  width: 500
  height: 500

  Rectangle {
    width: 100
    height: 100
    anchors.centerIn: parent
    color: "red"

    Rectangle {
      id: iRect
      color: "blue"
      width: 40
      height: 40
      anchors.top: parent.top

      states: [State {
        name: "up"
        when: iMouseArea.pressed
        PropertyChanges {
          target: iRect
          anchors.topMargin: 50
        }
      }]

      transitions: [
        Transition {
          to: "up"
          NumberAnimation { properties:"anchors.topMargin"; easing.type: Easing.InOutQuad;duration: 300 }        
        }
      ]
    }

    MouseArea{
      id: iMouseArea
      anchors.fill: parent
    }
  }
}

动画 qml 中的边距变化

Animating margin changes in qml

qt

state

transition

qml