Qml Coveflow角度动画

Question

我想在QML中实现一个封面流，但是角度动画有问题。

向左滚动（从数字1→18→17→...）效果很好，但右滚动的行为不符合预期。我不确定我的角度是否正确，但它们似乎从-40°→0°动画，看起来很奇怪（正确的是从40°→0）。 有没有办法纠正这种行为？

以下是我的代码的一个工作示例：

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1280
    height: 800
    MouseArea {
        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.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

                Behavior on angle { PropertyAnimation{} }
            }


            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
                }
            }
        }
    }
}