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
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
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
10. Animations: QAbstractAnimation
• base-class for the animations
• completely abstracts the timer/timerEvent
• synchronized
• has all the basic controls: start, stop, pause
9
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
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
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