Russian Qt Forum
Ноябрь 01, 2024, 09:33 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
 
  Начало   Форум  WIKI (Вики)FAQ Помощь Поиск Войти Регистрация  

Страниц: [1]   Вниз
  Печать  
Автор Тема: [РЕШЕНО] Как использовать одинаковую анимацию у нескольких элементов  (Прочитано 3491 раз)
arhohryakov
Гость
« : Февраль 19, 2016, 17:02 »

Необходимо, чтобу у каждого из элеменов была одинаковая анимация (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
            }
        }
    ]
}
« Последнее редактирование: Февраль 22, 2016, 19:39 от arhohryakov » Записан
BuRn
Гость
« Ответ #1 : Февраль 20, 2016, 19:52 »

Я бы вам советовал создать отдельный элемет, назвать его ItemAnimation и наследоваться от него нужными вам элементами. Я думаю и проблемы бы не было. Попробуйте
Записан
arhohryakov
Гость
« Ответ #2 : Февраль 22, 2016, 19:38 »

Я бы вам советовал создать отдельный элемет, назвать его ItemAnimation и наследоваться от него нужными вам элементами. Я думаю и проблемы бы не было. Попробуйте
Огромное спасибо. Через наследование всё отлично работает.
Создал элемент и использую его так:
Код:
            Behavior on width {
                animation: MyAnimation {}
            }
Записан
Страниц: [1]   Вверх
  Печать  
 
Перейти в:  


Страница сгенерирована за 0.044 секунд. Запросов: 21.