Your SlideShare is downloading. ×
0
Animation Framework
                            3/4/2010
A step towards modern UIs
Leonardo Sobral Cunha


• AA troll
   – widgets team

• before, 3 years in INdT
   – Nokia Technology Institute in Brazil
...
Thierry Bastian


• Software engineer

• Moved to Oslo in 2006

• Member of the widget team

• Participations in
   – Anim...
Animation Agenda


• Introduction

• Architecture

• Usage
   – QGraphicsView

   – States & Transitions

• Conclusion



...
Introduction: animations in Qt < 4.6


• What do we have today in Qt?
   – QTimer / QTimeLine

   – QGraphicsItemAnimation...
Introduction: why?


              “Simplify the creation of dynamic UIs

         by improving the support for animations...
Introduction: what is it all about?


• Goals
   – Good API

   – Simplify animations

   – Focus on performance

• Animat...
Animation Agenda


• Introduction

• Architecture

• Usage
   – QGraphicsView

   – States & Transitions

• Conclusion



...
Animation classes

                     QAbstractAnimation




                                   QVariantAnimation
      ...
Animations: QAbstractAnimation


• base-class for the animations

• completely abstracts the timer/timerEvent

• synchroni...
Animations: QAbstractAnimation


• Properties
   – Loop count

   – Duration

   – Direction

   – Current time


      0 ...
Animations: QVariantAnimation


• QVariant-based

• has startValue and endValue
   – and key frames

• does the linear int...
Animations: QPropertyAnimation


• Works on Qt properties
    – target property of an object

    – picks up automatically...
Animations: QEasingCurve


• Property of variant animation

• Many default curves are provided

• You can define your own ...
Animations: QAnimationGroup


• Container for animations

• parallel or sequential

• Duration defined by the content

   ...
Animations: managing memory


• We use parent-child relationship of QObject

• Group takes ownership of child animations

...
Demo animations




                  16
Animation Agenda


• Introduction

• Architecture

• Usage
   – QGraphicsView

   – States & Transitions

• Conclusion



...
Usage: QGraphicsView


• How do we animate QGraphicsItem?
  – QGraphicsItem doesn’t have a property system

• Options
  – ...
Animations: QGraphicsItem


• New class QGraphicsObject
    – inherits from QObject and QGraphicsItem

    – got basic pro...
Animations : QGraphicsTransform


• For more complex 3D (2.5D) animations

• QObject-based

• Each QGraphicsItem has a lis...
Usage: QGraphicsView


• Preferred solution is to use QGraphicsObject
   – common base class for all graphical items

   –...
Animations : demo




                    22
Animation Agenda


• Introduction

• Architecture

• Usage
   – QGraphicsView

   – States & Transitions

• Conclusion



...
Using a statemachine for your UI



• Each state defines a set of property values on items
   – position, scale, rotation,...
States & Transitions


• Define states for components of your application




           State 1                          ...
Animated transitions


                        addAnimation()
     QTransition                         QAbstractAnimation
...
States & Transitions : demo


• Almost all animation examples use states and transitions




                             ...
Animation Agenda


• Introduction

• Architecture

• Usage
   – QGraphicsView

   – States & Transitions

• Conclusion



...
Conclusion


• Part of 4.6

• Good integration with statemachine API

• Used by declarative UI

• Ongoing work to animate ...
Thanks for you attention




                    Q&A



                           30
Upcoming SlideShare
Loading in...5
×

Animation Framework: A Step Towards Modern UIs

6,700

Published on

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

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,700
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
139
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Animation Framework: A Step Towards Modern UIs"

  1. 1. Animation Framework 3/4/2010 A step towards modern UIs
  2. 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. 3. Thierry Bastian • Software engineer • Moved to Oslo in 2006 • Member of the widget team • Participations in – Animation API – Multimedia Framework 2
  4. 4. Animation Agenda • Introduction • Architecture • Usage – QGraphicsView – States & Transitions • Conclusion 3
  5. 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. 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. 7. Introduction: what is it all about? • Goals – Good API – Simplify animations – Focus on performance • Animates – QWidgets (QObjects) – QGraphicsItems 6
  8. 8. Animation Agenda • Introduction • Architecture • Usage – QGraphicsView – States & Transitions • Conclusion 7
  9. 9. Animation classes QAbstractAnimation QVariantAnimation QAnimationGroup QPropertyAnimation animates Qobject … 8
  10. 10. Animations: QAbstractAnimation • base-class for the animations • completely abstracts the timer/timerEvent • synchronized • has all the basic controls: start, stop, pause 9
  11. 11. Animations: QAbstractAnimation • Properties – Loop count – Duration – Direction – Current time 0 (start) duration (end) time looping 10
  12. 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. 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. 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. 15. Animations: QAnimationGroup • Container for animations • parallel or sequential • Duration defined by the content Sequential group Parallel Group Animation Animation Animation Animation 14
  16. 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. 17. Demo animations 16
  18. 18. Animation Agenda • Introduction • Architecture • Usage – QGraphicsView – States & Transitions • Conclusion 17
  19. 19. Usage: QGraphicsView • How do we animate QGraphicsItem? – QGraphicsItem doesn’t have a property system • Options – QGraphicsObject – Inherit from QObject – Use QGraphicsTransform 18
  20. 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. 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. 22. Usage: QGraphicsView • Preferred solution is to use QGraphicsObject – common base class for all graphical items – we are doing that too! 21
  23. 23. Animations : demo 22
  24. 24. Animation Agenda • Introduction • Architecture • Usage – QGraphicsView – States & Transitions • Conclusion 23
  25. 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. 26. States & Transitions • Define states for components of your application State 1 State 2 25
  27. 27. Animated transitions addAnimation() QTransition QAbstractAnimation addTransition() QAnimationGroup QPropertyAnimation animates QState QObject QGraphicsObject … 26
  28. 28. States & Transitions : demo • Almost all animation examples use states and transitions 27
  29. 29. Animation Agenda • Introduction • Architecture • Usage – QGraphicsView – States & Transitions • Conclusion 28
  30. 30. Conclusion • Part of 4.6 • Good integration with statemachine API • Used by declarative UI • Ongoing work to animate layouts 29
  31. 31. Thanks for you attention Q&A 30
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×