This chapter will reveal why animation in QML is not “decoration,” but a tool for managing attention and creating a sense of naturalness. You’ll discover how to make elements move “correctly” without overloading code and losing performance. Professional developers use this to make interfaces look modern and “magnetic,” while state changes are instantly readable.
Inside — 4 classes of animations (Property/Number/Color/Rotation), Behavior for automatic “beautiful” response to property changes, as well as ParallelAnimation + SequentialAnimation for scenarios like “fell → rotated → waited → returned.” Plus — transitions between states and QtQuick.Particles: from “snowfall” to wind through Gravity.
If you skip this chapter, the next “live” UI will again cost too much — in time and quality.
This chapter includes ready-to-use code examples.
Chapter Self-Check
Why is PropertyAnimation the base element for NumberAnimation, ColorAnimation, and RotationAnimation?Answer
Correct answer: PropertyAnimation provides a universal mechanism for changing any properties over time, while specialized elements provide more efficient implementation for specific data types (numbers, colors, rotation angles).
In what cases is Behavior animation preferable to regular PropertyAnimation?Answer
Correct answer: Behavior is used when you need to automatically animate a property on any change, for example, when an element follows the mouse cursor, whereas PropertyAnimation requires explicit triggering.
What will happen if you place PauseAnimation between two NumberAnimations in SequentialAnimation?Answer
Correct answer: The first animation will complete fully, then the system will wait for the time specified in PauseAnimation, and only after that will the second animation begin, creating a pause effect between actions.
Why are easing curves needed and how do they affect animation perception?Answer
Correct answer: Easing curves control the dynamics of animation speed change (acceleration, deceleration), creating an effect of natural movement, making the interface more responsive and pleasant for the user.
Why does using the State element help separate logic from the graphical interface?Answer
Correct answer: State allows declaratively describing different element configurations as separate named states, instead of imperatively changing properties in code, which improves readability and maintainability.
What’s the difference between specifying specific states in Transition (from: “State1”; to: “State2”) and using a pattern (from: “*”; to: “*”)?Answer
Correct answer: Specific states allow defining unique animation for each transition with different parameters, while the “*” pattern applies the same animation to all transitions between any states.
What is the role of the ParticleSystem element in the particles module and what will happen without it?Answer
Correct answer: ParticleSystem starts a system timer to manage the timeline of all particles; without it, emitters and affectors won’t function as there’s no coordinating center.
Why is the sizeVariation property used in the snowfall example instead of a fixed size?Answer
Correct answer: sizeVariation creates randomly sized snowflakes, imitating a perspective effect (different distances from the viewer), making the simulation more realistic and natural.
How does the Gravity affector change the behavior of already emitted particles?Answer
Correct answer: Gravity applies acceleration force to particles within its action area, causing them to deviate in a specified direction, creating wind or gravitational pull effects.
What will happen if you create a ParallelAnimation with x and y coordinate changes but set different duration values?Answer
Correct answer: Animations will start simultaneously but finish at different times: the shorter one will end earlier, creating an effect of uneven movement along axes, which can be useful for specific trajectories.
Why specify target in PropertyAnimation if the animation is defined inside an element (for example, “NumberAnimation on width”)?Answer
Correct answer: When animation is applied via “on”, target is determined automatically; explicit target specification is only needed when animation is defined outside the target element or applied to multiple elements.
Why does the author warn against excessive use of animation in user interfaces?Answer
Correct answer: Excessive animation distracts user attention, reduces performance, and can cause irritation instead of improving interface perception; animation should be used purposefully to draw attention to important elements.
What is the advantage of using AngleDirection in Emitter compared to directly specifying movement coordinates?Answer
Correct answer: AngleDirection allows declaratively specifying direction and speed through angle and magnitude, as well as adding variations (angleVariation), which simplifies creating natural particle scatter effects.
Practical Assignments
Easy Level
Animated Button with Color Effect
Create a button (Rectangle with text) that smoothly changes color from blue to green when mouse hovers over it, and returns back when cursor leaves. Use ColorAnimation with a 500ms transition time. Also add smooth button size change (scale from 1.0 to 1.1).
Hints: Use the Behavior element for automatic animation on color and scale property changes. Control property values through MouseArea with onEntered and onExited events. Set hoverEnabled: true for the mouse area.
Medium Level
Loading System with States
Develop a loading indicator with three states: “idle” (gray circle), “loading” (blue rotating circle), and “complete” (green checkmark). Create a button to switch between states. Use SequentialAnimation for the “loading” state with infinite rotation, and configure smooth transitions between all states with different easing functions.
Hints: Define three States with different PropertyChanges for color, rotation, and opacity. In transitions, use different types of easing curves (for example, Easing.InOutQuad for transition to loading, Easing.OutBack for complete). For rotation, use RotationAnimation with loops: Animation.Infinite inside the “loading” state.
Hard Level
Interactive Particle System with Controls
Create an advanced firework simulation: on mouse click anywhere in the window, particles of different colors are launched, exploding upward in a fan from the click point. Add three affectors: Gravity (pulls down after liftoff), Age (shortens particle lifespan at a certain height), and Friction (slows particles). Implement a slider to control emission intensity (emitRate) and buttons to switch affector types.
Hints: Use ParticleSystem with ImageParticle and configure colorVariation for multicolored particles. Create an Emitter with enabled: false by default and trigger burst() in the MouseArea onClicked handler. To control emitter position, use mouseX and mouseY. Apply AngleDirection with angleVariation: 360 for fan spread. Create conditional JavaScript logic to switch affectors through the enabled property.
💬 Join the Discussion!
Mastered creating smooth animations in QML? Have questions about choosing between Behavior and PropertyAnimation, or how to optimize particle animation performance?
Share your experiments with affectors, ask about best practices for using easing curves, or help other readers understand states and transitions!