feat: animated text changes
This commit is contained in:
parent
fa5b312924
commit
a33cd21fc7
3 changed files with 32 additions and 4 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue