Question

I have a control inside a form. This show another control on top of it when a event happend, then it disappear and show the first control.

I wish to have a smooth “slide-in/out” animation like is common in iOS, instead of appear/disappear.

I see that firemonkey have some animation components, but have no clue in how use them.

Answer 1

Look at the TFMXObject.AnimateXXX functions: http://docwiki.embarcadero.com/Libraries/en/FMX.Types.TFmxObject_Functions (TFMXObject is a parent of all FireMonkey controls, so you can use these functions for any control).

A few samples using AnimateFloat:

Panel1.AnimateFloat('Left', -Panel1.Width);
ListBox1.AnimatFloat('Height', 0, 0.5, TAnimationType.atOut, TInterpolationType.itBounce);
Edit1.AnimatFloat('Opacity', 0, 1);

AnimateFloat animates any floating point property. First parameter is the property name (as a string), second the ending value, next the time period (in seconds), which direction to animate (atIn, AtOut), and finally the algorithm to use – see http://docwiki.embarcadero.com/Libraries/en/FMX.Types.TInterpolationType for all the options.

You also got:
AnimateColor (animate a color property);
AnimateFloatDelay (start an animation after a given delay);
AnimateFloatWait (wait until the animation finished – useful for chaining animations).

plus, StartAnimation and StopAnimation for use with animations in a style.