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 🙂
I have enhanced system.animation.tween unit and created this demo
http://rawgit.com/smartpascal/smartms/master/games/Easing/www/index.html
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));
I already have that, but please wait a bit until the units are finished! But i will have a look at the code now 🙂
The blend is in the new RTL (next update):
Color tween:
var LObj := Tween.add(“clr”);
LObj.Distance:=100;
LObj.StartValue :=0;
LObj.StartTime := now;
LObj.EaseObject := EaseObject;
LObj.Duration := Duration;
LObj.OnUpdated := procedure (const Element:TW3TweenElement)
var
target: TColor;
begin
target := TW3RGBA.Blend(ToColor, FromColor, trunc(LObj.Value));
Control.Background.FromColor(target);
end;
class function TW3RGBA.Blend(cFirst,cSecond:TColor;Percent:Integer):TColor;
Var
Alpha:byte;
r1,g1,b1:byte;
r2,g2,b2:byte;
rw,gw,bw:byte;
begin
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);
end;
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
The tween classes are agnostic so yes, you can write a bridge which applies to sprites 🙂