TTween and css bindings

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);
begin
  // 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.Distance:=100;
  effect.Duration:=200;
  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;
  LLeftBinding.Tween.Behavior:=TTweenBehavior.tbOscillate;

  // 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;
  LTopBinding.Tween.Behavior:=TTweenBehavior.tbOscillate;

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

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 🙂