Combine multiple animations for PathView delegate

  animation, c++, qml, qt, qt6

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:

  1. fade it and all the other items to transparent
  2. in the meantime (i.e. at the same time the previous animation runs) the current item (only) has to move up along Y axis
  3. call a C++ function
  4. reposition the item at the original position (it’s still transparent)
  5. 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?

Source: Windows Questions C++

LEAVE A COMMENT