Makepad's animation system is a declarative animation framework that manages UI animations through the concepts of States and Transitions.
Let's gain a deeper understanding of the entire system through a "typing" animation component.
Let's first look at the Animator's core data structure:
This structure appears simple but is actually a very elegant design:
live_ptr
- Maintains reference to animation definition in Live DSL, allowing Animator to lookup and load animation state definitions when neededstate
- Stores currently executing animation state, including all ongoing interpolation calculationsnext_frame
- Used for scheduling the next animation frame renderThis system works based on state transitions:
[LiveId; 2]
)animate_to()
: Smooth transition to new statecut_to()
: Direct switch to new stateThe animation track (track) system allows for multiple properties to animate independently.