Home > CSS, JavaScript, nodeJS, Object Pascal, OP4JS, Smart Mobile Studio > Creating CSS animations at runtime

Creating CSS animations at runtime

Smart Mobile Studio has a lot of cool features. For instance, did you know that SMS automatically maps your pascal class-names to your css class-names? It quite clever and very effective.

In the example above we animate a glowing, red 12px cloud around the button. It slowly fades into full red, then it fades back out into nothingness.

But despite all the tricks and power in Smart Mobile Studio, a programming system is only as good as its biggest weakness. And while it sounds like a paradox, CSS is Smart’s weakness and strength.

Power to CSS

CSS is fantastic once you really understand what it can do. It can take a while before you fully understand just how awesome the modern browser has become; there is a reason we decided to target the browser like we do – because it’s practically an operative system in its own right.

Tasty but simple effects can play a major role when done right

Tasty but simple effects can play a major role when done right

But while Smart creates HTML elements by code, relieving you of the ultimate boring task of writing HTML structures and tinkering with inconsistencies between browsers — our CSS styles are still a 100% manual affair.

A new take on CSS

The problem with generating CSS from code has been twofold:

  • Injecting CSS rules into an existing stylesheet is very tricky
  • The ability to edit and ship an application with “a theme” trumps any notion of auto generated CSS

Well for the past two versions of Smart we have shipped the product with a stylesheet class. This class basically creates a fresh new style-sheet, and allows you to register rules, effects, backgrounds and whatever you need – at runtime.

I decided to give this class a make-over, basically re-writing it from scratch to take height for Internet Explorer. I also started to tinker with something very exciting, namely an easier way of generating CSS effects in your code.

Generating cool effects is now super easy

Generating cool effects is now super easy

And this is the important part. You don’t want to create ordinary styles by code, that belongs in the standard CSS stylesheet; What you want to control by code is effects programming and custom CSS tailored for controls “on demand” and executed immediately.

First, let us take a look at the CSS generation code:

class function  TSuperStyle.AnimGlow(aFrom,aTo:TColor):String;
var
  mStyles:  TDarthStyleSheet;
  mWriter:  TCSS;
begin
  mStyles:=getStyleSheet;
  if mStyles<>NIL then
  Begin
    result:=w3_GetUniqueObjId;

    mWriter:=TCSS.Create;
    try
      mWriter
        .KeyFrames.inc(result + " ")
        .Enter
          .from
          .enter.BoxShadow(0,0,0,0).leave.CRLF

          .PercentOf(50)
          .Enter.boxShadow(0,0,12,0,aTo).leave.CRLF

          .to
          .enter.BoxShadow(0,0,0,0).leave.CRLF
        .Leave .CRLF;

        mStyles.Add(mWriter.Text);
        mWriter.text:="";

        mWriter
          .inc("." + result + "_player ")
          .enter
            .AnimationName(result)
            .AnimationDuration(2,0)
            .AnimationInfinite
          .leave;
        mStyles.add(mWriter.text);
    finally
      mWriter.free;
    end;
    result:=result + "_player";
  end;
end;

Looks messy right? Well you should see what the code really looks like. You can imagine having to do string-replacement on names, colors and various parameters. The above code is infinitely more flexible than a fixed string. Well, let’s have a look at the CSS rules generated by our code:

@-webkit-keyframes OBJ16 {
  from {
    -webkit-box-shadow: 0px 0px 0px 0px;}
  50% {
    -webkit-box-shadow: 0px 0px 12px 0px #ff0000; }
  to {
    -webkit-box-shadow: 0px 0px 0px 0px;
  }
}

.OBJ16_player {
  -webkit-animation-name: OBJ16;
  -webkit-animation-duration: 2.0s;
  -webkit-animation-iteration-count: infinite;
}

What does this function do? It’s actually very sexy! The original routine registers both the animation – and then a style with the animation active. It also generates a name for the animation automatically (so no conflicts) – and the routine returns the name of the finished style.

With the name in hand, all you have to do to activate the style on an element is:

  w3button1.CSSClasses.Add(mName);

In the example above we animate a glowing, red 12px cloud around the button. It slowly fades into full red, then it fades back out into nothingness. It’s set to repeat forever, so for as long as the style is assigned to the control it remains visually active.

To remove the animation from our button, all we have to do is this:

  w3button1.CSSClasses.Remove(mName);

How cool is that! I’m really looking forward to more complex CSS animations. Perhaps have your forms curl across into view following a super-smooth beziercurve?

Needless to say I am secretly working on the Smart Mobile Studio presentation framework. It will give you complete control over CSS3, from GPU activation to the most complex animations and effects available.

So stay tuned..

Advertisements
  1. April 12, 2015 at 1:01 am

    Hey, maybe there already is a way of doing this, but maybe this is a point that could make SmartMS even better. A “smart linking for CSS” to remove unused styles.

    There’s still a bunch of unused styles though when you compile a SMS project and to achieve a smaller CSS size, an automated step could be a cool addition.

    Pretty much each component could have it’s own file that in your app.css you only have to @import what you are using.

    Best regards.

    • Jon Lennart Aasenden
      April 12, 2015 at 4:02 pm

      That would in some cases bloat the system. As you probably know there are global selectors and local selector, so we would have to copy over the localized properties to each item. So even though less files were included, they would be bigger – resulting in more or less the same size.

      But, we have been experimenting with multiple CSS files. Actually being able to use a CSS file per package would be optimal. That way SMS components would have one file, Statistics would have another, and Darth a third.

      We are also planning to mod the startup sequence so that it loads all resources before the bootstrap() is called. That makes much more sense in a multi-css environment.

  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: