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 }