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

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

• Переход - Анимирует переходы во время изменения состояний
• ПоследовательнаяАнимация - Выполняет анимации последовательно
• ПараллельнаяАнимация - Выполняет анимации параллельно
• Поведение - Указывает стандартную анимацию для изменений свойств
• ДействиеСвойства - Устанавливает мгновенные изменения свойств во время анимации
• ПаузаАнимация - Вводит паузу в анимации
• ГладкаяАнимация - Позволяет свойству плавно следовать за значением
• ВесенняяАнимация - Позволяет свойству следовать за значением с пружинным движением
• ДействиеСкрипта - Выполняет скрипты во время анимации

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

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

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

Запуск анимаций

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

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

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

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, чтобы сначала анимировать цвет прямоугольника со значением color в желтый, а затем в синий:

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

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

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

Стандартные анимации свойств задаются с помощью анимаций поведения. Анимации, объявленные в типах Поведение, применяются к свойству и анимируют любые изменения значений свойств. Однако типы Поведение имеют свойство 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 - Анимация на https://doc.qt.io/archives/qt-5.6/qtquick-animation-example.html для демонстрации анимаций поведения.

Запуск анимаций параллельно или последовательно

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

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

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

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

Все типы анимации наследуются от типа Анимация. Невозможно создать объекты Анимация; вместо этого этот тип предоставляет основные свойства и методы для типов анимации. Типы анимации имеют 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 - Анимация.