TTween and css bindings
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.
Bindings? What’s that?
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 🙂