Анимация и переходы в 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 необходимо было указать определенные значения цели и свойств для указания объектов и свойств, которые должны быть анимированы. Этого можно избежать, используя синтаксис <Animation> на <Property>, который указывает, что анимация должна применяться как источник значения свойства.

Ниже приведены два объекта 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. Поскольку был использован синтаксис <Animation> на <Property>, не нужно указывать значение target объектов PropertyAnimation на rect, и не нужно указывать значения property на 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 с помощью синтаксиса <Animation> on <Property>, его дочерние объекты ColorAnimation также автоматически применяются к этому свойству и не нужно указывать значения target или property анимации.

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

Состояния 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 {
    // 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 — Анимация.