Question

我有一个带有Rectangle的PathView作为委托。我将PathView.path更改为另一个路径，我想播放将PathView项目移动到新位置的动画。像这样：

PathView {
  id: pathView
  delegate: Rectangle {
    Behavior on x {
      NumberAnimation {
        duration: 5000
      }
    }
  }

  path: path1
}

但它不起作用。有可能以某种方式吗？

Answer 1

不幸的是，将“ PathView.path”更改为另一个“ Path”将破坏并重新创建委托，就像更改模型一样。

可以使用“状态”来解决。您创建多个空白PathLine并根据状态设置其x和y值。您从“过渡”中获得动画

此示例代码最初将在模型中包含3个数据项。在动画之间，它会向模型重新加载5个数据，并且仍可以连续运行，而不会给动画带来任何干扰。

PathView {

    id: pathView
    anchors.fill: parent
    anchors.margins: 100

    model: 3


    path: Path {
        id: pathLines
        PathLine { id: pl1 }
        PathLine { id: pl2 }
        PathLine { id: pl3 }
        PathLine { id: pl4 }
        PathLine { id: pl5 }
    }

    state: 'zigzag'

    states: [
        State {
            name: "zigzag"
            PropertyChanges { target: pathLines; startX: 0; startY: 100; }
            PropertyChanges { target: pl1; x: 200; y: 300; }
            PropertyChanges { target: pl2; x: 500; y: 100; }
            PropertyChanges { target: pl3; x: 600; y: 300; }
            PropertyChanges { target: pl4; x: 800; y: 100; }
            PropertyChanges { target: pl5; x: 1000; y: 300; }
        },
        State {
            name: "close"
            PropertyChanges { target: pathLines; startX: pathView.width/2; startY: pathView.height/2; }
            PropertyChanges { target: pl1; x: pathView.width/2; y: pathView.height/2; }
            PropertyChanges { target: pl2; x: pathView.width/2; y: pathView.height/2; }
            PropertyChanges { target: pl3; x: pathView.width/2; y: pathView.height/2; }
            PropertyChanges { target: pl4; x: pathView.width/2; y: pathView.height/2; }
            PropertyChanges { target: pl5; x: (pathView.width/2) + 1; y: pathView.height/2; } // Note: "+1" to fix disappearance bug
        },
        State {
            name: "open"
            PropertyChanges { target: pathLines; startX: pathView.width/2; startY: pathView.height/4; }
            PropertyChanges { target: pl1; x: pathView.width/2; y: pathView.height/4; }
            PropertyChanges { target: pl2; x: pathView.width/2; y: pathView.height/4; }
            PropertyChanges { target: pl3; x: pathView.width/2; y: pathView.height/4; }
            PropertyChanges { target: pl4; x: pathView.width/2; y: pathView.height/4; }
            PropertyChanges { target: pl5; x: pathView.width/2 + 1; y: pathView.height/4; } // Note: "+1" to fix disappearance bug
        },
        State {
            name: "triangle"
            PropertyChanges { target: pathLines; startX: 200; startY: 500; }
            PropertyChanges { target: pl1; x: 400; y: 700; }
            PropertyChanges { target: pl2; x: 600; y: 500; }
            PropertyChanges { target: pl3; x: 350; y: 500; }
            PropertyChanges { target: pl4; x: 300; y: 500; }
            PropertyChanges { target: pl5; x: 250; y: 500; }
        }

    ]

    transitions: [
       Transition {
            to: 'zigzag'
            SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; onFinished: pathView.state = 'triangle'  }
        },
        Transition {
            to: 'triangle'
            SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; }
        },
        Transition {
            to: 'close'
            SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; }
            onRunningChanged: {
                if (!running) {
                    pathView.model = 5
                    pathView.state = 'open'
                }
            }
        },
        Transition {
            from: "close"
            to: 'open'
            SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; }
            onRunningChanged: !running ? pathView.state = 'triangle' : ''
        }
    ]

    delegate: Rectangle {
        width: 20
        height: 20
        radius: 20
        color: 'green'
    }
}

Controls.Button {
     anchors.bottom: parent.bottom
     anchors.horizontalCenter: parent.horizontalCenter
     text: 'Start Animation'
     onClicked: pathView.state = 'close'
}

“ zigzag”和“ triangle”之类的州名称与实际形状不同，只是出于测试目的而具有某种随机形状。

带有NumberAnimation项的PathView中的QML更改路径

1 个答案: