QML 在 PathView 中使用其项目的 NumberAnimation 更改路径

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”这样的状态名称并不像它的真实形状，只是一些用于测试目的的随机形状。