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

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

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

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

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

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

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

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

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

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

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