Home > JavaScript, Object Pascal, OP4JS, Smart Mobile Studio > TTween and css bindings

TTween and css bindings

Tweens like clockwork

Tweens like clockwork

One thing that’s been missing from Smart’s TTween library is bindings. Well, fret ye no more because the next time you update Smart Mobile Studio you will get two shiny new units. Actually they are old units, they have been on Github for ages – but they will now be included with the RTL.

  • SmartCL.Tween.pas
  • SmartCL.Tween.Effects.pas

Bindings? What’s that?

If you follow the latest JavaScript developments you will know that – most modern tweening libraries can work directly with CSS styles. Meaning, that when you execute a tween – instead of you getting the values back through an event, the binding actually writes the data directly to the CSS style. It also uses translation objects to make sure values are written correctly depending on the datatype.

Well, this is now a part of Smart Mobile Studio’s RTL as well. So now you can do sexy stuff like:

procedure TForm1.W3Button1Click(Sender: TObject);
  // Create a widget tween effect object
  // and target a panel we have on the form
  var effect:=TWidgetEffect.Create(w3panel1);

  // Set some default values. These are copied into each
  // binding, but you can overwrite them (see below)
  // Also note that bindings read from the CSS on start (!)
  effect.Easing := ttQuartInOut;

  // Use requestAnimationFrame API
  effect.TweenEngine.SyncRefresh := true;

  // Bind the "left" css property using a pixel translator
  var LLeftBinding := effect.Bind('left',TCSSBindingType.sbPixels);
  LLeftBinding.Tween.Distance := 100;
  LLeftBinding.Tween.Easing := ttCubeInOut;
  LLeftBinding.Tween.Duration := 600;

  // bind the "top" css property as well
  var LTopBinding := effect.Bind('top',TCSSBindingType.sbPixels);
  LTopBinding.Tween.Distance := 50;
  LTopBinding.Tween.Easing := ttSineInOut;
  LTopBinding.Tween.Duration := 400;

  // and execute both at once
  effect.Execute( procedure (sender:TObject)
      // All done? Destroy the effect instance in 200ms
      TW3Dispatch.DelayedDispatch( procedure ()
          effect := nil;
        end, 200);

This is really super cool and opens up for some awesome effects!
Performing silky smooth rotation is now a matter of just binding to a single CSS property and tweening from 0 to 365.

Color tweening is also fun 🙂

  1. March 31, 2016 at 10:05 pm

    I have enhanced system.animation.tween unit and created this demo

    Unfortunately, I couldn’t find a way to perform color tweening. The idea would be to use color tween in an object, the borderColor from “rgb(255,0,51)” to “rgb(102,204,0)”. I don’t know if this actually would be possible.

    * cough Another thing, /* cough I cannot find the method Blend You’re using //TW3RGBA.Blend(ToColor, FromColor, trunc(LObj.Value));

    • Jon Lennart Aasenden
      April 2, 2016 at 3:07 pm

      I already have that, but please wait a bit until the units are finished! But i will have a look at the code now 🙂

    • Jon Lennart Aasenden
      April 2, 2016 at 3:09 pm

      The blend is in the new RTL (next update):

      Color tween:

      var LObj := Tween.add(“clr”);
      LObj.StartValue :=0;
      LObj.StartTime := now;
      LObj.EaseObject := EaseObject;
      LObj.Duration := Duration;
      LObj.OnUpdated := procedure (const Element:TW3TweenElement)
      target: TColor;
      target := TW3RGBA.Blend(ToColor, FromColor, trunc(LObj.Value));

    • Jon Lennart Aasenden
      April 2, 2016 at 3:10 pm

      class function TW3RGBA.Blend(cFirst,cSecond:TColor;Percent:Integer):TColor;
      percent := TInteger.EnsureRange(percent,0,100);
      alpha := trunc(percent * 2.55);

      r1 := cFirst.GetR;
      g1 := cFirst.GetG;
      b1 := cFirst.GetB;

      r2 := cSecond.GetR;
      g2 := cSecond.GetG;
      b2 := cSecond.GetB;

      rw:=trunc(((r1-r2) * alpha) shr 8 + r2);
      gw:=trunc(((g1-g2) * alpha) shr 8 + g2);
      bw:=trunc(((b1-b2) * alpha) shr 8 + b2);

      result := RGBToColor(rw,gw,bw);

  2. April 1, 2016 at 10:26 pm

    Would be possible binding, apply tweening on a sprite animation which was rendered on canvas using native drawImage method.

    I’ve created a smart short preview http://rawgit.com/smartpascal/smartms/master/games/cup/www/index.html

    I’d like to move the cupguy animation through the screen using tweening (we can apply smart built-in tweening functions on smart component that inherits from TW3MovableControl). I’m using a sprite sheet to animate thisGuy (is a variant);

    Is it possible apply tweening on a variant (THandle)?

    OnPaintView method

    // the cup guy is rendered
    thisGuy.drawImage(Canvas, 1, 1); // thisGuy is a variant

    • Jon Lennart Aasenden
      April 2, 2016 at 3:07 pm

      The tween classes are agnostic so yes, you can write a bridge which applies to sprites 🙂

  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 )

Connecting to %s

%d bloggers like this: