CSS3 effects in Smart Mobile Studio

First, a primer. CSS3 is hardware accelerated, meaning that it’s the GPU that takes care of all the hard work. This results in smooth animations and effects on both desktop and mobile devices.

To show just how easy it is to use CSS3 special effects, here is an example that fades and zooms the forms into view on application startup.

Add the following code to the TForm.InitializeObject() method (automatically created for each form). Remember to add the unit “w3effects” to the uses clause.

 

  FEffect:=TW3WarpInTransition.Create;
  FEffect.OnAnimationBegins:=Procedure (sender:TObject)
    Begin
      writeln('Effect starts'); //log to console
    end;
  FEffect.OnAnimationEnds:=Procedure (sender:TObject)
    Begin
      w3_callback(Procedure ()
        Begin
          FEffect.free;
          FEffect:=NIL;
          writeln('Effect object released'); //log to console
        end,
        1000);
      writeln('Effect finished'); //log to console
    end;
  FEffect.Duration:=1.0; //seconds the effect should last
  FEffect.Execute(self);

And voila you have a cool effect when you app starts!

As you can see from the example, I have populated both the start event and finished event. You don’t really need to do anything in the OnAnimationBegins event. I just log to the console that the effect is starting.

The OnAnimationEnds() event is a bit special. Here I use the “w3_callback” function to invoke an anonymous procedure 1000 ms later, and at that point the effect object is released. W3_Callback is very handy because it allows you to think in terms of “Do this later, but right now continue”. Which can be quite new to all of us, since we are used to Delphi – which is completely linear (except for threads and timers).

Also, a lot of people ask if we support jQuery – the answer is yes, but we also have to ask “why do you want that?“. There is nothing jQuery does that we don’t do better, and with the normal parent/child component model our RTL uses (same as VCL and FMX) — there is no point querying the DOM for sub-elements (which is what jQuery does). Just use a list. jQuery is not a magic effects library – but (as the name implies) a query language to locate and alter groups of tags in a document or sub-element.

The only possible use I can imagine for using jQuery with Smart Pascal, is if you call a JSON-RPC service which returns an unknown number of items back. But it would be a very poor service which doesn’t include the result count in the header.

Take a look at the w3effects unit, it’s a snap to make your own effects as well 🙂