Solution for Animating multiple QML files from a separate qml file.

[Prasoon P]

Hello,
I have a project with following structure.

The ViewAnimation.qml has a Timeline animation with key frames, which animates all SubView and their childs in MainView. When the show button pressed this animation play in forward and when hide button pressed animation play in reverse direction.

How we can access the subview and their child in ViewAnimation.qml?

Solutions already tried:

1. Using Singleton qml and store the subview objects in it as property

pragma Singleton
import QtQuick 2.15

QtObject {
    property var subView1
    property var subView2
    property var subView3
}

Rectangle {
    id: mainView

    onStateChanged: {
        console.log("state changes to: ", state)
    }

    Component.onCompleted: {
        ObjectFactory.subView1= m_sub1
        ObjectFactory.subView2= m_sub2
        ObjectFactory.subView3= m_sub3
    }

    width: 700
    height: 150
    color: "#82E0AA"
    border.width: 2
    border.color: "black"


    SubView1{id: m_sub1; x: 75; y: 25}
    SubView2{id: m_sub2;x: 250; y: 25}
    SubView3{id: m_sub3;x: 425; y: 25}

}

and accessing then in ViewAnimation.qml like:

keyframeGroups: [
        KeyframeGroup {
            property: "x"; target: ObjectFactory.subView1
            Keyframe { frame: 0; value: 75 }
            Keyframe { frame: 50; value: 75 }
            Keyframe { frame: 100; value: 25 }
        },
        KeyframeGroup {
            property: "opacity"; target: ObjectFactory.subView2
            Keyframe { frame: 0; value: 0 }
            Keyframe { frame: 50; value: 0.5 }
            Keyframe { frame: 100; value: 1 }
        },
        KeyframeGroup {
            property: "x"; target: ObjectFactory.subView3
            Keyframe { frame: 0; value: 425 }
            Keyframe { frame: 50; value: 425 }
            Keyframe { frame: 100; value: 475 }
        },
        KeyframeGroup {
            property: "scale"; target: ObjectFactory.subView2.children[0]
            Keyframe { frame: 0; value: 0 }
            Keyframe { frame: 50; value: 0.5 }
            Keyframe { frame: 100; value: 1 }
        },
        KeyframeGroup {
            property: "scale"; target: ObjectFactory.subView2.children[1]
            Keyframe { frame: 0; value: 0 }
            Keyframe { frame: 50; value: 0.5 }
            Keyframe { frame: 100; value: 1 }
        }
    ]

2. Instead of Singleton QML create properties inside MainView.qml itself to hold the references of SubViews and access same way as method1.

Both solutions work for now, but as the projects grows there can be many views their subviews and their child need to animated same way. Accessing them in animation using above method cannot be easy approach.

Is there a better solution other than these two methods, so that accessing and animating them will be easy without of much of manual efforts?