feat: animated text changes

This commit is contained in:
2 * r + 2 * t 2025-04-29 15:37:29 +10:00
parent fa5b312924
commit a33cd21fc7
3 changed files with 32 additions and 4 deletions

View file

@ -9,7 +9,7 @@ StyledRect {
readonly property color colour: Appearance.colours.pink readonly property color colour: Appearance.colours.pink
animated: true animate: true
clip: true clip: true
MaterialIcon { MaterialIcon {

View file

@ -4,7 +4,7 @@ import QtQuick
Rectangle { Rectangle {
id: root id: root
property bool animated: false property bool animate: false
property bool vertical: false // Convenience property for propagation to children property bool vertical: false // Convenience property for propagation to children
color: "transparent" color: "transparent"
@ -20,7 +20,7 @@ Rectangle {
} }
Behavior on implicitWidth { Behavior on implicitWidth {
enabled: root.animated enabled: root.animate
NumberAnimation { NumberAnimation {
duration: Appearance.anim.durations.normal duration: Appearance.anim.durations.normal
@ -30,7 +30,7 @@ Rectangle {
} }
Behavior on implicitHeight { Behavior on implicitHeight {
enabled: root.animated enabled: root.animate
NumberAnimation { NumberAnimation {
duration: Appearance.anim.durations.normal duration: Appearance.anim.durations.normal

View file

@ -1,9 +1,14 @@
pragma ComponentBehavior: Bound
import "root:/config" import "root:/config"
import QtQuick import QtQuick
Text { Text {
id: root id: root
property bool animate: false
property string animateProp: "opacity"
renderType: Text.NativeRendering renderType: Text.NativeRendering
color: Appearance.colours.text color: Appearance.colours.text
font.family: Appearance.font.family.sans font.family: Appearance.font.family.sans
@ -15,4 +20,27 @@ Text {
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Appearance.anim.curves.standard
} }
} }
Behavior on text {
enabled: root.animate
SequentialAnimation {
Anim {
to: 0
easing.bezierCurve: Appearance.anim.curves.standardAccel
}
PropertyAction {}
Anim {
to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
}
}
component Anim: NumberAnimation {
target: root
property: root.animateProp
duration: Appearance.anim.durations.small
easing.type: Easing.BezierSpline
}
} }