Необходимо, чтобу у каждого из элеменов была одинаковая анимация (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
}
}
]
}
Я бы вам советовал создать отдельный элемет, назвать его ItemAnimation и наследоваться от него нужными вам элементами. Я думаю и проблемы бы не было. Попробуйте
Я бы вам советовал создать отдельный элемет, назвать его ItemAnimation и наследоваться от него нужными вам элементами. Я думаю и проблемы бы не было. Попробуйте
Огромное спасибо. Через наследование всё отлично работает.
Создал элемент и использую его так:
Behavior on width {
animation: MyAnimation {}
}