Combine multiple animations for PathView delegate

Question

Qt 6.2.0, Ubuntu 20.04. Here the code of my 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; }
    }
}

and here its delegate:

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

When I receive a signal from C++ I want to animate the current item in the following way:

fade it and all the other items to transparent
in the meantime (i.e. at the same time the previous animation runs) the current item (only) has to move up along Y axis
call a C++ function
reposition the item at the original position (it's still transparent)
fade it and all the other items back to solid

I tried something like this:

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

but the y properties of the delegate is not found:

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

Just to check the behavior I set target: view, but still there is no movements on the y axis.

Would you please help me to understand how to achieve such an animation?

score 1 · Accepted Answer · answered Nov 27 '21 at 14:14

The problem is that view.delegate is a Component, which is like a class definition, not a class instance. Your PathView may create many instances of that delegate. So you can't use view.delegate as a target for an animation because it needs to know which instance you're referring to.

Since it's the current item you're interested in, you can use the currentItem property to get the correct instance.

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

Combine multiple animations for PathView delegate

1 Answers1