FMX.TSwipeTransitionEffect Animation

Description

This example shows how to use a TSwipeTransitionEffect transition and a TPathAnimation to simulate the turning of a book page.

1. To build and test this example, create a Multi-Device Application - Delphi, then add the next objects to the form:

• A TImage.
• A TSwipeTransitionEffect as a child of the TImage.
• A TSelectionPoint.
• A TPathAnimation as a child of the TSelectionPoint.

2. Load a bitmap to the TImage and select the Target and Back bitmaps for the TSwipeTransitionEffect.

3. Add the following code to the OnClick event handlers of the image:

Code

procedure TForm1.Image1Click(Sender: TObject);
begin
  PathAnimation1.Enabled := False;
  SelectionPoint1.Position.Point := PointF(0,0);
  SelectionPoint1.Opacity := 0;
  PathAnimation1.Parent := SelectionPoint1;
  PathAnimation1.Path.Clear;
// begin Path for mouse pointer
  PathAnimation1.Path.MoveTo(PointF(0,0));
  PathAnimation1.Path.LineTo(PointF(Form1.Width/2,Form1.Height/2));
  PathAnimation1.Path.LineTo(PointF(Form1.Width*2,0));
// end
  PathAnimation1.Duration := 2;
  PathAnimation1.Start;
end;

4. Add the following code to the OnFinish and OnProcess event handlers of the TPathAnimation:

Code

procedure TForm1.PathAnimation1Finish(Sender: TObject);
var
  BitMap : TBitmap;
begin
  BitMap := TBitmap.Create(0,0);
  BitMap.Assign(SwipeTransitionEffect1.Target);
  SwipeTransitionEffect1.Target := Image1.Bitmap;
  Image1.Bitmap.Assign(BitMap);
  SwipeTransitionEffect1.MousePoint := PointF(0,0);
end;

procedure TForm1.PathAnimation1Process(Sender: TObject);
begin
SwipeTransitionEffect1.MousePoint:=SelectionPoint1.Position.Point;
end;

The image will swipe its bitmap on every mouse click. The next image shows the resulting animation:

Uses

• FMX.Filter.Effects.TSwipeTransitionEffect ( fr | de | ja )

• FMX.Controls.TPathAnimation( fr | de | ja )

• FMX.Objects.TSelectionPoint( fr | de | ja )

See Also

• FireMonkey Image Effects
• Transition Demo