Modern applications are more and more moving away from static forms. In a modern interface, widgets and graphical elements are animated and transitioned smoothly. Those effects make your application look good but their main purpose should be to help end-users find out what's going on in their applications. In upcoming Qt versions we’re adding a new Animation Framework that relies upon Qt’s QObject-based architecture. Presentation by Thierry Bastian held during Qt Developer Days 2009. http://qt.nokia.com/developer/learning/elearning

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