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