QML Coverflow非常慢

Question

我想为非触摸应用程序实现CoverFlow。喜欢的东西： https://www.youtube.com/watch?v=0MT58xIzp5c

我工作的基础知识，但有两个问题：

1. 使用鼠标滚轮是比较轻弹非常慢，尤其是如果我滚动速度非常快。我怎样才能让incrementCurrentIndex()和decrementCurrentIndex()的功能和轻弹一样快？
2. 从一个项目滚动到下一个项目时，我可以看到第二个白色背景（项目不会同时移动）。有没有办法解决这个问题？

这里是我的代码工作的例子：

import QtQuick 2.4 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: 1280 
    height: 800 
    MouseArea { 
     //the mouse events will be replaced with c++ events later 
     anchors.fill: parent 
     onWheel: { 
      if (wheel.angleDelta.y < 0) 
      { 
       view.incrementCurrentIndex() 
      } 
      else if (wheel.angleDelta.y > 0) 
      { 
       view.decrementCurrentIndex() 
      } 
     } 
    } 

    PathView { 
     id: view 
     property int itemAngle: 40.0 
     property int itemSize: width/3.5 

     anchors.fill: parent 
     pathItemCount: 10 
     preferredHighlightBegin: 0.5 
     preferredHighlightEnd: 0.5 
     interactive: true 
     model: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18] 
     delegate: viewDelegate 
     path: Path { 
      startX: 0 
      startY: height/2 
      PathPercent { value: 0.0 } 
      PathAttribute { name: "z"; value: 0 } 
      PathAttribute { name: "angle"; value: view.itemAngle } 
      PathAttribute { name: "origin"; value: 0 } 


      PathLine {x: view.width*0.4; y: view.height/2} 
      PathPercent { value: 0.48 } 
      PathAttribute { name: "angle"; value: view.itemAngle } 
      PathAttribute { name: "origin"; value: 0 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine { relativeX: 0; relativeY: 0 } 
      PathAttribute { name: "angle"; value: 0.0 } 
      PathAttribute { name: "origin"; value: 0 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine {x: view.width*0.6; y: view.height/2} 
      PathPercent { value: 0.52 } 
      PathAttribute { name: "angle"; value: 0.0 } 
      PathAttribute { name: "origin"; value: 0 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine { relativeX: 0; relativeY: 0 } 
      PathAttribute { name: "angle"; value: -view.itemAngle } 
      PathAttribute { name: "origin"; value: view.itemSize } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine {x: view.width; y: view.height/2} 
      PathPercent { value: 1 } 
      PathAttribute { name: "angle"; value: -view.itemAngle } 
      PathAttribute { name: "origin"; value: view.itemSize } 
      PathAttribute { name: "z"; value: 0 } 
     } 
    } 

    Component { 
     id: viewDelegate 
     Rectangle { 
      id: flipItem 
      width: view.itemSize 
      height: view.height 
      color: "white" 
      z: PathView.z 

      property var rotationAngle: PathView.angle 
      property var rotationOrigin: PathView.origin 

      transform: 
       Rotation { 
       id: rot 
       axis { x: 0; y: 1; z: 0 } 
       angle: rotationAngle 
       origin.x: rotationOrigin 
       origin.y: width 
      } 


      Rectangle { 
       border.color: "black" 
       border.width: 2 
       color: (index%2 === 0) ? "yellow" : "royalblue" 
       anchors.top: flipItem.top 
       anchors.topMargin: 100 
       anchors.left: flipItem.left 
       anchors.right: flipItem.right 
       width: flipItem.width 
       height: flipItem.height*0.55 
       smooth: true 
       antialiasing: true 
       Text { 
        text: model.modelData 
        color: "gray" 
        font.pixelSize: 30 
        font.bold: true 
        anchors.centerIn: parent 
       } 
      } 
     } 
    } 
} 

我想达到的目标，是控制从C++侧（使用事件）的滚动和它尽可能快像弹与鼠标是。

Answer 1

这里是你的代码，（我希望）您正常工作：

import QtQuick 2.4 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: 1280 
    height: 800 
    MouseArea { 
     //the mouse events will be replaced with c++ events later 
     anchors.fill: parent 
     onWheel: { 
      if (wheel.angleDelta.y < 0) 
      { 
       if (scrollViewAnimation.running) { 
        scrollViewAnimation.stop() 
        scrollViewAnimation.to-- 
        scrollViewAnimation.start() 
       } 
       else { 
        scrollViewAnimation.to = Math.round(view.offset - 1) 
        scrollViewAnimation.start() 
       } 
      } 
      else if (wheel.angleDelta.y > 0) 
      { 
       if (scrollViewAnimation.running) { 
        scrollViewAnimation.stop() 
        scrollViewAnimation.to++ 
        scrollViewAnimation.start() 
       } 
       else { 
        scrollViewAnimation.to = Math.round(view.offset + 1) 
        scrollViewAnimation.start() 
       } 
      } 
     } 
    } 

    PathView { 
     id: view 
     property int itemAngle: 40.0 
     property int itemSize: width/3.5 

     anchors.fill: parent 
     pathItemCount: 10 
     preferredHighlightBegin: 0.5 
     preferredHighlightEnd: 0.5 
     interactive: true 
     model: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18] 
     delegate: viewDelegate 

     onDragStarted: { 
      scrollViewAnimation.stop() 
     } 

     NumberAnimation on offset { 
      id: scrollViewAnimation 
      duration: 250 
      easing.type: Easing.InOutQuad 
     } 

     path: Path { 
      startX: 0 
      startY: height/2 
      PathPercent { value: 0.0 } 
      PathAttribute { name: "z"; value: 0 } 
      PathAttribute { name: "angle"; value: view.itemAngle } 
      PathAttribute { name: "origin"; value: 0 } 


      PathLine {x: view.width*0.4; y: view.height/2} 
      PathPercent { value: 0.45 } 
      PathAttribute { name: "angle"; value: view.itemAngle } 
      PathAttribute { name: "origin"; value: 0 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine { relativeX: 0; relativeY: 0 } 
      PathAttribute { name: "angle"; value: 0.0 } 
      PathAttribute { name: "origin"; value: 0 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine {x: view.width*0.6; y: view.height/2} 
      PathPercent { value: 0.55 } 
      PathAttribute { name: "angle"; value: 0.0 } 
      PathAttribute { name: "origin"; value: 0 } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine { relativeX: 0; relativeY: 0 } 
      PathAttribute { name: "angle"; value: -view.itemAngle } 
      PathAttribute { name: "origin"; value: view.itemSize } 
      PathAttribute { name: "z"; value: 10 } 


      PathLine {x: view.width; y: view.height/2} 
      PathPercent { value: 1 } 
      PathAttribute { name: "angle"; value: -view.itemAngle } 
      PathAttribute { name: "origin"; value: view.itemSize } 
      PathAttribute { name: "z"; value: 0 } 
     } 
    } 

    Component { 
     id: viewDelegate 
     Rectangle { 
      id: flipItem 
      width: view.itemSize 
      height: view.height 
      color: "white" 
      z: PathView.z 

      property var rotationAngle: PathView.angle 
      property var rotationOrigin: PathView.origin 

      transform: 
       Rotation { 
       id: rot 
       axis { x: 0; y: 1; z: 0 } 
       angle: rotationAngle 
       origin.x: rotationOrigin 
       origin.y: width 
      } 


      Rectangle { 
       border.color: "black" 
       border.width: 2 
       color: (index%2 === 0) ? "yellow" : "royalblue" 
       anchors.top: flipItem.top 
       anchors.topMargin: 100 
       anchors.left: flipItem.left 
       anchors.right: flipItem.right 
       width: flipItem.width 
       height: flipItem.height*0.55 
       smooth: true 
       antialiasing: true 
       Text { 
        text: model.modelData 
        color: "gray" 
        font.pixelSize: 30 
        font.bold: true 
        anchors.centerIn: parent 
       } 
      } 
     } 
    } 
} 

1. 与滚动的问题是功能PathView.incrementCurrentIndex()和PathView.decrementCurrentIndex()移动PathView只有到下一个元素。例如，你在索引1上，快速调用PathView.incrementCurrentIndex() 4次，结果是你只是移动索引2而不是5.我做了一个Animation移动PathView（不知道它是否正在朝着正确的方向移动）。另请注意onDragStarted: { scrollViewAnimation.stop() }。
2. 滚动时我只是修改PathPercent { value: 0.48 }和PathPercent { value: 0.52 }到PathPercent { value: 0.45 }和PathPercent { value: 0.55 }