Adding some jQuery like effects
jQuery have some interesting automated CSS3 effects, such as “fadeOut” and “fadeIn”, which makes it a snap to.. well, smoothly make things appear and disappear. While not exactly vital to the internal workings of a mobile app, these small tidbits do help make things look more professional and polished.
Replicating those under Smart Pascal is very easy. If you take a look at the w3effects.pas unit you will find several CSS3 effect objects to play with. To make effects a part of all TW3CustomControl based elements, simply make a class helper for it- and bob’s your uncle! Like this:
type TW3EffectsHelper = Class helper for TW3CustomControl public Procedure FadeOut(const Duration:Float); Procedure FadeIn(const Duration:Float); End; implementation Procedure TW3EffectsHelper.FadeIn(const Duration:Float); var mEffect: TW3WarpInTransition; Begin mEffect:=TW3WarpInTransition.Create; mEffect.Duration:=Duration; mEffect.OnAnimationEnds:=Procedure (Sender:TObject) Begin w3_callback( Procedure () Begin TW3WarpInTransition(sender).free; end, 500); end; self.Visible:=True; mEffect.Execute(self); end; Procedure TW3EffectsHelper.FadeOut(const Duration:Float); var mEffect: TW3WarpOutTransition; Begin mEffect:=TW3WarpOutTransition.Create; mEffect.Duration:=Duration; mEffect.OnAnimationEnds:=Procedure (Sender:TObject) Begin self.Visible:=False; w3_callback( Procedure () Begin TW3WarpOutTransition(sender).free; end, 500); end; mEffect.Execute(self); end;
If you save this in its own unit – then whenever you include that unit, all TW3CustomControls will have the methods FadeOut and FadeIn (actually, im using the “Warp” effects here). See how nice Object Orientation is?
Using the code is as simple as:
if w3Button2.visible then w3button2.fadeout(0.3) else w3button2.fadeIn(0.3);
The effect objects will release themselves (notice the w3_callback in the event-handler). So it’s a fire and forget snippet 🙂