Анимации в QML: PropertyAnimation, Transition, States

QML — мощный декларативный язык, входящий в состав Qt, позволяет создавать гибкий и красивый пользовательский интерфейс. Одной из ключевых возможностей является анимация. В этой статье рассмотрим три основных инструмента анимации в QML:

• PropertyAnimation — для анимации отдельных свойств
• States — для описания разных визуальных состояний
• Transition — для управления переходами между состояниями

---

PropertyAnimation

PropertyAnimation позволяет анимировать любое свойство объекта, поддерживающее числовое значение (например, x, y, width, opacity, rotation и т.д.).

Пример:

Rectangle {
    width: 200
    height: 200
    color: "lightgray"

    Rectangle {
        id: animRect
        width: 50
        height: 50
        color: "tomato"
        x: 0
        y: 75

        MouseArea {
            anchors.fill: parent
            onClicked: anim.to = (animRect.x === 0 ? 150 : 0)
                       anim.start()
        }

        PropertyAnimation {
            id: anim
            target: animRect
            property: "x"
            duration: 500
            easing.type: Easing.InOutQuad
        }
    }
}

При нажатии на прямоугольник он плавно перемещается по оси X.

States (Состояния)

States в QML позволяют описывать различные конфигурации компонентов, между которыми можно переключаться. Например, положение, размер, цвет и прочие свойства.

Пример:

Rectangle {
    width: 200
    height: 200
    color: "lightblue"

    Rectangle {
        id: myRect
        width: 50
        height: 50
        color: "orange"
        anchors.centerIn: parent

        MouseArea {
            anchors.fill: parent
            onClicked: parent.state = (parent.state === "moved" ? "" : "moved")
        }
    }

    states: [
        State {
            name: "moved"
            PropertyChanges {
                target: myRect
                x: 120
                y: 120
                rotation: 45
            }
        }
    ]
}

При клике компонент меняет свое состояние: перемещается и вращается.

Transition (Переходы между состояниями)

Чтобы сделать переходы между States плавными, используется Transition. Он описывает, какие свойства нужно анимировать и как.

Пример:

Rectangle {
    width: 200
    height: 200
    color: "lightblue"

    Rectangle {
        id: myRect
        width: 50
        height: 50
        color: "orange"
        anchors.centerIn: parent

        MouseArea {
            anchors.fill: parent
            onClicked: parent.state = (parent.state === "moved" ? "" : "moved")
        }
    }

    states: [
        State {
            name: "moved"
            PropertyChanges {
                target: myRect
                x: 120
                y: 120
                rotation: 45
            }
        }
    ]

    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation {
                properties: "x, y, rotation"
                duration: 600
                easing.type: Easing.InOutQuad
            }
        }
    ]
}

Теперь переход из состояния в состояние происходит с плавной анимацией координат и вращения.

---

Практические советы

• Используйте PropertyAnimation для анимации одиночных свойств без переключения состояния.
• Используйте States + Transition для организации более сложной логики интерфейса, когда один и тот же элемент может находиться в разных конфигурациях.
• Анимации не должны мешать UX: делайте их быстрыми и ненавязчивыми.

---

Заключение

Анимации в QML просты в использовании и позволяют легко добавлять интерактивность и живость интерфейсу. Сочетание PropertyAnimation, States и Transition дает мощный и гибкий инструментарий для создания современного UI.