Instant CSS3 smoothness
Here is a fun little one-liner which forces the browser to turn all horizontal movement of a component into a CSS3 transformation. Simply add this one-liner to your component’s InitializeObject() method and enjoy:
procedure TMyControl.InitializeObject; begin inherited; w3_setStyle(Handle,w3_CSSPrefix('Transition'), 'left .12s'); end;
What it does is to tell the browser, that all and any changes to the “left” property should be delayed and transitioned to 0.12 seconds. This means that if you do a simple:
Your control (or any control, you can apply this to any TW3MovableObject descendant) will slide from it’s current position – to it’s new position at 100px, within a timeframe of 0.12 seconds. So it will smoothly glide over the screen as opposed to be moved instantly.
Try it out! Make a new visual project, drop a button on the form – and apply the one-liner using the button-handle (W3Button1.handle for instance). Now add an onClick event handler to the button with a self.moveTo(100,100); and see what happens 🙂