Cross-Platform Animation Demo

Embarcadero

2 years ago

Crossplatform animation demo source code | Learn Delphi

Animation is a critical part of modern user interface design. It can add polish and sophistication to your app, and make the user experience more enjoyable. The Animation Demo shows you how to use FireMonkey to create an animated progress spinner. This cross-platform application was built in Delphi using a single code base and single UI for Android, iOS, macOS, Windows, and Linux. With just a few lines of code, you can add this impressive animation to your own apps. Try it out today and see the difference that animations can make!

Download the full cross-platform animation source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

Table of Contents

What is a progress animation in software development?

A progress animation is a commonly used graphical control element that depicts the progress of an operation in software development. In its simplest form, a progress animation consists of a bar that is either empty or filled to represent the progress of the operation. More sophisticated progress animations may also include text or other graphical elements to provide more information about the progress of the operation. Progress animations are often used in conjunction with buttons or other controls to provide feedback to the user about the status of an operation. When used in this way, progress animations can help to improve the usability of software by providing visual cues that guide the user through the use of the software.

Screenshot

What does the source code look like for this animation demo?

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Ani,
  FMX.Objects, FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation;

type
  TForm1 = class(TForm)
<strong>    ActivityCircle: TCircle;
    ActivityArc: TArc;
    ActivityFloatAni: TFloatAnimation;
    ClipCircle: TCircle;</strong>
    MaterialOxfordBlueSB: TStyleBook;
    ToolBar1: TToolBar;
<strong>    ShadowEffect4: TShadowEffect;</strong>
    Label1: TLabel;
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

end.

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,

FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.Ani,

FMX.Objects, FMX.StdCtrls, FMX.Effects, FMX.Controls.Presentation;

type

TForm1 = class(TForm)

<strong> ActivityCircle: TCircle;

ActivityArc: TArc;

ActivityFloatAni: TFloatAnimation;

ClipCircle: TCircle;</strong>

MaterialOxfordBlueSB: TStyleBook;

ToolBar1: TToolBar;

<strong> ShadowEffect4: TShadowEffect;</strong>

Label1: TLabel;

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

end.

Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.