diff options
| author | Alexei Cazacov <alexei.cazacov@qt.io> | 2025-05-27 12:35:42 +0300 |
|---|---|---|
| committer | Alexei Cazacov <alexei.cazacov@qt.io> | 2025-08-01 13:42:37 +0000 |
| commit | 161464abf696d5f64c1e44c3b49313e84e51e709 (patch) | |
| tree | c1ea2cd15b211d74cae538726d94b77161650cd4 /src/quick/doc/snippets/qmlapp/usecases/animations.qml | |
| parent | cfacbf675b4f2881ce151b537d7dc18414037e6e (diff) | |
Doc: Create a Getting Started section for the Qt Quick module
This commit moves the "Building UIs with Qt Quick" tree section to the
Qt Quick module as a getting started subtree.
Changes:
qtquick-debugging.html - moved to concepts/Debugging
qtquick-deployment.html - moved to concepts/Deployment
qtquick-performance.html - moved to concepts/Performance
qml-codingconventions.html - moved to guidelines/Coding Conventions
scalability.html - moved to guidelines/Scalability
qtquick-qml-runtime.html - moved to the qml module
"Use Case" topics moved to Getting Started:
Visual Elements In QML -> Visual types
Positioners and Layouts In QML -> Positioners and layouts
Responding To User Input in QML -> Handling user input
Displaying Text In QML -> Displaying text
Animations In QML -> Animations
Style And Theme Support -> was deleted (it had almost zero useful info)
Integrating JavaScript in QML -> Integrating JavaScript in QML
Task-number: QTBUG-134130
Pick-to: 6.10 6.9
Change-Id: I14c8e4abadc587fbba788b7ce479c3a8364d0a42
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>
Reviewed-by: Kai Köhne <kai.koehne@qt.io>
Diffstat (limited to 'src/quick/doc/snippets/qmlapp/usecases/animations.qml')
| -rw-r--r-- | src/quick/doc/snippets/qmlapp/usecases/animations.qml | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/src/quick/doc/snippets/qmlapp/usecases/animations.qml b/src/quick/doc/snippets/qmlapp/usecases/animations.qml new file mode 100644 index 0000000000..52a29d41bc --- /dev/null +++ b/src/quick/doc/snippets/qmlapp/usecases/animations.qml @@ -0,0 +1,146 @@ +// Copyright (C) 2016 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//![0] +import QtQuick + +Item { + + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + Column { + //![states] + + Item { + id: container + width: 320 + height: 120 + + Rectangle { + id: rect + color: "red" + width: 120 + height: 120 + + TapHandler { + onTapped: container.state === '' ? container.state = 'other' : container.state = '' + } + } + states: [ + // This adds a second state to the container where the rectangle is farther to the right + + State { name: "other" + + PropertyChanges { + target: rect + x: 200 + } + } + ] + transitions: [ + // This adds a transition that defaults to applying to all state changes + + Transition { + + // This applies a default NumberAnimation to any changes a state change makes to x or y properties + NumberAnimation { properties: "x,y" } + } + ] + } + //![states] + //![behave] + Item { + width: 320 + height: 120 + + Rectangle { + color: "green" + width: 120 + height: 120 + + // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property + Behavior on x { + + NumberAnimation { + //This specifies how long the animation takes + duration: 600 + //This selects an easing curve to interpolate with, the default is Easing.Linear + easing.type: Easing.OutBounce + } + } + + TapHandler { + onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0 + } + } + } + //![behave] + //![constant] + Item { + width: 320 + height: 120 + + Rectangle { + color: "blue" + width: 120 + height: 120 + + // By setting this SequentialAnimation on x, it and animations within it will automatically animate + // the x property of this element + SequentialAnimation on x { + id: xAnim + // Animations on properties start running by default + running: false + loops: Animation.Infinite // The animation is set to loop indefinitely + NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad } + NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad } + PauseAnimation { duration: 250 } // This puts a bit of time between the loop + } + + TapHandler { + // The animation starts running when you click within the rectangle + onTapped: xAnim.running = true + } + } + } + //![constant] + + //![scripted] + Item { + width: 320 + height: 120 + + Rectangle { + id: rectangle + color: "yellow" + width: 120 + height: 120 + + TapHandler { + // The animation starts running when you click within the rectangle + onTapped: anim.running = true; + } + } + + // This animation specifically targets the Rectangle's properties to animate + SequentialAnimation { + id: anim + // Animations on their own are not running by default + // The default number of loops is one, restart the animation to see it again + + NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 } + + NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 } + } + } + //![scripted] + } +} +//![0] |