Archive

Archive for August 12, 2014

Adding some jQuery like effects

August 12, 2014 Leave a comment

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 🙂