• Guides
  • Navigation
  • UI Editor
  • Events


In the Events Palette, you can adjust the action and sound of the selected event and create frame animations for the event through Timeline Management.

Select a Widget from the Widget Palette on the left and then click "+" in the upper right corner of the Events Palette to add an interactive event for the selected Widget.


Click Add under Events, the Action Settings Palette will pop up, where you can set Action Type, Target Widget, and Animation. To create complex particles, click Timeline Management at the bottom to add a timeline.


Note: The Animation effects set in Timeline Management and Action Settings are mutually exclusive. If an Animation effect is selected for a Widget in Action Settings, the timeline does not take effect on this Widget.


Timeline Management

Through Timeline Management, you can edit using key frames and allow widgets on Canvas to play in an arranged way.


In the Timeline Management window, select a layer for which a frame animation needs to be created and click Add.


In the pop-up window, enter a timeline Name and select Target Widget again, then click Apply to create a frame animation.


Right-click the point in the timeline where you want to add a key frame. In the pop-up menu that is displayed, click Add Key Frame.

N154 import from 'codesandbox-theme-docs'

After selecting a key frame in the timeline and right-clicking the mouse, you can perform the following operations for the selected frame: Remove Key Frame, Copy, and Paste.


ui_edit_timeline_frame: Add a key frame through this icon or through the hotkeys K.

mainwindow_new2_play_an_001: Play the selected animation.

mainwindow2_artistic_effect_setting_play_nml: Pause playback.

![mainwindow2_all rotate2_nml](./icon/mainwindow2_all rotate2_nml.png): Click this button to enable loop playback. Click mainwindow_new2_play_an_001 again to start loop playback. During loop playback, click ![mainwindow2_all rotate2_nml](./icon/mainwindow2_all rotate2_nml.png) to cancel loop playback.

Frames and Frame Rate can be adjusted by entering numerical values.