[РЕШЕНО] Как использовать одинаковую анимацию у нескольких элементов

[arhohryakov]

Необходимо, чтобу у каждого из элеменов была одинаковая анимация (myAnimation).
Если анимацию продублировать у каждого элемента, то всё работает как надо.
А если выделить элемент myAnimation, то анимация работает только у одного элемента.

Как правильно использовать выделенный элемент myAnimation, чтобы, не дублируя код, использовать одну и ту же анимацию для нескольких элементов.

Код:

import QtQuick 2.0

Item {
    id: netProjectPage
    objectName: 'netProjectPage'

    readonly property int collapsedWidth: 32
    property int expandedWidth: width - collapsedWidth * 3

    width: 800
    height: 600

    Component.onCompleted: state = "State2"

    NumberAnimation {
        id: myAnimation
        easing.type: Easing.Linear
        duration: 800
    }

    Row {
        id: rowLayout1

        anchors.fill: parent

        Item {
            id: item1
            width: collapsedWidth
            height: parent.height
            clip: true

            Rectangle {
                id: rectangle1

                color: "#c6f12d"
                enabled: 0 < opacity
                anchors.fill: parent

                MouseArea {
                    id: mouseArea1
                    anchors.fill: parent

                    onClicked: netProjectPage.state = "State1";
                }
            }
            Behavior on width {
                animation: myAnimation
//                NumberAnimation {
//                    easing.type: Easing.Linear
//                    duration: 800
//                }
            }
        }

        Item {
            id: item2
            objectName: "netProjectRepresentation"
            width: collapsedWidth
            height: parent.height
            clip: true

            Rectangle {
                id: rectangle2
                color: "#8bf8a9"
                enabled: 0 < opacity

                anchors.fill: parent

                MouseArea {
                    id: mouseArea2
                    anchors.fill: parent

                    onClicked: netProjectPage.state = "State2";
                }
            }

            Behavior on width {
                animation: myAnimation
//                NumberAnimation {
//                    easing.type: Easing.Linear
//                    duration: 800
//                }
            }
        }

        Item {
            id: item3
            width: collapsedWidth
            height: parent.height
            clip: true

            Rectangle {
                id: rectangle3

                color: "#f49b81"
                enabled: 0 < opacity
                anchors.fill: parent

                MouseArea {
                    id: mouseArea3
                    anchors.fill: parent

                    onClicked: netProjectPage.state = "State3";
                }
            }

            Behavior on width {
                animation: myAnimation
//                NumberAnimation {
//                    easing.type: Easing.Linear
//                    duration: 800
//                }
            }
        }

        Item {
            id: item4
            width: collapsedWidth
            height: parent.height
            clip: true

            Rectangle {
                id: rectangle4

                color: "#cc77ed"
                enabled: 0 < opacity
                anchors.fill: parent

                MouseArea {
                    id: mouseArea4
                    anchors.fill: parent

                    onClicked: netProjectPage.state = "State4";
                }
            }
            Behavior on width {
                animation: myAnimation
//                NumberAnimation {
//                    easing.type: Easing.Linear
//                    duration: 800
//                }
            }
        }
    }
    states: [
        State {
            name: "State1"

            PropertyChanges {
                target: item1
                width: expandedWidth
            }
        },
        State {
            name: "State2"

            PropertyChanges {
                target: item2
                width: expandedWidth
            }
        },
        State {
            name: "State3"

            PropertyChanges {
                target: item3
                width: expandedWidth
            }
        },
        State {
            name: "State4"

            PropertyChanges {
                target: item4
                width: expandedWidth
            }
        }
    ]
}

[BuRn]

Я бы вам советовал создать отдельный элемет, назвать его ItemAnimation и наследоваться от него нужными вам элементами. Я думаю и проблемы бы не было. Попробуйте

[arhohryakov]

Я бы вам советовал создать отдельный элемет, назвать его ItemAnimation и наследоваться от него нужными вам элементами. Я думаю и проблемы бы не было. Попробуйте

Огромное спасибо. Через наследование всё отлично работает.
Создал элемент и использую его так:

Код:

            Behavior on width {
                animation: MyAnimation {}
            }