Анимация и переходы в Qt Quick

Типы анимации и переходов

• Transition - Анимирует переходы при изменении состояния
• SequentialAnimation - Выполняет анимации последовательно
• ParallelAnimation - Выполняет анимации параллельно
• Behavior - Указывает стандартную анимацию для изменений свойств
• PropertyAction - Устанавливает немедленные изменения свойств во время анимации
• PauseAnimation - Вводит паузу в анимацию
• SmoothedAnimation - Позволяет свойству плавно отслеживать значение
• SpringAnimation - Позволяет свойству отслеживать значение с помощью пружинного движения
• ScriptAction - Выполняет скрипты во время анимации

Типы, которые анимируют свойства на основе типов данных

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

Для создания анимации используйте соответствующий тип анимации для типа свойства, которое нужно анимировать, и примените анимацию в зависимости от требуемого типа поведения.

Инициирование анимаций

Существует несколько способов задания анимации объекту.

Прямая анимация свойств

Анимации создаются путем применения объектов анимации к значениям свойств, чтобы постепенно изменять свойства со временем. Эти анимации свойств обеспечивают плавные движения, интерполируя значения между изменениями значений свойств. Анимации свойств предоставляют средства управления временем и позволяют использовать различные интерполяции через кривые сглаживания.

Rectangle {
    id: flashingblob
    width: 75; height: 75
    color: "blue"
    opacity: 1.0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            animateColor.start()
            animateOpacity.start()
        }
    }

    PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

    NumberAnimation {
        id: animateOpacity
        target: flashingblob
        properties: "opacity"
        from: 0.99
        to: 1.0
        loops: Animation.Infinite
        easing {type: Easing.OutBack; overshoot: 500}
   }
}

Специализированные типы анимации свойств имеют более эффективные реализации, чем тип PropertyAnimation. Они предназначены для задания анимаций для различных типов QML, таких как int, color, и вращений. Аналогично, ParentAnimation может анимировать изменения родителя.

См. раздел Управление анимацией для получения дополнительной информации о различных свойствах анимации.

Использование предопределенных целей и свойств

В предыдущем примере объектам PropertyAnimation и NumberAnimation нужно было указать конкретные значения цели и свойств, чтобы указать объекты и свойства, которые должны быть анимированы. Этого можно избежать, используя синтаксис «<Анимация> на <Свойство>», который указывает, что анимация должна применяться как источник значения свойства.

Ниже приведены два объекта PropertyAnimation, которые указаны с помощью этого синтаксиса:

import QtQuick 2.0

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    PropertyAnimation on x { to: 100 }
    PropertyAnimation on y { to: 100 }
}

Анимация запускается как только прямоугольник загружается и автоматически применяется к его x и y значениям. Поскольку был использован синтаксис «<Анимация> на <Свойство>», нет необходимости устанавливать значение цели объектов PropertyAnimation на rect, а также не нужно устанавливать значения свойства на x и y.

Это также можно использовать с группированными анимациями, чтобы убедиться, что все анимации в группе применяются к одному свойству. Например, в предыдущем примере можно вместо этого использовать SequentialAnimation для анимации изменения цвета прямоугольника сначала на желтый, а затем на синий:

import QtQuick 2.0

Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on color {
        ColorAnimation { to: "yellow"; duration: 1000 }
        ColorAnimation { to: "blue"; duration: 1000 }
    }
}

Поскольку объект SequentialAnimation указан для свойства color с помощью синтаксиса «<Анимация> на <Свойство>», объекты ColorAnimation в нем также автоматически применяются к этому свойству и не нужно указывать значения цели или свойства анимации.

Переходы при изменении состояний

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

Тип Transition может содержать типы анимации для интерполяции изменений свойств, вызванных изменениями состояний. Чтобы назначить переход объекту, свяжите его со свойством transitions.

Кнопка может иметь два состояния: pressed при нажатии пользователя на кнопку и released при отпускании кнопки. Мы можем назначить разные конфигурации свойств для каждого состояния. Переход будет анимировать изменение от состояния pressed до состояния released. Аналогичным образом, будет анимация при изменении от состояния released до состояния pressed.

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        onPressed: button.state = "PRESSED"
        onReleased: button.state = "RELEASED"
    }

    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]

    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

Связывание свойств to и from с именем состояния назначит этот конкретный переход для изменения состояния. Для простых или симметричных переходов установка свойства to в символ подстановки "*" означает, что переход применяется к любому изменению состояния.

    transitions:
        Transition {
            to: "*"
            ColorAnimation { target: button; duration: 100}
        }

Стандартная анимация как поведение

Стандартные анимации свойств задаются с помощью анимаций поведения. Анимации, объявленные в типах Behavior, применяются к свойству и анимируют любые изменения значений свойств. Однако типы Behavior имеют свойство enabled, чтобы намеренно включить или отключить анимации поведения.

Компонент шара может иметь анимацию поведения, назначенную его свойствам x, y и color. Анимация поведения могла быть настроена для имитации эффекта упругости. По сути, эта анимация поведения будет применять упругий эффект к свойствам всякий раз, когда шар движется.

Rectangle {
    width: 75; height: 75; radius: width
    id: ball
    color: "salmon"

    Behavior on x {
        NumberAnimation {
            id: bouncebehavior
            easing {
                type: Easing.OutElastic
                amplitude: 1.0
                period: 0.5
            }
        }
    }
    Behavior on y {
        animation: bouncebehavior
    }
    Behavior {
        ColorAnimation { target: ball; duration: 100 }
    }
}

Существует несколько способов назначения анимаций поведения свойствам. Объявление Behavior on <property> является удобным способом назначения анимации поведения свойству.

См. Примеры Qt Quick - Анимация для демонстрации анимаций поведения.

Выполнение анимаций параллельно или последовательно

Анимации могут выполняться параллельно или последовательно. Параллельные анимации будут воспроизводить группу анимаций одновременно, в то время как последовательные анимации воспроизводят группу анимаций в порядке: одна за другой. Группирование анимаций в SequentialAnimation и ParallelAnimation будет воспроизводить анимации последовательно или параллельно.

Компонент баннера может отображать несколько иконок или слоганов один за другим. Свойство opacity может преобразовываться в 1.0, обозначающее непрозрачный объект. Используя тип SequentialAnimation, анимации непрозрачности будут выполняться после завершения предыдущей анимации. Тип ParallelAnimation будет воспроизводить анимации одновременно.

Rectangle {
    id: banner
    width: 150; height: 100; border.color: "black"

    Column {
        anchors.centerIn: parent
        Text {
            id: code
            text: "Code less."
            opacity: 0.01
        }
        Text {
            id: create
            text: "Create more."
            opacity: 0.01
        }
        Text {
            id: deploy
            text: "Deploy everywhere."
            opacity: 0.01
        }
    }

    MouseArea {
        anchors.fill: parent
        onPressed: playbanner.start()
    }

    SequentialAnimation {
        id: playbanner
        running: false
        NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
        NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
    }
}

После того, как отдельные анимации помещены в SequentialAnimation или ParallelAnimation, их больше нельзя запускать и останавливать независимо. Анимация последовательности или параллельная анимация должны запускаться и останавливаться как группа.

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

Управление анимациями

Существует несколько способов управления анимациями.

Воспроизведение анимации

Все типы анимации наследуют от типа Animation. Невозможно создать объекты Animation; вместо этого этот тип предоставляет основные свойства и методы для типов анимации. Типы анимации имеют start(), stop(), resume(), pause(), restart(), и complete() - все эти методы управляют выполнением анимаций.

Сглаживание

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

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

Пример сглаживания наглядно демонстрирует каждый из разных типов сглаживания.

Другие типы анимации

Кроме того, QML предоставляет несколько других типов, полезных для анимации:

• PauseAnimation: позволяет делать паузы во время анимации
• ScriptAction: позволяет выполнять JavaScript во время анимации и может использоваться вместе с StateChangeScript для повторного использования существующих скриптов
• PropertyAction: изменяет свойство немедленно во время анимации, без анимации изменения свойства

Это специализированные типы анимации, которые анимируют разные типы свойств

• SmoothedAnimation: специализированная NumberAnimation, которая обеспечивает плавные изменения в анимации при изменении целевого значения
• SpringAnimation: обеспечивает анимацию пружины со специальными атрибутами, такими как масса, затухание и эпсилон
• ParentAnimation: используется для анимации изменения родителя (см. ParentChange)
• AnchorAnimation: используется для анимации изменения якоря (см. AnchorChanges)

Использование экземпляров анимации

Использование экземпляров анимации между Переходами или Поведением не поддерживается и может привести к неопределенному поведению. В следующем примере изменения положения Rectangle, скорее всего, не будут правильно анимированы.

Rectangle {
    // NOT SUPPORTED: this will not work correctly as both Behaviors
    // try to control a single animation instance
    NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }
    Behavior on x { animation: anim }
    Behavior on y { animation: anim }
}

Самым простым решением является повторение NumberAnimation для обоих Поведений. Если повторная анимация довольно сложная, вы также можете создать пользовательский компонент анимации и назначить экземпляр каждому Поведению, например:

// MyNumberAnimation.qml
NumberAnimation { id: anim; duration: 300; easing.type: Easing.InBack }

// main.qml
Rectangle {
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}

См. также Примеры Qt Quick - Анимация.