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