[solved] animating text color on keypress
-
I'm trying to do something simple that's not working out. I have text that turns from "white" to "yellow" when the user focus it. Now, I want it to flash green briefly when the user changes the value by key press. I thought it would just be:
@
Item
{
Text {
id: value_text;
color: "white";
}ColorAnimation { id: key_press_animation; target: value_text; from: "green"; to: "yellow"; } states: [ State { name: "FOCUS"; when: ... PropertyChanges { target: value_text; color: "yellow"; } } ] Keys.onPressed: { key_press_animation.restart(); }
}
@I am using states and I think that is messing something up. What am I missing?
SOLVED:
Looks like it's just a problem with
ColorAnimation
. Replace it withPropertyAnimation
and it works straight away.@
PropertyAnimation {
property: "color"
id: key_press_animation;
target: value_text;
from: "green";
to: "yellow";
}
@ -
Try something like this. When is the state change ? When condition is not defined.
@ColorAnimation { id : anim ; target : value_txt; from : "white" to: "green"; duration: 2000 property : "color" onStopped: { console.log("ANim done") top.state = "focus" } }@
Here top is the id of element where States are defined.
-
when you are going from first state to second state, do you need to flash the green ? Is that correct ? In that case try using transitions along with states.