Qt 6.2 PathView如何为委托组合实现多段联动动画效果

• 你使用的view.delegate是委托的组件定义模板，不是实际渲染的实例对象，不存在运行时的y属性，因此触发属性不存在的报错。要获取当前选中项的实例，应该调用PathView内置的currentItem属性。
• PathView会自动计算并覆盖所有委托实例的x/y坐标，使其匹配你定义的Path路径，直接修改委托的x/y属性会被PathView的布局逻辑重置，因此看不到位移效果。
• 你的PathView设置了rotation: -90，坐标系已旋转，直接修改y属性对应的位移方向不一定匹配你预期的“向上”。

步骤1：修改委托代码，增加独立控制的偏移和透明度属性 #

避免和PathView原本的布局、透明度控制逻辑冲突：

Item {
    id: root

    property int highlightMoveDuration: 1000
    property int image_width: 864 * 0.8
    // 新增两个自定义控制属性
    property real extraOffsetY: 0
    property real extraOpacity: 1.0

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

    width: image_width; height: width * 1.7778
    scale: PathView.iconScale
    // 叠加额外透明度，不影响原有Path的透明度控制
    opacity: PathView.iconOpacity * extraOpacity * view.allItemExtraOpacity
    z: PathView.iconOrder

    // 新增变换，在PathView布局基础上额外偏移，不会被覆盖
    transform: Translate {
        y: root.extraOffsetY
    }

    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
}

步骤2：修改PathView代码，增加全局透明度控制属性 #

用来统一控制所有Item的显隐动画：

PathView {
    id: view
    property int item_gap: 60
    // 新增全局额外透明度属性
    property real allItemExtraOpacity: 1.0

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

步骤3：修改动画代码 #

修正target指向，使用自定义属性做动画：

SequentialAnimation {
    id: selectedContent
    running: false

    ParallelAnimation {
        // 所有Item同步渐变透明
        PropertyAnimation {
            target: view
            property: "allItemExtraOpacity"
            duration: 500
            to: 0.0
        }
        // 仅当前选中Item向上偏移，数值可自行调整大小和正负匹配位移方向
        PropertyAnimation {
            target: view.currentItem
            property: "extraOffsetY"
            duration: 500
            to: -200
        }
    }

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

    // 复位选中项的偏移，此时仍保持透明
    PropertyAction {
        target: view.currentItem
        property: "extraOffsetY"
        value: 0
    }

    // 所有Item同步恢复不透明
    PropertyAnimation {
        target: view
        property: "allItemExtraOpacity"
        duration: 500
        to: 1.0
    }
}

如果位移方向不符合预期，可将委托里Translate的y属性改为x，调整extraOffsetY的赋值正负即可匹配你需要的方向。

内容的提问来源于stack exchange，提问作者Mark