Home > OP4JS, Smart Mobile Studio > Adding some jQuery like effects

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 🙂

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: