为 PathView delegate 组合多个动画

Question

Qt 6.2.0，Ubuntu20.04。这是我的代码 PathView:

PathView {
    id: view
    property int item_gap: 60

    anchors.fill: parent
    pathItemCount: 3
    preferredHighlightBegin: 0.5
    preferredHighlightEnd: 0.5
    highlightRangeMode: PathView.StrictlyEnforceRange
    highlightMoveDuration: 1000
    snapMode: PathView.SnapToItem
    rotation: -90

    model: modelContent
    delegate: DelegateContent { }

    path: Path {
        startX: view.width + item_gap; startY: view.height / 2
        PathAttribute { name: "iconScale"; value: 0.7 }
        PathAttribute { name: "iconOpacity"; value: 0.1 }
        PathAttribute { name: "iconOrder"; value: 0 }
        PathLine {x: view.width / 2; y: view.height / 2; }
        PathAttribute { name: "iconScale"; value: 1 }
        PathAttribute { name: "iconOpacity"; value: 1 }
        PathAttribute { name: "iconOrder"; value: 9 }
        PathLine {x: -item_gap; y: view.height / 2; }
    }
}

这里是它的代表：

Item {
    id: root

    property int highlightMoveDuration: 1000
    property int image_width: 864 * 0.8

    required property int index
    required property string label
    required property string thumbnail

    width: image_width; height: width * 1.7778
    scale: PathView.iconScale
    opacity: PathView.iconOpacity
    z: PathView.iconOrder

    Image {
        id: img
        width: parent.width
        height: parent.height
        cache: true
        asynchronous: true
        source: "file://" + thumbnail
        sourceSize: Qt.size(parent.width, parent.height)
        visible: false
        }

        // other non-relevant stuff
    }
}

当我收到来自 C++ 的信号时，我想通过以下方式为当前项目设置动画：

将它和所有其他项目淡化为透明
同时（即在上一个动画运行的同时）当前项目（仅）必须沿 Y 轴向上移动
调用 C++ 函数
将项目重新定位到原来的位置（它仍然是透明的）
将它和所有其他项目淡化回纯色

我试过这样的事情：

SequentialAnimation {
    id: selectedContent
    running: false

    ParallelAnimation {
        PropertyAnimation { target: view; properties: "opacity"; duration: 500; to: 0.0}
        PropertyAnimation { target: view.delegate; properties: "y"; duration: 500; to: 0.0}
    }

    ScriptAction { script: ccp_code.selectedContent(view.currentIndex) }

    ParallelAnimation {
        PropertyAnimation { target: view; properties: "opacity"; duration: 500; to: 1.0}
        PropertyAnimation { target: view.delegate; properties: "y"; duration: 0; to: view.height / 2}
    }
}

但未找到委托的 y 属性：

QML PropertyAnimation: Cannot animate non-existent property "y"

只是为了检查我设置的行为 target: view，但 y 轴上仍然没有移动。

能否请您帮助我了解如何实现这样的动画？

Answer 1

问题是 view.delegate 是一个 Component，它类似于 class 定义，而不是 class 实例。您的 PathView 可能会创建该委托的许多实例。所以你不能使用 view.delegate 作为动画的目标，因为它需要知道你指的是哪个实例。

由于这是您当前感兴趣的项目，您可以使用 currentItem 属性来获取正确的实例。

PropertyAnimation { target: view.currentItem; properties: "y"; duration: 500; to: 0.0}

为 PathView delegate 组合多个动画

Combine multiple animations for PathView delegate

c++

animation

qt

qml

qt6