为 PathView 委托组合多个动画答案

【问题标题】：Combine multiple animations for PathView delegate为 PathView 委托组合多个动画
【发布时间】：2022-01-03 10:33:17
【问题描述】：

Qt 6.2.0，Ubuntu 20.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 轴上仍然没有运动。

你能帮我理解如何实现这样的动画吗？

【问题讨论】：

标签： c++ qt animation qml qt6

【解决方案1】：

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

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

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

【讨论】：