QTXEffects unit for Smart Mobile Studio

A couple of days ago I published a small class-helper for Smart Mobile Studio which implemented a couple of basic, jQuery like, effects that you can apply directly to any control.

Use effects to add that finishing touch

Since then I have spent 5 minutes implementing the “missing” effects. After all, jQuery have a couple of variations on the theme of fading elements. Since Smart Mobile Studio comes with several interesting effect objects out of the box, I decided to wrap all of them in a handy class helper.

Why a class helper?

Whenever you include a unit with a class helper in your forms (or your own units) whatever methods provided by the class helper, becomes available as a part of the target. In this case the target is TW3CustomControl, which means that you can now call the effect methods directly from any control – and they will be applied directly on the component.

How do I use it?

Simple, first include the effect unit (qtxEffects.pas) in your uses-list, then drop a couple of controls on your form – and call one of the functions. Like fadeOut(0.5) for instance. In that case whatever control you chose will fade out in a matter of 0,5 seconds.

If you drop a button on the main-form, double-click it and write the following in the event handler, then the button will gracefully fade into opacity as described above.

if w3button1.visible then
w3button1.fadeout(0.5);

More effects

Since writing CSS3 based effects is clever stuff, I will try to expand the library once in a while when time allows. jQuery have a few methods for moving elements from/to using hardware accelerated CSS – flipping things around etc., which should be fairly easy to replicate. While not substantially important in business applications they have their uses.

Everyone loves a GUI that is alive with elements fading gracefully into view, and elements moving with elegance into position. This is tricky enough to achieve under ordinary Delphi – let alone HTML5 and JavaScript. But thankfully Smart Mobile Studio have a few tricks up it’s sleeve.

Here is the updated library — enjoy!

 

unit qtxEffects;

//#############################################################################
//
//  Unit:       qtxEffects.pas
//  Author:     Jon Lennart Aasenden
//  Company:    Jon Lennart Aasenden LTD
//  Copyright:  Copyright Jon Lennart Aasenden, all rights reserved
//
//  About:      This unit introduces a class helper for TW3CustomControl
//              which provides jQuery like "effects", such as fadeIn/out etc.
//
//  Note:       Simply add this unit to your uses-list, and all controls
//              based on TW3CustomControl will have the new methods.
//
//#############################################################################


interface

uses 
  w3System, w3Components, w3Effects;

type


  TQTXMoveAnimation = class(TW3TransitionAnimation)
  private
    FFromX: Integer;
    FFromY: Integer;
    FToX:   Integer;
    FToY:   Integer;
  protected
    function KeyFramesCSS: String; override;
  public
    Property  FromX:Integer read FFromX write FFromX;
    Property  FromY:Integer read FFromY write FFromY;
    Property  ToX:Integer read FToX write FToX;
    Property  ToY:Integer read FToY write FToY;
  end;


  TQTXEffectsHelper = Class helper for TW3CustomControl
    Procedure fxFadeOut(const Duration:Float);
    Procedure fxFadeIn(const Duration:Float);
    Procedure fxWarpOut(const Duration:Float);
    procedure fxWarpIn(const Duration:Float);
    Procedure fxZoomIn(const Duration:Float);
    Procedure fxZoomOut(const Duration:Float);
    Procedure fxMoveTo(const dx,dy:Integer;
              const Duration:Float);
    Procedure fxMoveBy(const dx,dy:Integer;
              const Duration:Float);
    Procedure fxMoveUp(const Duration:Float);
    Procedure fxMoveDown(const Duration:Float);
  End;

implementation

function TQTXMoveAnimation.KeyFramesCSS: String;
Begin
   Result := Format(#"
      from {
        left: %dpx;
        top:  %dpx;
      } to {
        left: %dpx;
        top: %dpx;
   }",[FFromX,FFromY,FToX,FToY]);
end;

//############################################################################
// TQTXEffectsHelper
//############################################################################

Procedure TQTXEffectsHelper.fxMoveUp(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TQTXMoveAnimation.Create;
  mEffect.duration:=Duration;
  TQTXMoveAnimation(mEffect).fromX:=self.left;
  TQTXMoveAnimation(mEffect).fromY:=self.top;
  TQTXMoveAnimation(mEffect).toX:=self.left;
  TQTXMoveAnimation(mEffect).toY:=0;
  TQTXMoveAnimation(mEffect).Timing:=atEaseInOut;
  mEffect.onAnimationEnds:=Procedure (sender:TObject)
    Begin
      self.top:=0;
      w3_callback( Procedure ()
      Begin
        TW3CustomAnimation(sender).free;
      end, 100);
    end;
  mEffect.execute(self);
end;

Procedure TQTXEffectsHelper.fxMoveDown(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TQTXMoveAnimation.Create;
  mEffect.duration:=Duration;
  TQTXMoveAnimation(mEffect).fromX:=self.left;
  TQTXMoveAnimation(mEffect).fromY:=self.top;
  TQTXMoveAnimation(mEffect).toX:=self.left;
  TQTXMoveAnimation(mEffect).toY:=TW3MovableControl(self.Parent).Height-Self.Height;
  TQTXMoveAnimation(mEffect).Timing:=atEaseInOut;
  mEffect.onAnimationEnds:=Procedure (sender:TObject)
    Begin
      self.top:=TW3MovableControl(self.Parent).Height-Self.Height;;
      w3_callback( Procedure ()
      Begin
        TW3CustomAnimation(sender).free;
      end, 100);
    end;
  mEffect.execute(self);
end;

Procedure TQTXEffectsHelper.fxMoveBy(const dx,dy:Integer;
              const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TQTXMoveAnimation.Create;
  mEffect.duration:=Duration;
  TQTXMoveAnimation(mEffect).fromX:=self.left;
  TQTXMoveAnimation(mEffect).fromY:=self.top;
  TQTXMoveAnimation(mEffect).toX:=self.left + dx;
  TQTXMoveAnimation(mEffect).toY:=self.top + dy;
  TQTXMoveAnimation(mEffect).Timing:=atEaseInOut;
  mEffect.onAnimationEnds:=Procedure (sender:TObject)
    Begin
      self.left:=dx;
      self.top:=dy;
      w3_callback( Procedure ()
      Begin
        TW3CustomAnimation(sender).free;
      end, 100);
    end;
  mEffect.execute(self);
end;

Procedure TQTXEffectsHelper.fxMoveTo(const dx,dy:Integer;const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TQTXMoveAnimation.Create;
  mEffect.duration:=Duration;
  TQTXMoveAnimation(mEffect).fromX:=self.left;
  TQTXMoveAnimation(mEffect).fromY:=self.top;
  TQTXMoveAnimation(mEffect).toX:=dx;
  TQTXMoveAnimation(mEffect).toY:=dy;
  TQTXMoveAnimation(mEffect).Timing:=atEaseInOut;
  mEffect.onAnimationEnds:=Procedure (sender:TObject)
    Begin
      self.left:=dx;
      self.top:=dy;
      w3_callback( Procedure ()
      Begin
        TW3CustomAnimation(sender).free;
      end, 100);
    end;
  mEffect.execute(self);
end;

Procedure TQTXEffectsHelper.fxZoomIn(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TW3ZoomInTransition.Create;
  mEffect.Duration:=Duration;
  mEffect.OnAnimationEnds:=Procedure (Sender:TObject)
    Begin
      w3_callback( Procedure ()
        Begin
          TW3CustomAnimation(sender).free;
        end, 100);
    end;
  self.Visible:=true;
  mEffect.Execute(self);
end;

Procedure TQTXEffectsHelper.fxZoomOut(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TW3ZoomOutTransition.Create;
  mEffect.Duration:=Duration;
  mEffect.OnAnimationEnds:=Procedure (Sender:TObject)
    Begin
      self.Visible:=false;
      w3_callback( Procedure ()
        Begin
          TW3CustomAnimation(sender).free;
        end, 100);
    end;
  mEffect.Execute(self);
end;

Procedure TQTXEffectsHelper.fxWarpOut(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TW3WarpOutTransition.Create;
  mEffect.Duration:=Duration;
  mEffect.OnAnimationEnds:=Procedure (Sender:TObject)
    Begin
      self.Visible:=false;
      w3_callback( Procedure ()
        Begin
          TW3CustomAnimation(sender).free;
        end, 100);
    end;
  mEffect.Execute(self);
end;

procedure TQTXEffectsHelper.fxWarpIn(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TW3WarpInTransition.Create;
  mEffect.Duration:=Duration;
  mEffect.OnAnimationEnds:=Procedure (Sender:TObject)
    Begin
      w3_callback( Procedure ()
        Begin
          TW3CustomAnimation(sender).free;
        end, 100);
    end;
  self.Visible:=true;
  mEffect.Execute(self);
end;

Procedure TQTXEffectsHelper.fxFadeIn(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TW3FadeSlideTransition.Create;
  TW3FadeSlideTransition(mEffect).fromOpacity:=0.0;
  TW3FadeSlideTransition(mEffect).toOpacity:=1.0;
  mEffect.Duration:=Duration;
  mEffect.OnAnimationEnds:=Procedure (Sender:TObject)
    Begin
      w3_callback( Procedure ()
        Begin
          TW3CustomAnimation(sender).free;
        end, 100);
    end;
  self.Visible:=true;
  mEffect.Execute(self);
end;

Procedure TQTXEffectsHelper.fxFadeOut(const Duration:Float);
var
  mEffect: TW3CustomAnimation;
Begin
  mEffect:=TW3FadeSlideTransition.Create;
  TW3FadeSlideTransition(mEffect).fromOpacity:=1.0;
  TW3FadeSlideTransition(mEffect).toOpacity:=0.0;
  mEffect.Duration:=Duration;
  mEffect.OnAnimationEnds:=Procedure (Sender:TObject)
    Begin
      self.Visible:=False;
      w3_callback( Procedure ()
        Begin
          TW3CustomAnimation(sender).free;
        end, 100);
    end;
  mEffect.Execute(self);
end;

end.