diff options
| author | Mitch Curtis <mitch.curtis@qt.io> | 2025-06-14 09:25:34 +0800 |
|---|---|---|
| committer | Mitch Curtis <mitch.curtis@qt.io> | 2025-06-25 18:52:13 +0800 |
| commit | 5d3f3fdbdb20967763bc8d93fec293fedf0d317f (patch) | |
| tree | 1247ce4a9a781c1973d95b9728aab553e3332854 /src/qml/doc/snippets | |
| parent | ad6d2bc49668a48a585ef596f5230353ae433c94 (diff) | |
Add easingCurve value type and Easing singleton
This allows defining easing curves from QML, which is useful
for e.g. FrameAnimation or use cases that require non-linear
progression.
[ChangeLog][QtQml] Added the easingCurve value type
and Easing singleton.
Fixes: QTBUG-137468
Change-Id: I2f9c4c2269c80c31a70700dd3a2475c53ba8a930
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
Diffstat (limited to 'src/qml/doc/snippets')
| -rw-r--r-- | src/qml/doc/snippets/qml/Easing.qml | 35 | ||||
| -rw-r--r-- | src/qml/doc/snippets/qml/easingCurve.qml | 49 |
2 files changed, 84 insertions, 0 deletions
diff --git a/src/qml/doc/snippets/qml/Easing.qml b/src/qml/doc/snippets/qml/Easing.qml new file mode 100644 index 0000000000..b7a93a1e19 --- /dev/null +++ b/src/qml/doc/snippets/qml/Easing.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { +//! [0] + Rectangle { + id: rect + width: 100 + height: 100 + anchors.centerIn: parent + color: "red" + opacity: 0 + } + + FrameAnimation { + id: frameAnimation + running: true + + property real elapsed // In seconds. + readonly property real duration: 2 // Two seconds. + + onTriggered: { + elapsed += frameTime + // Loop once we reach the duration. + if (elapsed > duration) + elapsed = 0 + + // Increase the opacity from 0 slowly at first, then quickly. + rect.opacity = Easing.valueForProgress(Easing.InQuart, elapsed / duration) + } + } +//! [0] +} diff --git a/src/qml/doc/snippets/qml/easingCurve.qml b/src/qml/doc/snippets/qml/easingCurve.qml new file mode 100644 index 0000000000..3300383be7 --- /dev/null +++ b/src/qml/doc/snippets/qml/easingCurve.qml @@ -0,0 +1,49 @@ +// Copyright (C) 2025 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +//! [import QtQml] +import QtQml as QtQml +//! [import QtQml] +import QtQuick + +Item { +//! [children] + Rectangle { + id: rect + width: 100 + height: 100 + anchors.centerIn: parent + color: "red" + opacity: 0 + } + + FrameAnimation { + id: frameAnimation + running: true + + property real elapsed // In seconds. + readonly property real duration: 2 // Two seconds. +//! [easingCurve new declaration] + readonly property easingCurve easingCurve: Easing.InQuart +//! [easingCurve new declaration] + + onTriggered: { + elapsed += frameTime + // Loop once we reach the duration. + if (elapsed > duration) + elapsed = 0 + + // Increase the opacity from 0 slowly at first, then quickly. + rect.opacity = inQuartCurve.valueForProgress(elapsed / duration) + } + } +//! [children] + +//! [easingCurve structed value type declaration] + readonly property easingCurve inElasticCurve: ({ + type: Easing.InElastic, + amplitude: 4, + period: 3 + }) +//! [easingCurve structed value type declaration] +} |