Description of TStyledAnimatedToolbar (and TStyledAnimatedToolButton)

Component	Description
	TStyledAnimatedToolbar is a TStyledToolbar that creates TStyledAnimatedToolButton buttons instead of TStyledToolButton ones.
	TStyledAnimatedToolButton is a TStyledToolButton that can hold a Lottie animation (Skia TSkAnimatedImage) and has the same AutoAnimationTypes / AutoSizeAnimation / AnimationSource properties of the TStyledAnimatedButton.

Unit: Vcl.StyledAnimatedToolbar.pas. It requires Skia4Delphi and the animated packages, see TStyledAnimatedButton and Installation.

Status: in the current sources TStyledAnimatedToolbar is commented out of the component palette registration (packages\Vcl.StyledAnimatedComponentsRegister.pas registers only TStyledAnimatedButton and TStyledAnimatedTaskDialog in the page Styled Animated Components). TStyledAnimatedToolButton is registered as a class (RegisterClass, so it can be streamed in a DFM) and both have a Component Editor, but the toolbar is not installed in the Tool Palette: to use it, create it in code or add it to a form by hand (units in uses, declaration in the form class and DFM object). In the toolbar button the code that positions and shows the animated image (Paint) is commented out, so the animation of a toolbar button is not drawn yet: treat the component as experimental / work in progress. For an animated button that works today use TStyledAnimatedButton.

How it works

• TStyledAnimatedToolbar has no new properties: it only overrides GetStyledToolButtonClass to return TStyledAnimatedToolButton, so every button created by the toolbar (NewButton, the Component Editor verbs) is an animated one. Everything else is inherited from TStyledToolbar.
• TStyledAnimatedToolButton adds the animation properties (see the Reference). Unlike TStyledAnimatedButton, AutoAnimationTypes is empty by default, the animation data is kept in the button itself (AnimationSource, saved in the DFM as AnimationData) and there are no AnimationLoop/AnimationInverse/AnimateOnType properties: use StartAnimation(ALoop, AInverse, AProgress).

Design-time

The Component Editor of the toolbar (context menu on the form, see Component Editor) has the verbs:

• Styled Animated Toolbar Editor... : choose the StyleFamily/StyleClass/StyleAppearance of all the buttons.
• Add StyledAnimatedToolbar Button and Add StyledAnimatedToolbar Separator.
• Project page on GitHub...

The Component Editor of a selected TStyledAnimatedToolButton is the one of the animated button (Styled Button Editor..., Animation Editor...).

Code examples

1. Create an animated toolbar with code

uses
  Vcl.StyledToolbar, Vcl.StyledAnimatedToolbar, Vcl.BootstrapButtonStyles;

var
  LToolbar: TStyledAnimatedToolbar;
  LButton: TStyledToolButton;
begin
  LToolbar := TStyledAnimatedToolbar.Create(Self);
  LToolbar.Parent := Self;
  LToolbar.Align := alTop;
  LToolbar.SetToolbarStyle(BOOTSTRAP_FAMILY, btn_primary, BOOTSTRAP_NORMAL);
  if LToolbar.NewButton(LButton) then
    LButton.Caption := 'Open';
end;

2. Load an animation in a toolbar button

if LToolbar.NewButton(LButton) then
begin
  (LButton as TStyledAnimatedToolButton).LoadAnimationFromFile('..\Animations\add.json');
  (LButton as TStyledAnimatedToolButton).AutoAnimationTypes :=
    [AnimateOnMouseOver, AnimateOnClick];
end;

3. Start the animation by code

with LButton as TStyledAnimatedToolButton do
  if CanPlayAnimation then
    StartAnimation(True);   //loop

4. Fixed animation size

with LButton as TStyledAnimatedToolButton do
begin
  AutoSizeAnimation := False;
  AnimationWidth := 24;
  AnimationHeight := 24;
end;

See Also

• TStyledAnimatedToolbar Reference and TStyledAnimatedToolButton Reference
• TStyledToolbar, TStyledToolbar Reference, Toolbar Demo
• TStyledAnimatedButton