Upload
qt-project
View
6.527
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
Animation FrameworkA step towards modern UIs 04/12/23
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
2
Thierry Bastian
• Software engineer
• Moved to Oslo in 2006
• Member of the widget team
• Participations in
– Animation API
– Multimedia Framework
3
Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
4
Introduction: animations in Qt < 4.6
• What do we have today in Qt?
– QTimer / QTimeLine
– QGraphicsItemAnimation
– QMainWindow
– Different animations in the QStyles
– ...
5
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
6
Introduction: what is it all about?
• Goals
– Good API
– Simplify animations
– Focus on performance
• Animates
– QWidgets (QObjects)
– QGraphicsItems
7
Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
8
Animation classes
9
Qobject…
animates
QAbstractAnimation
QAnimationGroup
QPropertyAnimation
QVariantAnimation
Animations: QAbstractAnimation
• base-class for the animations
• completely abstracts the timer/timerEvent
• synchronized
• has all the basic controls: start, stop, pause
10
Animations: QAbstractAnimation
• Properties
– Loop count
– Duration
– Direction
– Current time
11
looping
time0 (start) duration (end)
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
12
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!
13
QPropertyAnimation *anim = new QPropertyAnimation(item, “opacity”);anim->setEndValue(0);anim->start(QPropertyAnimation::DeleteWhenStopped);
Animations: QEasingCurve
• Property of variant animation
• Many default curves are provided
• You can define your own curves
14
QPropertyAnimation *anim = new QPropertyAnimation(item, “opacity”);anim->setEasingCurve(QEasingCurve::InOutSine);
Animations: QAnimationGroup
• Container for animations
• parallel or sequential
• Duration defined by the content
15
Sequential group
AnimationAnimation AnimationAnimation
Parallel Group
AnimationAnimation
AnimationAnimation
Animations: managing memory
• We use parent-child relationship of QObject
• Group takes ownership of child animations
• Animation can autodelete
– through deletePolicy
16
QPropertyAnimation *anim = new QPropertyAnimation(item, “opacity”);anim->setEndValue(0);anim->start(QPropertyAnimation::DeleteWhenStopped);
Demo animations
17
Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
18
Usage: QGraphicsView
• How do we animate QGraphicsItem?
– QGraphicsItem doesn’t have a property system
• Options
– QGraphicsObject
– Inherit from QObject
– Use QGraphicsTransform
19
Animations: QGraphicsItem
• New class QGraphicsObject
– inherits from QObject and QGraphicsItem
– got basic properties for animations
• QGraphicsItemAnimation is deprecated
20
QGraphicsObject *item = ……QPropertyAnimation *anim = new QPropertyAnimation(item, “rotation”);anim->setTargetValue(360);anim->start(QPropertyAnimation::DeleteWhenFinished);
Animations : QGraphicsTransform
• For more complex 3D (2.5D) animations
• QObject-based
• Each QGraphicsItem has a list of
QGraphicsTransform
21
QGraphicsItem *item = …QGraphicsRotation *rotation = new QGraphicsRotation(Qt::YAxis);item->setTransformations(…);…QPropertyAnimation *anim = new QPropertyAnimation(rotation, “angle”);anim->setTargetValue(360);anim->start(QPropertyAnimation::DeleteWhenStopped);
Usage: QGraphicsView
• Preferred solution is to use QGraphicsObject
– common base class for all graphical items
– we are doing that too!
22
Animations : demo
23
Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
24
Using a statemachine for your UI
25
• Each state defines a set of property values on
items
– position, scale, rotation, opacity, …
• A transition between states can be animated
States & Transitions
• Define states for components of your application
26
State 1 State 2
Animated transitions
27
QObjectQGraphicsObject
…
animates
addTransition()
addAnimation()
QState
QTransition QAbstractAnimation
QAnimationGroup QPropertyAnimation
States & Transitions : demo
• Almost all animation examples use states and
transitions
28
Animation Agenda
• Introduction
• Architecture
• Usage
– QGraphicsView
– States & Transitions
• Conclusion
29
Conclusion
• Part of 4.6
• Good integration with statemachine API
• Used by declarative UI
• Ongoing work to animate layouts
30
Thanks for you attention
Q & A
31