Animation of TextInput prompt

[mlapido]

Josh,

This is not so much an issue but a question/request for a suggestion. I would like to animate the TextInput's prompt text to move to the upper left corner of the component and keep it there, as a label, whenever there is content in there. Can you please tell me how should I go about it?

[joshtynjala]

I don't have a good suggestion for you. If you're okay with simply repositioning the prompt without animation, you could probably extend TextInput and override layoutChildren() to position the prompt differently if hasFocus is true. Something like this:

override protected function layoutChildren():void
{
	super.layoutChildren();
	if(hasFocus && prompt != null)
	{
		//reposition the prompt here
	}
}

Getting it to work with animation might be tricky, though.

Another option might be to create a LayoutGroup with a TextInput and Label as children. Use the Label instead of the prompt, and you'll have full control over it without affecting the layout inside of the TextInput.

[mlapido]

Thanks, Josh! I think the second option will suit me better. I'll try it and let you know. But, correct me if I'm wrong, you have been adding some animation abilities to feathers, what are those about?

[joshtynjala]

Yeah, I've added some new ways that you can tell a Feathers component to animate some kind of change to its state. For instance, when the visible property is set to true or false (showEffect/hideEffect), when a component is added or removed from the display list (addedEffect and removeFromParentWithEffect()), when a component receives or loses focus (focusInEffect/focusOutEffect), or when a component is resized or repositioned (resizeEffect/moveEffect).

Additionally, the List component can add animation to an item being added or removed from the data provider (addItemWithEffect() and removeItemWithEffect()).

[mlapido]

Cool, Josh, do you have any example of those effects working?

[joshtynjala]

I'm still working on the supporting documentation, examples, and things.