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

Animation Framework: A Step Towards Modern UIs

on

  • 7,944 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
7,944
Views on SlideShare
7,869
Embed Views
75

Actions

Likes
0
Downloads
121
Comments
0

3 Embeds 75

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

Accessibility

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 Animation Framework: A Step Towards Modern UIs Presentation Transcript

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