Animation Framework: A Step Towards Modern UIs
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Animation Framework: A Step Towards Modern UIs

on

  • 8,118 views

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 ...

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

Statistics

Views

Total Views
8,118
Views on SlideShare
8,043
Embed Views
75

Actions

Likes
0
Downloads
122
Comments
0

3 Embeds 75

http://www.slideshare.net 52
http://www.develer.com 22
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Animation Framework: A Step Towards Modern UIs Presentation Transcript

  • 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