aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/animation
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/animation')
-rw-r--r--examples/quick/animation/animation.qrc1
-rw-r--r--examples/quick/animation/basics/property-animation.qml1
-rw-r--r--examples/quick/animation/behaviors/FocusRect.qml115
-rw-r--r--examples/quick/animation/behaviors/SideRect.qml7
-rw-r--r--examples/quick/animation/behaviors/behavior-example.qml43
-rw-r--r--examples/quick/animation/behaviors/tvtennis.qml9
-rw-r--r--examples/quick/animation/behaviors/wigglytext.qml3
-rw-r--r--examples/quick/animation/doc/src/animation.qdoc2
-rw-r--r--examples/quick/animation/easing/easing.qml29
-rw-r--r--examples/quick/animation/pathanimation/pathanimation.qml1
-rw-r--r--examples/quick/animation/pathinterpolator/pathinterpolator.qml1
-rw-r--r--examples/quick/animation/states/states.qml1
12 files changed, 165 insertions, 48 deletions
diff --git a/examples/quick/animation/animation.qrc b/examples/quick/animation/animation.qrc
index d4e78c82f0..2d88c03007 100644
--- a/examples/quick/animation/animation.qrc
+++ b/examples/quick/animation/animation.qrc
@@ -9,6 +9,7 @@
<file>basics/color-animation.qml</file>
<file>basics/property-animation.qml</file>
<file>behaviors/behavior-example.qml</file>
+ <file>behaviors/FocusRect.qml</file>
<file>behaviors/SideRect.qml</file>
<file>behaviors/tvtennis.qml</file>
<file>behaviors/wigglytext.qml</file>
diff --git a/examples/quick/animation/basics/property-animation.qml b/examples/quick/animation/basics/property-animation.qml
index a764c395ee..8d640c9dda 100644
--- a/examples/quick/animation/basics/property-animation.qml
+++ b/examples/quick/animation/basics/property-animation.qml
@@ -48,6 +48,7 @@
**
****************************************************************************/
+import QtQml 2.0
import QtQuick 2.0
Item {
diff --git a/examples/quick/animation/behaviors/FocusRect.qml b/examples/quick/animation/behaviors/FocusRect.qml
new file mode 100644
index 0000000000..5188919606
--- /dev/null
+++ b/examples/quick/animation/behaviors/FocusRect.qml
@@ -0,0 +1,115 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of The Qt Company Ltd nor the names of its
+** contributors may be used to endorse or promote products derived
+** from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+ id: focusRect
+ property string text
+
+ x: 62
+ y: 75
+ width: 75
+ height: 50
+ radius: 6
+ border.width: 4
+ border.color: "white"
+ color: "firebrick"
+
+ // Set an 'elastic' behavior on the focusRect's x property.
+ Behavior on x {
+ NumberAnimation {
+ easing.type: Easing.OutElastic
+ easing.amplitude: 3.0
+ easing.period: 2.0
+ duration: 300
+ }
+ }
+
+ //! [0]
+ // Set an 'elastic' behavior on the focusRect's y property.
+ Behavior on y {
+ NumberAnimation {
+ easing.type: Easing.OutElastic
+ easing.amplitude: 3.0
+ easing.period: 2.0
+ duration: 300
+ }
+ }
+ //! [0]
+
+ Text {
+ id: focusText
+ text: focusRect.text
+ anchors.centerIn: parent
+ color: "white"
+ font.pixelSize: 16
+ font.bold: true
+
+ // Set a behavior on the focusText's x property:
+ // Set the opacity to 0, set the new text value, then set the opacity back to 1.
+ Behavior on text {
+ SequentialAnimation {
+ NumberAnimation {
+ target: focusText
+ property: "opacity"
+ to: 0
+ duration: 150
+ }
+ NumberAnimation {
+ target: focusText
+ property: "opacity"
+ to: 1
+ duration: 150
+ }
+ }
+ }
+ }
+}
diff --git a/examples/quick/animation/behaviors/SideRect.qml b/examples/quick/animation/behaviors/SideRect.qml
index 8b37a6a0ca..19c0528054 100644
--- a/examples/quick/animation/behaviors/SideRect.qml
+++ b/examples/quick/animation/behaviors/SideRect.qml
@@ -53,6 +53,7 @@ import QtQuick 2.0
Rectangle {
id: myRect
+ property FocusRect focusItem
property string text
width: 75; height: 50
@@ -64,9 +65,9 @@ Rectangle {
anchors.fill: parent
hoverEnabled: true
onEntered: {
- focusRect.x = myRect.x;
- focusRect.y = myRect.y;
- focusRect.text = myRect.text;
+ myRect.focusItem.x = myRect.x;
+ myRect.focusItem.y = myRect.y;
+ myRect.focusItem.text = myRect.text;
}
}
}
diff --git a/examples/quick/animation/behaviors/behavior-example.qml b/examples/quick/animation/behaviors/behavior-example.qml
index 1d07e6bb90..43ca31f185 100644
--- a/examples/quick/animation/behaviors/behavior-example.qml
+++ b/examples/quick/animation/behaviors/behavior-example.qml
@@ -64,67 +64,34 @@ Rectangle {
SideRect {
id: leftRect
+ focusItem: focusRect
anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.left }
text: "Left"
}
SideRect {
id: rightRect
+ focusItem: focusRect
anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.right }
text: "Right"
}
SideRect {
id: topRect
+ focusItem: focusRect
anchors { verticalCenter: parent.top; horizontalCenter: parent.horizontalCenter }
text: "Top"
}
SideRect {
id: bottomRect
+ focusItem: focusRect
anchors { verticalCenter: parent.bottom; horizontalCenter: parent.horizontalCenter }
text: "Bottom"
}
-
- Rectangle {
+ FocusRect {
id: focusRect
-
- property string text
-
- x: 62; y: 75; width: 75; height: 50
- radius: 6
- border.width: 4; border.color: "white"
- color: "firebrick"
-
- // Set an 'elastic' behavior on the focusRect's x property.
- Behavior on x {
- NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
- }
-
- //! [0]
- // Set an 'elastic' behavior on the focusRect's y property.
- Behavior on y {
- NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
- }
- //! [0]
-
- Text {
- id: focusText
- text: focusRect.text
- anchors.centerIn: parent
- color: "white"
- font.pixelSize: 16; font.bold: true
-
- // Set a behavior on the focusText's x property:
- // Set the opacity to 0, set the new text value, then set the opacity back to 1.
- Behavior on text {
- SequentialAnimation {
- NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
- NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 }
- }
- }
- }
}
}
}
diff --git a/examples/quick/animation/behaviors/tvtennis.qml b/examples/quick/animation/behaviors/tvtennis.qml
index 89d912777a..261f603de6 100644
--- a/examples/quick/animation/behaviors/tvtennis.qml
+++ b/examples/quick/animation/behaviors/tvtennis.qml
@@ -116,6 +116,13 @@ Rectangle {
Rectangle { color: "#1e1b18"; x: page.width/2+50; y: 10; width: 20; height: 40 }
Repeater {
model: page.height / 20
- Rectangle { color: "#328930"; x: page.width/2-5; y: index * 20; width: 10; height: 10 }
+ Rectangle {
+ required property int index
+ color: "#328930"
+ x: page.width / 2 - 5
+ y: index * 20
+ width: 10
+ height: 10
+ }
}
}
diff --git a/examples/quick/animation/behaviors/wigglytext.qml b/examples/quick/animation/behaviors/wigglytext.qml
index cc2e086b51..81d4a8aef9 100644
--- a/examples/quick/animation/behaviors/wigglytext.qml
+++ b/examples/quick/animation/behaviors/wigglytext.qml
@@ -48,6 +48,7 @@
**
****************************************************************************/
+import QtQml 2.0
import QtQuick 2.0
Rectangle {
@@ -58,7 +59,7 @@ Rectangle {
width: 320; height: 480; color: "#474747"; focus: true
- Keys.onPressed: {
+ Keys.onPressed: (event) => {
if (event.key == Qt.Key_Delete || event.key == Qt.Key_Backspace)
container.remove()
else if (event.text != "") {
diff --git a/examples/quick/animation/doc/src/animation.qdoc b/examples/quick/animation/doc/src/animation.qdoc
index 578fb4b849..97a574d768 100644
--- a/examples/quick/animation/doc/src/animation.qdoc
+++ b/examples/quick/animation/doc/src/animation.qdoc
@@ -60,7 +60,7 @@
\section1 Behaviors
\e Behaviors uses behaviors to move a rectangle to where you click.
- \snippet animation/behaviors/behavior-example.qml 0
+ \snippet animation/behaviors/FocusRect.qml 0
\section1 Wiggly Text
diff --git a/examples/quick/animation/easing/easing.qml b/examples/quick/animation/easing/easing.qml
index 6db5599a66..f443486141 100644
--- a/examples/quick/animation/easing/easing.qml
+++ b/examples/quick/animation/easing/easing.qml
@@ -48,6 +48,8 @@
**
****************************************************************************/
+import QtQml 2.15
+import QtQml.Models 2.15
import QtQuick 2.0
Rectangle {
@@ -107,9 +109,14 @@ Rectangle {
id: delegate
Item {
+ id: delegateInstance
+ required property string name;
+ required property int type;
+ required property color ballColor;
+
height: 56; width: window.width
- Text { text: name; anchors.centerIn: parent; color: "White" }
+ Text { text: parent.name; anchors.centerIn: parent; color: "White" }
Rectangle {
id: slot1; color: "#121212"; x: 30; height: 46; width: 46
@@ -137,12 +144,26 @@ Rectangle {
states : State {
name: "right"
- PropertyChanges { target: rect; x: window.width - 76; color: ballColor }
+ PropertyChanges {
+ target: rect;
+ x: window.width - 76;
+ color: delegateInstance.ballColor
+ }
}
transitions: Transition {
- NumberAnimation { properties: "x"; easing.type: type; easing.bezierCurve: getBezierCurve(name); duration: 1000 }
- ColorAnimation { properties: "color"; easing.type: type; easing.bezierCurve: getBezierCurve(name); duration: 1000 }
+ NumberAnimation {
+ properties: "x"
+ easing.type: delegateInstance.type
+ easing.bezierCurve: window.getBezierCurve(delegateInstance.name)
+ duration: 1000
+ }
+ ColorAnimation {
+ properties: "color"
+ easing.type: delegateInstance.type
+ easing.bezierCurve: window.getBezierCurve(delegateInstance.name)
+ duration: 1000
+ }
}
}
}
diff --git a/examples/quick/animation/pathanimation/pathanimation.qml b/examples/quick/animation/pathanimation/pathanimation.qml
index b98fbebefc..ae96b32680 100644
--- a/examples/quick/animation/pathanimation/pathanimation.qml
+++ b/examples/quick/animation/pathanimation/pathanimation.qml
@@ -48,6 +48,7 @@
**
****************************************************************************/
+import QtQml 2.0
import QtQuick 2.0
Rectangle {
diff --git a/examples/quick/animation/pathinterpolator/pathinterpolator.qml b/examples/quick/animation/pathinterpolator/pathinterpolator.qml
index 0c0d7bad46..07a82fc916 100644
--- a/examples/quick/animation/pathinterpolator/pathinterpolator.qml
+++ b/examples/quick/animation/pathinterpolator/pathinterpolator.qml
@@ -48,6 +48,7 @@
**
****************************************************************************/
+import QtQml 2.0
import QtQuick 2.0
Rectangle {
diff --git a/examples/quick/animation/states/states.qml b/examples/quick/animation/states/states.qml
index 498fb6867c..5ff8e5318c 100644
--- a/examples/quick/animation/states/states.qml
+++ b/examples/quick/animation/states/states.qml
@@ -48,6 +48,7 @@
**
****************************************************************************/
+import QtQml 2.0
import QtQuick 2.0
Rectangle {
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-27 09:58:41 +0000