Revision control
++ // Copyright (C) 2016 The Qt Company Ltd.
++ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
++ /*!
++ \page qtquick-usecase-animations.html
++ \meta {keywords} {qmltopic}
++ \title Animations
++ \keyword Use case - Animations In QML
++ \brief Example of how to include animations in QML applications.
++
++ \l {Qt Quick} provides the ability to animate properties. Animating properties
++ allows property values to move through intermediate values instead of
++ immediately changing to the target value. To animate the position of an item,
++ you can animate the properties that control the item's position, x and y for
++ example, so that the item's position changes each frame on the way to the
++ target position.
++
++ \section1 Fluid UIs
++
++ QML was designed to facilitate the creation of fluid UIs. These are user
++ interfaces where the UI components animate instead of appearing, disappearing,
++ or jumping abruptly. Qt Quick provides two simple ways to have UI components
++ move with animation instead of instantly appearing at their new location.
++
++ \section2 States and transitions
++
++ Qt Quick allows you to declare various UI states in \l State objects. These
++ states are comprised of property changes from a base state, and can be a useful
++ way of organizing your UI logic. Transitions are objects you can associate with
++ an item to define how its properties will animate when they change due to a
++ state change.
++
++ States and transitions for an item can be declared with the \l Item::states and
++ \l Item::transitions properties. States are declared inside the states list
++ property of an item, usually the root item of the component. Transitions
++ defined on the same item are used to animate the changes in the state. Here is
++ an example.
++
++ \snippet qmlapp/usecases/animations.qml states
++
++ \section2 Animating property changes.
++
++ Behaviors can be used to specify an animation for a property to use when it
++ changes. This is then applied to all changes, regardless of their source. The
++ following example animates a button moving around the screen using behaviors.
++
++ \snippet qmlapp/usecases/animations.qml behave
++
++ \section1 Other animations
++
++ Not all animations have to be tied to a specific property or state. You can
++ also create animations more generally, and specify target items and properties
++ inside the animation. Here are some examples of different ways to do this:
++
++ \snippet qmlapp/usecases/animations.qml constant
++ \snippet qmlapp/usecases/animations.qml scripted
++ \image qmlapp/qml-uses-animation.png
++ {Red, green, blue, and yellow squares in staggered positions}
++
++ More information about animations can be found on the
++ \l{Important Concepts in Qt Quick - States, Transitions and Animations} page.
++
++ */