How to access property for NumberAnimation and animate latter QML from first QML?

Question

I have two qmls among which one contain animation say animation.qml and one contain data say data.qml.

I want to run my animation.qml for animating the content inside data.qml for that purpose I want to access the QString of QProperty in another model.

How to achieve the same?

I tried creating alias for the already defined property but it is not working using syntax

property alias differentNameForProperty: currentNameOftheProperty

Thank you in advance.

Here is an example,

Marks.qml

Item {
    Student {
        id: student
    }

    Item {
        SequentialAnimation {
            id: animination1

            NumberAnimation {
                duration: 1250
                target: student
                property: student.newMarks
                from: 0
                to: 100
            }
        }
    }

    Connections {
        target: marksModel

        function onCallMarks() {
            animination1.start()
        }
    }
}

Student.qml

Item {
    id: id_parent
    property double oldMarks: 10
    property alias newMarks: oldMarks

    // Using oldMarks to toggle
    // the visibility of elements
}

When the animation run from Marks.qml for newMarks. The changes will take place in Student.qml for oldMarks and animation will be played. I hope my explanation is clear. Thanks

Answer 1

I don't know if this is what you want...your example isn't really working, so I stripped it down to a version that does, but it might not be what you intended.

Your example has an issue with the property property in the NumberAnimation. This property is of type string. So what you actually want to write is property: "newMarks" no need for the id prefix as this is already accomplished by the target property.

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    component Student: Rectangle {
        id: internal
        property double oldMarks: 10
        property alias newMarks: internal.oldMarks

        width: 100
        height: 100
        color: "red"
        // Using oldMarks to toggle the visibility of elements
        opacity: internal.oldMarks
    }

    Student {
        id: student
        anchors.centerIn: parent
    }

    SequentialAnimation {
        id: animation

        NumberAnimation {
            duration: 2500
            target: student
            property: "newMarks"
            from: 0
            to: 1
        }
    }

    Component.onCompleted: animation.start()
}