The document outlines enhancements to the animation framework in Qt 4.6, aimed at simplifying the creation of dynamic UIs. It introduces various animation classes, such as qabstractanimation and qpropertyanimation, which provide essential features like synchronization and support for property animations. Additionally, it discusses usage of animations with qgraphicsview, state machines for UI transitions, and emphasizes ongoing improvements in layout animations.

1. Animation Framework
3/4/2010
A step towards modern UIs

2. Leonardo Sobral Cunha
• AA troll
– widgets team
• before, 3 years in INdT
– Nokia Technology Institute in Brazil
– various projects on embedded
• maemo: Canola, QEdje
• together with a big team of designers
1

3. Thierry Bastian
• Software engineer
• Moved to Oslo in 2006
• Member of the widget team
• Participations in
– Animation API
– Multimedia Framework
2

4. Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
3

5. Introduction: animations in Qt < 4.6
• What do we have today in Qt?
– QTimer / QTimeLine
– QGraphicsItemAnimation
– QMainWindow
– Different animations in the QStyles
– ...
4

6. Introduction: why?
“Simplify the creation of dynamic UIs
by improving the support for animations in Qt”
• New feature of Qt 4.6
– part of Qt Kinetic
5

7. Introduction: what is it all about?
• Goals
– Good API
– Simplify animations
– Focus on performance
• Animates
– QWidgets (QObjects)
– QGraphicsItems
6

8. Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
7

9. Animation classes
QAbstractAnimation
QVariantAnimation
QAnimationGroup
QPropertyAnimation
animates
Qobject
…
8

10. Animations: QAbstractAnimation
• base-class for the animations
• completely abstracts the timer/timerEvent
• synchronized
• has all the basic controls: start, stop, pause
9

11. Animations: QAbstractAnimation
• Properties
– Loop count
– Duration
– Direction
– Current time
0 (start) duration (end)
time
looping
10

12. Animations: QVariantAnimation
• QVariant-based
• has startValue and endValue
– and key frames
• does the linear interpolation
– Also allows to set your own interpolator
• easingCurve
• reimplement this class to animate non-QObject classes
11

13. Animations: QPropertyAnimation
• Works on Qt properties
– target property of an object
– picks up automatically the start value
– dynamic properties are also supported
• This is the class you want to use!
QPropertyAnimation *anim = new QPropertyAnimation(item, “opacity”);
anim->setEndValue(0);
anim->start(QPropertyAnimation::DeleteWhenStopped);
12

14. Animations: QEasingCurve
• Property of variant animation
• Many default curves are provided
• You can define your own curves
QPropertyAnimation *anim = new QPropertyAnimation(item, “opacity”);
anim->setEasingCurve(QEasingCurve::InOutSine);
13

15. Animations: QAnimationGroup
• Container for animations
• parallel or sequential
• Duration defined by the content
Sequential group
Parallel Group
Animation
Animation Animation
Animation
14

16. Animations: managing memory
• We use parent-child relationship of QObject
• Group takes ownership of child animations
• Animation can autodelete
– through deletePolicy
QPropertyAnimation *anim = new QPropertyAnimation(item, “opacity”);
anim->setEndValue(0);
anim->start(QPropertyAnimation::DeleteWhenStopped);
15

17. Demo animations
16

18. Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
17

19. Usage: QGraphicsView
• How do we animate QGraphicsItem?
– QGraphicsItem doesn’t have a property system
• Options
– QGraphicsObject
– Inherit from QObject
– Use QGraphicsTransform
18

20. Animations: QGraphicsItem
• New class QGraphicsObject
– inherits from QObject and QGraphicsItem
– got basic properties for animations
• QGraphicsItemAnimation is deprecated
QGraphicsObject *item = …
…
QPropertyAnimation *anim = new QPropertyAnimation(item, “rotation”);
anim->setTargetValue(360);
anim->start(QPropertyAnimation::DeleteWhenFinished);
19

21. Animations : QGraphicsTransform
• For more complex 3D (2.5D) animations
• QObject-based
• Each QGraphicsItem has a list of QGraphicsTransform
QGraphicsItem *item = …
QGraphicsRotation *rotation = new QGraphicsRotation(Qt::YAxis);
item->setTransformations(…);
…
QPropertyAnimation *anim =
new QPropertyAnimation(rotation, “angle”);
anim->setTargetValue(360);
anim->start(QPropertyAnimation::DeleteWhenStopped);
20

22. Usage: QGraphicsView
• Preferred solution is to use QGraphicsObject
– common base class for all graphical items
– we are doing that too!
21

23. Animations : demo
22

24. Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
23

25. Using a statemachine for your UI
• Each state defines a set of property values on items
– position, scale, rotation, opacity, …
• A transition between states can be animated
24

26. States & Transitions
• Define states for components of your application
State 1 State 2
25

27. Animated transitions
addAnimation()
QTransition QAbstractAnimation
addTransition()
QAnimationGroup QPropertyAnimation
animates
QState
QObject
QGraphicsObject
…
26

28. States & Transitions : demo
• Almost all animation examples use states and transitions
27

29. Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
28

30. Conclusion
• Part of 4.6
• Good integration with statemachine API
• Used by declarative UI
• Ongoing work to animate layouts
29

31. Thanks for you attention
Q&A
30