TStyledAnimatedButton - Technical Reference

Overview

TStyledAnimatedButton is a TStyledButton that shows a Lottie animation (Skia4Delphi TSkAnimatedImage) as its icon. See the TStyledAnimatedButton page for the description, the prerequisites and the examples.

Class Hierarchy

TWinControl
  └─ TCustomStyledButton
      └─ TStyledButton
          └─ TStyledAnimatedButton

The rendering class (GetRenderClass) is TStyledAnimatedButtonRender, a descendant of TStyledButtonRender.

Unit

pascal

Vcl.StyledAnimatedButton

Requires Vcl.Skia, System.Skia (Skia4Delphi) and the helper unit Vcl.SkAnimatedImageHelper (a class helper of TSkAnimatedImage with StartAnimation, StopAnimation, PauseAnimation, ResumeAnimation, InitAnimation, GetLoop/SetLoop, GetInverse/SetInverse, CanPlayAnimation, AnimationRunning, ...). Packages: StyledAnimatedComponents (runtime), dclStyledAnimatedComponents (design-time). Palette page: Styled Animated Components.

Types and constants

Name	Definition	Description
`TAutoAnimationType`	`(AnimateOnMouseOver, AnimateOnClick, AnimateAlways, AnimateOnFocus)`	Events that start the animation
`TAutoAnimationTypes`	`set of TAutoAnimationType`
`TAnimateOnType`	`(AnimateOnButton, AnimateOnImage)`	Area that reacts to the mouse for `AnimateOnMouseOver`
`DEFAULT_ANIM_SIZE`	32	Default `AnimationWidth` / `AnimationHeight`
`DEFAULT_ANIM_MARGIN`	10	Default `AutoSizeAnimationMargin`

Published properties (Object Inspector)

Only the properties added by TStyledAnimatedButton.

Property	Type	Default	Description
`AutoAnimationTypes`	TAutoAnimationTypes	`[AnimateOnMouseOver]`	Events that start the animation. Changing it stops the animation; with `AnimateAlways` it sets `AnimationLoop` to True and starts the animation
`AnimateOnType`	TAnimateOnType	`AnimateOnButton`	With `AnimateOnMouseOver`: the mouse must be over the whole button or only over the animated image
`AnimationSource`	TSkAnimatedImage.TSource	empty	The Lottie data (property editor: Skia Animated Image editor). Stored in the DFM as binary property `AnimationData`
`AutoSizeAnimation`	Boolean	True	The animation takes the smaller side of the button minus `AutoSizeAnimationMargin` on each side
`AutoSizeAnimationMargin`	Integer	10	Margin used by `AutoSizeAnimation` (scaled with the DPI)
`AnimationWidth`	Integer	32	Width of the animation when `AutoSizeAnimation` is False. Assigning it sets `AutoSizeAnimation` to False
`AnimationHeight`	Integer	32	Height of the animation when `AutoSizeAnimation` is False. Assigning it sets `AutoSizeAnimation` to False
`AnimationLoop`	Boolean	False	Plays the animation in loop
`AnimationInverse`	Boolean	False	Plays the animation in reverse

Public properties

Property	Type	Description
`AnimatedImage`	TSkAnimatedImage	The internal Skia component (created on first access). Use it for advanced settings
`Render`	TStyledAnimatedButtonRender	The render object, with `AnimationWidth`, `AnimationHeight`, `AutoSizeAnimation`, `AutoSizeAnimationMargin`

Methods

Method	Description
`constructor CreateStyled(AOwner; AFamily; AClass; AAppearance)`	Creates the button with the given style; the default `AutoAnimationTypes` is `[AnimateOnMouseOver]`
`procedure LoadAnimationFromFile(const AFileName: TFileName)`	Loads a Lottie file
`procedure LoadAnimationFromStream(const AStream: TStream)`	Loads a Lottie stream
`procedure LoadAnimationFromResource(const AResourceName: string)`	Loads a Lottie file linked as `RT_RCDATA` resource of the module (`HInstance`)
`function CanPlayAnimation: Boolean`	True if an animation is loaded and can play
`procedure StartAnimation(ALoop: Boolean = False; AInverse: Boolean = False; AProgress: Double = 0)`	Starts the animation from the `AProgress` position (0..1)
`procedure PauseAnimation` / `ResumeAnimation`	Pause and resume
`procedure StopAnimation`	Stops the animation and shows the last frame (Progress = 1)
`function AnimationIsRunning: Boolean`	True while the animation is playing
`procedure CreateAnimation`	Creates the internal `TSkAnimatedImage` (called automatically)
`procedure Click`	Override: starts the animation if `AnimateOnClick` is in `AutoAnimationTypes`

Events

No events are added: use the events inherited from TStyledButton (OnClick, OnDblClick, ...). A click on the animated image fires the OnClick of the button.

Inherited members (briefly)

All the properties, methods and events of TStyledButton (see its Reference): StyleFamily, StyleClass, StyleAppearance, StyleDrawType, StyleRadius, StyleShadowSize, StyleRoundedCorners, Caption, Images/ImageIndex, ImageAlignment, ImageMargins, ModalResult, Default, Cancel, Action, NotificationBadge, AutoClick/AutoClickDelay, OnClick... The cursor assigned to the button is also assigned to the animated image.

Component Editor and property editor

Item	Description
`TStyledAnimatedButtonComponentEditor`	Verbs: Styled Button Editor..., Animation Editor..., Project page on GitHub... (see Component Editor)
`TAnimatedImageSourcePropertyEditor`	Editor of `AnimationSource` (shows the Skia Animated Image editor)

TStyledAnimatedButton - Technical Reference ​

Overview ​

Class Hierarchy ​

Unit ​

Types and constants ​

Published properties (Object Inspector) ​

Public properties ​

Methods ​

Events ​

Inherited members (briefly) ​

Component Editor and property editor ​

See Also ​