Анимация и переходы в 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> on <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> on <Property>, нет необходимости устанавливать значение целевого объекта объектов 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> on <Property>, его дочерние объекты 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, применяются к свойству и анимируют любые изменения значения свойства. Однако типы поведения имеют свойство 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 может иметь разные кривые сплайнов для каждой анимации свойства. Также существуют различные параметры для управления кривой, некоторые из которых являются уникальными для конкретной кривой. Более подробную информацию о кривых сплайнов можно найти в документации easing.

Пример easing example визуально демонстрирует каждый из различных типов сплайнов.

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

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

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

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

• SmoothedAnimation: специализированная NumberAnimation, которая обеспечивает плавные изменения в анимации при изменении целевого значения
• SpringAnimation: обеспечивает анимацию пружины со специализированными атрибутами, такими как mass, damping и epsilon
• 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 - Анимация.