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

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

    component BounceAnimation : NumberAnimation {
       easing {
          type: Easing.OutElastic
          amplitude: 1.0
          period: 0.5
       }
    }

    Behavior on x {
        BounceAnimation {}
    }
    Behavior on y {
        BounceAnimation {}
    }
    Behavior on color {
        ColorAnimation { target: ball; duration: 100 }
    }
}

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

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

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

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

Rectangle {
    component MyNumberAnimation : NumberAnimation {
        duration: 300; easing.type: Easing.InBack
    }
    Behavior on x { MyNumberAnimation {} }
    Behavior on y { MyNumberAnimation {} }
}

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