bar icons: crossfade animation on icon change
This commit is contained in:
parent
947770a568
commit
9d88d62201
1 changed files with 19 additions and 1 deletions
|
|
@ -8,8 +8,26 @@ Text {
|
|||
property string icon: ""
|
||||
property string tooltip: ""
|
||||
property bool _hovered: false
|
||||
property string _displayIcon: icon
|
||||
property string _pendingIcon: ""
|
||||
|
||||
text: icon
|
||||
text: _displayIcon
|
||||
|
||||
onIconChanged: {
|
||||
if (_crossfade.running) {
|
||||
_pendingIcon = icon;
|
||||
} else {
|
||||
_pendingIcon = icon;
|
||||
_crossfade.start();
|
||||
}
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: _crossfade
|
||||
NumberAnimation { target: root; property: "opacity"; to: 0; duration: 60; easing.type: Easing.InQuad }
|
||||
ScriptAction { script: root._displayIcon = root._pendingIcon }
|
||||
NumberAnimation { target: root; property: "opacity"; to: 1; duration: 100; easing.type: Easing.OutQuad }
|
||||
}
|
||||
color: M.Theme.base05
|
||||
font.pixelSize: M.Theme.fontSize + 1
|
||||
font.family: M.Theme.iconFontFamily
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue