Sprite animator

About 3 min read

TwSpriteAnimator · Category: Other

Settings

These settings are in the properties panel on the right while the widget is selected, mostly in the Sprite Animation Settings section. The default value is the value the widget has when it is first added to a page.

Source

Setting	Type	Default	Description
Sprite Preset spritePreset	Custom editor	—	Pick a sheet from the built-in sprite library; image, frame size, grid, frame range and FPS are filled in automatically. State sprites turn Play off and are driven by binding the Frame field to a tag.
Sprite Source src	File	—	Sprite sheet image: all frames of the animation in one image, arranged in a grid.
Auto Detect autoDetect	Checkbox	Off	When the image loads, opens a dialog with the sheet size and the suggested frame size, columns and rows.
Frame Width frameWidth	Number	256	Width of one frame in the sheet in pixels (default 256).
Columns columns	Number	8	Number of frames in one row of the sheet.
Frame Height frameHeight	Number	256	Height of one frame in the sheet in pixels (default 256).
Rows rows	Number	1	Number of frame rows in the sheet; Columns × Rows is the total frame count.

Playback

Setting	Type	Default	Description
Play play	Checkbox	Off	Plays the animation from the start frame; when turned off, the start frame is shown.
Frames Per Second fps	Number	12	Frames per second, 1–120 (default 12); ignored while Use FPS Preset is on.
Use FPS Preset useFpsPreset	Checkbox	Off	Uses the FPS preset instead of the Frames Per Second value.
Loop loop	Checkbox	On	Starts again from the start frame after the end frame; when off, it stops at the end frame.
FPS Preset fpsPreset	Selection	normal	Speed preset: Slow 4, Normal 12, Fast 24, Turbo 60 frames per second. Options: slow Slow, normal Normal, fast Fast, turbo Turbo
Ping Pong pingPong	Checkbox	Off	Plays forward and then backward between the start and end frame; overrides Loop.

Frames

Setting	Type	Default	Description
Start Frame startFrame	Number	0	First frame of the animation, counted from 0.
Manual Frame frame	Number	—	Frame shown while Play is off, counted from 0; useful with a binding to show a state.
End Frame endFrame	Number	—	Last frame of the animation, counted from 0; empty uses the last frame of the sheet.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, to.type, spritePreset, src, frameWidth, frameHeight, columns, rows, fps, fpsPreset, useFpsPreset, play, loop, pingPong, startFrame, endFrame, frame, autoDetect

The style fields of the widget can also be bound as style.<field> (e.g. style.width, style.height, style.left, style.top).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Navigation (To), Bindings (Rules). These sections are described on the Page Editor page.