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

Posted 2023-02-16

【中文标题】QML 在 PathView 中使用其项目的 NumberAnimation 更改路径

【英文标题】：QML change path in PathView with NumberAnimation of its items

【发布时间】：2018-02-20 18:38:18

【问题描述】：

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

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

  path: path1

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

【问题讨论】：

更好地解释自己。

@eyllanesc 好吧，我有一个 ListModel，我想沿路径放置模型项目，然后我想更改路径，因此项目的位置将被更改，我不想使更改顺利进行。

我想我明白了，建议您在问题中提出此评论，显示描述您想要的图表、图像等也很有用。

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