One of the new material design effects which is found in Android Lollipop is the Ripple Click Effect. This effect is basically a colored expanding circle that starts at the point of the click or touch in a control. The circle expands until if fills the entire control before disappearing. The circle is also clipped inside of the control. Achieving this effect in Firemonkey is very simple using the built in TCircle and TFloatAnimation components. I have created an example of this effect which is automatically applied (via Duck Typing) to all controls within the current form which have an OnMouseDown event. This ripple click effect works across platforms on Android, IOS, OSX, and Windows. It works by setting the parent of an existing TCircle to the control which was clicked in the OnMouseDown event. The center of the circle is set to the OnMousedown X and Y. TFloatAnimation is used to automatically expand the height and width of the circle until it consumes the entire inside of the control at which point is disappears again. You can customize the circle and the effect to your liking. The demo should also work in Appmethod. Here is some sample source from the demo:
procedure TForm1.FloatAnimation1Finish(Sender: TObject);
begin
Circle1.Visible := False;
end;
procedure TForm1.FloatAnimation1Process(Sender: TObject);
begin
Circle1.Width := Circle1.Height;
Circle1.Position.X := FX-(Circle1.Width/2);
Circle1.Position.Y := FY-(Circle1.Height/2);
end;
procedure TForm1.GlobalMouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Single);
begin
Circle1.Parent := TControl(Sender);
Circle1.Position.X := X-(Circle1.Width/2);
FX := X;
Circle1.Position.Y := Y-(Circle1.Height/2);
FY := Y;
Circle1.Width := 0;
Circle1.Height := 0;
Circle1.Visible := True;
FloatAnimation1.StopValue := Max(TControl(Sender).Width,TControl(Sender).Height)*2;
end;
Download the free demo example with source code of the Material Design Ripple Click Effect for Delphi XE8 Firemonkey.
