From Clomosy Docs

AComponent : Specifies the parent of the object to be defined.

xName : The name of the defined component should be written.

It is a component used to create animations. This component displays a series of bitmaps (images) in a specific sequence to animate them. It is commonly used in mobile and desktop applications to easily manage and apply graphic animations.

With TclBitmapListAnimation, you can define bitmap sequences to be played at a specific speed, adjust looping settings, and control when the animation starts and ends. This component is especially useful when you want to add visual effects or animated graphics within the user interface.

Feature Use of Definition
TclBitmapListAnimation Animation1 : TclBitmapListAnimation; A variable belonging to the TclBitmapListAnimation class is created.
AddNewBitmapListAnimation Animation1 = Form1.AddNewBitmapListAnimation(circle1,'Animation1'); A new TclBitmapListAnimation is added to the form.
Enabled Animation1.Enabled = True; The animation activation process is performed. The default value of the animation is defined as False. To enable access, it must be set to True.
AnimationBitmap Animation1.AnimationBitmap.LoadFromFile('https://clomosy.com/demos/beardance_1.png'); The animation image is added to the object by specifying the file path.
AnimationCount Animation1.AnimationCount = 6; The total number of images in the animation is specified. In the example, since there are 6 images, the value should be set to 6.
AnimationRowCount Animation1.AnimationRowCount = 2; The number of rows in the image specified as the animation graphic is defined. In the example, since the image is in a 3x2 matrix format, the number of rows is specified as 2.
Delay Animation1.Delay = 0; The duration before the animation effect starts is set.
Duration Animation1.Duration = 0.75; It is used to specify the duration between each animation image. As the duration decreases, the animation speed increases. In the example, since there are 6 images, the specified duration will be applied between each of the 6 images.
Stop Animation1.Stop; The running animation is stopped.
Start Animation1.Start; The animation is started.
AutoReverse Animation1.AutoReverse = True; To make the animation reverse direction after reaching the end, the AutoReverse function should be set to True. This creates a smoother animation effect, but in animations like walking, it makes the character walk forward and backward alternately.
Loop Animation1.Loop = True; It puts the animation in an infinite loop. When set to False, the animation runs only once and then stops.

Example

var
  Form1:TclForm;
  animation1:TclBitmapListAnimation;
  circle1: TclCircle; 
{
  Form1 = TclForm.Create(Self);
  Form1.AddAssetFromUrl('https://clomosy.com/demos/beardance_1.png');
  circle1 = Form1.AddNewCircle(Form1, 'circle1');
  circle1.Fill.Kind = fbkBitmap;
  circle1.Fill.Bitmap.WrapMode = fbwmTileStretch;
  circle1.Width = 100; 
  circle1.Height = 100;
  circle1.Stroke.Thickness = 1;
  animation1 = Form1.AddNewBitmapListAnimation(circle1,'animation1'); 
  animation1.AnimationBitmap.LoadFromFile(clomosy.appfilespath + '/beardance_1.png');
  
  animation1.Stop; 
  animation1.AnimationCount = 6;
  animation1.AnimationRowCount = 2;
  animation1.Delay = 0;
  animation1.Duration = 0.75;
  animation1.AutoReverse = True;
  animation1.Enabled = True;
  animation1.Loop = True;
  animation1.Start;
  Form1.Run;
}

See Also