Qt Animation


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Qt Animation

  1. 1. Qt Animation William.L 2010-05-19 wiliwe@gmail.com
  2. 2. Outline What is animation? Timer Timeline Animation Framework State Machine Framework GraphicsView Framework
  3. 3. What is animation? A series of pictures, each of which is shown for a fixed period
  4. 4. Timer (1/2) Class – QTimer Provides repetitive and single-shot timers Emit the timeout() signal at constant intervals. Usage Create a QTimer Connect its timeout() signal to the appropriate slots Call start() with constant interval(in millisecond) parameter From then on it will emit the timeout() signal at constant intervals. QTimer *timer = new QTimer(this); connect(timer, SIGNAL(timeout()), this, SLOT(doSomethingWhenTimeout())); timer-start(1000);
  5. 5. Timer (2/2) Example Timer-Button A QPushButton moving between two points
  6. 6. Timeline (1/3) Class – QTimeLine Introduced in Qt 4.2 Most commonly used to animate a GUI control by calling a slot periodically. Usage Construct a QTimeLine object with duration value in milliseconds The duration describes for how long the animation will run. Set a suitable frame range by calling setFrameRange(). Connect the frameChanged() signal to a suitable slot in the widget you wish to animate. Ex : call setValue() in QProgressBar Finally calling start(), QTimeLine will enter Running state When done, QTimeLine enters NotRunning state, and emits finished().
  7. 7. Timeline (2/3) Usage // Construct a 1-second(1000ms) timeline with a frame range of 0 - 100 QTimeLine *timeLine = new QTimeLine (1000, Parent); timeLine-setFrameRange (0, 100); connect ( timeLine, SIGNAL(frameChanged(int)), widget, SLOT(Widget-Slot()) );
  8. 8. Timeline (3/3) Other Methods setLoopCount() Holds the number of times the timeline should loop before it's finished. 0 means that the timeline will loop forever. setUpdateInterval() Holds the time in milliseconds between each time QTimeLine updates its current time Default is 40ms (e.g. 25 frames per second) setCurveShape() Holds the shape of the timeline curve (how the timeline’s velocity change) Default is EaseInOutCurve Example Timeline-Progressbar Use timeline to increase the progress of the progress bar.
  9. 9. Animation Framework (1/5) Introduced in 4.6 Part of the Kinetic project Makes it easy to animate QObjects, including QWidgets, by allowing Qt properties to be animated. Animations are controlled using Easing Curves and can be grouped together.
  10. 10. Animation Framework (2/5) Perform animation of a Qt property (color, size, location, etc.) QPropertyAnimation class Containers for animating animations together QSequentialAnimationGroup class Contains animations are animating in sequence QParallelAnimationGroup class Contains animations are animating in parallel
  11. 11. Animation Framework (3/5) Usage Create a widget instance wanted to be animated. Create a QPropertyAnimation instance passed widget instance and the widget’s property name wanted to be animated Set animation duration Set animated widget’s star/end property value through QPropertyAnimation methods, setStartValue() / setEndValue() Call QPropertyAnimation’s start() method to start animating QPropertyAnimation *animation = new QPropertyAnimation(Widget, geometry); animation-setDuration(10000); // 10 seconds animation-setStartValue(QRect(250, 250, 100, 30)); animation-setEndValue(QRect(500, 450, 100, 30)); animation-start();
  12. 12. Animation Framework (4/5) Fine Control setKeyValueAt (step, value) Creates a key frame at the given step with the given value. The given step must be in the range 0 to 1. QPropertyAnimation *animation = new QPropertyAnimation(Widget, geometry); animation-setDuration(10000); // 10 seconds animation.setKeyValueAt(0, QRect(250, 250, 100, 30)); animation.setKeyValueAt(0.25, QRect(250, 450, 100, 30)); animation.setKeyValueAt(0.5, QRect(500, 450, 100, 30)); animation.setKeyValueAt(0.75, QRect(500, 250, 100, 30)); animation.setKeyValueAt(1, QRect(250, 250, 100, 30)); animation-start();
  13. 13. Animation Framework (5/5) Example AnimFmwk-BounceEasyCurve-ParalSequ Three buttons animating in sequential and parallel animations with easing curve AnimFmwk-SetKeyValue An animating button controlled by setKeyValueAt()
  14. 14. Qt State Machine Framework (1/7) Classes – QStateMachine, QState, QFinalState, QSignalTransition For creating and executing state graphs. Provides an API and execution model that can be used to effectively embed the elements and semantics of statecharts in Qt applications. Qt's event system is used to drive the state machines. The animation framework also plugs into the new Qt state machine by allowing an animation to be played when transitions are triggered.
  15. 15. Qt State Machine Framework (2/7) Components QStateMachine Manages a set of states and transitions Hierarchical Use the addState() function to add a top-level state(QState) to the state machine. Before the machine can be started, use setInitialState() method to set the initial state Call start() method to start the state machine The started() signal is emitted when the initial state is entered Call stop() to stop the state machine explicitly S1 S1-1 S1-2 S2
  16. 16. Qt State Machine Framework (3/7) Components QState Represents a general-purpose state for QStateMachine Can have child states Can have transitions to other states Use addTransition(sender,signal,target-state) method to add a transition, this will return a QSignalTransition object Call addAnimation() of the returned QSignalTransition object and pass a QPropertyAnimation object to create a transition animation QFinalState Represents a final state Used to communicate that a QStateMachine has finished its work finished() signal will be emitted when entering the final state
  17. 17. Qt State Machine Framework (4/7) Components QSignalTransition Provides a transition based on a Qt signal.
  18. 18. Qt State Machine Framework (5/7)
  19. 19. Qt State Machine Framework (6/7) Usage QPushButton button(StateMachine Button); button.show(); QStateMachine machine; QState *state1 = new QState(); state1-assignProperty(button, geometry, QRect(200, 200, 100, 100)); QState *state2 = new QState(); state2-assignProperty(button, geometry, QRect(450, 450, 100, 100)); QFinalState *state3 = new QFinalState(); QSignalTransition *transition1 = state1-addTransition(button, SIGNAL(clicked()), state2); transition1-addAnimation(new QPropertyAnimation(button, geometry)); state2-addTransition(button, SIGNAL(clicked()), state3); machine.addState(state1); machine.addState(state2); machine.addState(state3); QObject::connect(machine, SIGNAL(finished()),QApplication::instance(), SLOT(quit())); machine.setInitialState(state1); machine.start();
  20. 20. Qt State Machine Framework (7/7) Example StateMachine-AnimButton A QPushButton moves and changes its states when it is pressed. When reaching final state, the application will quit.
  21. 21. GraphicsView Framework (1/8) Introduced in Qt 4.2 Replaced its predecessor, QCanvas Item-based Provides A surface(scene) for managing and interacting with a large number of custom-made 2D graphical items A view widget for visualizing the items, with support for zooming and rotation. Items are varying geometric shapes(rectangle, line, circle, etc.)
  22. 22. GraphicsView Framework (2/8) Scene(Canvas) Line item Text item Rectangle item View Vertical Scrollbar Thumb Horizontal Scrollbar Thumb Ellipse item The dash-line rectangle is the visible area to human
  23. 23. GraphicsView Framework (3/8) Components The Scene - QGraphicsScene Serves as a container for QGraphicsItem objects Manages a large number of items Propagating events from QGraphicsView to each item Managing item state, such as item selection and focus.
  24. 24. GraphicsView Framework (4/8) Components The View - QGraphicsView Provides the view widget To visualize the contents of a scene It is a scroll area Can attach several views to the same scene provide several viewports into the same data set. Receives input events from the keyboard and mouse, and translates these to scene events
  25. 25. GraphicsView Framework (5/8) Components The Item – QGraphicsItem The base class for graphical items in a scene Detect mouse events Grab keyboard input focus Drag Drop Grouping Collision detection
  26. 26. GraphicsView Framework (6/8) Comparison between GraphicsView framework and Clutter Clutter Stage GraphicsView Framework GraphicsScene The place where visual elements exist (canvas) Visual Element GraphicsItem Actor Represnetation Viewport GraphicsView Gtk_Clutter_Viewport
  27. 27. GraphicsView Framework (7/8) Usage Create a QGraphicsScene object Add objects of QGraphicsItem to the QGraphicsScene object using addXXX() method, where “XXX” means the type of graphics item. Create a QGraphicsView object and set the created QGraphicsScene object with the method setScene() Finally, let QGraphicsView object be visible by calling show() method. Or add created QGraphicsView object to a QMainWindow object by calling setCentralWidget()
  28. 28. GraphicsView Framework (8/8) Example GrphView-SimpleAnim Shows how scene/view/items work together and an animation that a rectangle graphic item moves and fades out.
  29. 29. Example Source Codes Download The example codes for this slide (GitHub). https://github.com/wiliwe/qt-animation-example.git Using Git tool to download: git clone https://github.com/wiliwe/qt-animation-example.git
  30. 30. References http://doc.qt.nokia.com/4.6/qtimer.html http://doc.qt.nokia.com/4.6/qtimeline.html http://doc.qt.nokia.com/4.6/qtimeline.html#CurveShape-enum http://doc.qt.nokia.com/4.6/animation-overview.html http://doc.qt.nokia.com/4.6/statemachine-api.html http://doc.qt.nokia.com/4.6/graphicsview.html http://doc.qt.nokia.com/4.6/qgraphicsscene.html http://doc.qt.nokia.com/4.6/qgraphicsitem.html