Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Qt5 C++ GUI Programming Cookbook
Qt5 C++ GUI Programming Cookbook

Qt5 C++ GUI Programming Cookbook: Design and build a functional, appealing, and user-friendly graphical user interface

eBook
Can$34.98 Can$49.99
Paperback
Can$61.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Qt5 C++ GUI Programming Cookbook

Chapter 2. States and Animations

In this chapter, we will cover the following recipes:

  • Property animation in Qt
  • Using easing curves to control property animation
  • Creating the animation group
  • Creating the nested animation group
  • State machine in Qt
  • States, transitions, and animations in QML
  • Animation widget properties using animators
  • Spri te animation

Introduction

Qt provides an easy way to animate widgets or any other objects that inherit the QObject class, through its powerful animation framework. The animation can be used either on its own or used together with the state machine framework, which allows different animations to be played based on the current active state of the widget. Qt's animation framework also supports grouped animation, which allows you to move more than one graphics item simultaneously, or move them in sequence one after the other.

Property animation in Qt

In this example, we will learn how to animate our Graphical User Interface (GUI) elements using Qt's property animation class, part of its powerful animation framework, which allows us to create fluid looking animation with minimal effort.

How to do it…

  1. First, let's create a new Qt Widgets Application project. After that, open up mainwindow.ui with Qt Designer and place a button on the main window, as shown here:
    How to do it…
  2. Next, open up mainwindow.cpp and add the following line of code at the beginning of the source code:
    #include <QPropertyAnimation>
  3. After that, open up mainwindow.cpp and add the following code to the constructor:
    QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry");
    animation->setDuration(10000);
    animation->setStartValue(ui->pushButton->geometry());
    animation->setEndValue(QRect(200, 200, 100, 50));
    animation->start();

How it works...

One of the more common methods to animate a GUI...

Using easing curves to control property animation

In this example, we will learn how to make our animation more interesting by utilizing easing curves. We will still use the previous source code, which uses the property animation to animate a push button.

How to do it…

  1. Define an easing curve and add it to the property animation before calling the start() function:
    QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry");
    animation->setDuration(3000);
    animation->setStartValue(ui->pushButton->geometry());
    animation->setEndValue(QRect(200, 200, 100, 50));
    QEasingCurve curve;
    curve.setType(QEasingCurve::OutBounce);
    animation->setEasingCurve(curve);
    animation->start();
  2. Call the setLoopCount() function to set how many loops you want it to repeat for:
    QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry");
    animation->setDuration(3000);
    animation->setStartValue(ui->pushButton->geometry...

Creating an animation group

In this example, we will learn how to use an animation group to manage the states of the animations contained in the group.

How to do it…

  1. We will use the previous example, but this time, we add two more push buttons to the main window, like so:
    How to do it…
  2. Next, define the animation for each of the push buttons in the main window's constructor:
    QPropertyAnimation *animation1 = new QPropertyAnimation(ui->pushButton, "geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton->geometry());
    animation1->setEndValue(QRect(50, 200, 100, 50));
    
    QPropertyAnimation *animation2 = new QPropertyAnimation(ui->pushButton_2, "geometry");
    animation2->setDuration(3000);
    animation2->setStartValue(ui->pushButton_2->geometry());
    animation2->setEndValue(QRect(150, 200, 100, 50));
    
    QPropertyAnimation *animation3 = new QPropertyAnimation(ui->pushButton_3, "geometry");
    animation3->setDuration...

Creating a nested animation group

One good example of using a nested animation group is when you have several parallel animation groups and you want to play the groups in a sequential order.

How to do it…

  1. We will use the UI from the previous example and add a few more buttons to the main window, like so:
    How to do it…
  2. First, create all the animations for the buttons, then create an easing curve and apply it to all the animations:
    QPropertyAnimation *animation1 = new QPropertyAnimation(ui->pushButton, "geometry");
    animation1->setDuration(3000);
    animation1->setStartValue(ui->pushButton->geometry());
    animation1->setEndValue(QRect(50, 50, 100, 50));
    
    QPropertyAnimation *animation2 = new QPropertyAnimation(ui->pushButton_2, "geometry");
    animation2->setDuration(3000);
    animation2->setStartValue(ui->pushButton_2->geometry());
    animation2->setEndValue(QRect(150, 50, 100, 50));
    
    QPropertyAnimation *animation3 = new QPropertyAnimation(ui->pushButton_3...

State machines in Qt

State machines can be used for many purposes, but in this chapter we will only cover topics related to animation.

How to do it…

  1. First, we will set up a new user interface for our example program, which looks like this:
    How to do it…
  2. Next, we will include some headers in our source code:
    #include <QStateMachine>
    #include <QPropertyAnimation>
    #include <QEventTransition>
  3. After that, in our main window's constructor, add the following code to create a new state machine and two states, which we will be using later:
    QStateMachine *machine = new QStateMachine(this);
    QState *s1 = new QState();
    QState *s2 = new QState();
  4. Then, we will define what we should do within each state, which in this case will be to change the label's text, as well as the button's position and size:
    QState *s1 = new QState();
    s1->assignProperty(ui->stateLabel, "text", "Current state: 1");
    s1->assignProperty(ui->pushButton, "geometry", QRect...

Introduction


Qt provides an easy way to animate widgets or any other objects that inherit the QObject class, through its powerful animation framework. The animation can be used either on its own or used together with the state machine framework, which allows different animations to be played based on the current active state of the widget. Qt's animation framework also supports grouped animation, which allows you to move more than one graphics item simultaneously, or move them in sequence one after the other.

Property animation in Qt


In this example, we will learn how to animate our Graphical User Interface (GUI) elements using Qt's property animation class, part of its powerful animation framework, which allows us to create fluid looking animation with minimal effort.

How to do it…

  1. First, let's create a new Qt Widgets Application project. After that, open up mainwindow.ui with Qt Designer and place a button on the main window, as shown here:

  2. Next, open up mainwindow.cpp and add the following line of code at the beginning of the source code:

    #include <QPropertyAnimation>
  3. After that, open up mainwindow.cpp and add the following code to the constructor:

    QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry");
    animation->setDuration(10000);
    animation->setStartValue(ui->pushButton->geometry());
    animation->setEndValue(QRect(200, 200, 100, 50));
    animation->start();

How it works...

One of the more common methods to animate a GUI element is through the property...

Using easing curves to control property animation


In this example, we will learn how to make our animation more interesting by utilizing easing curves. We will still use the previous source code, which uses the property animation to animate a push button.

How to do it…

  1. Define an easing curve and add it to the property animation before calling the start() function:

    QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry");
    animation->setDuration(3000);
    animation->setStartValue(ui->pushButton->geometry());
    animation->setEndValue(QRect(200, 200, 100, 50));
    QEasingCurve curve;
    curve.setType(QEasingCurve::OutBounce);
    animation->setEasingCurve(curve);
    animation->start();
  2. Call the setLoopCount() function to set how many loops you want it to repeat for:

    QPropertyAnimation *animation = new QPropertyAnimation(ui->pushButton, "geometry");
    animation->setDuration(3000);
    animation->setStartValue(ui->pushButton->geometry());
    animation->setEndValue...
Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Learn to make use of Qt5 to design and customize the look-and-feel of your application
  • Improve the visual quality of your application by utilizing the graphic rendering system and animation system provided by Qt5
  • A good balance of visual presentation and its contents will make an application appealing yet functional

Description

With the advancement of computer technology, the software market is exploding with tons of software choices for the user, making their expectations higher in terms of functionality and the look and feel of the application. Therefore, improving the visual quality of your application is vital in order to overcome the market competition and stand out from the crowd. This book will teach you how to develop functional and appealing software using Qt5 through multiple projects that are interesting and fun. This book covers a variety of topics such as look-and-feel customization, GUI animation, graphics rendering, implementing Google Maps, and more. You will learn tons of useful information, and enjoy the process of working on the creative projects provided in this book

Who is this book for?

This book intended for those who want to develop software using Qt5. If you want to improve the visual quality and content presentation of your software application, this book is best suited to you.

What you will learn

  • • Customize the look and feel of your application using the widget editor provided by Qt5
  • • Change the states of the GUI elements to make them appear in a different form
  • • Animating the GUI elements using the built-in animation system provided by Qt5
  • • Draw 3D graphics in your application by implementing OpenGL, an industry-standard graphical library, in your project
  • • Build a mobile app that supports touch events and export it to your device
  • • Parse and extract data from an XML file, then present it on your software's GUI
  • • Access MySQL and SQLite databases to retrieve data and display it on your software's GUI

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 29, 2016
Length: 300 pages
Edition : 1st
Language : English
ISBN-13 : 9781783280278
Category :
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jul 29, 2016
Length: 300 pages
Edition : 1st
Language : English
ISBN-13 : 9781783280278
Category :
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just Can$6 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just Can$6 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total Can$ 193.97
QT5 Blueprints
Can$69.99
Mastering Qt 5
Can$61.99
Qt5 C++ GUI Programming Cookbook
Can$61.99
Total Can$ 193.97 Stars icon
Banner background image

Table of Contents

10 Chapters
1. Look and Feel Customization Chevron down icon Chevron up icon
2. States and Animations Chevron down icon Chevron up icon
3. QPainter and 2D Graphics Chevron down icon Chevron up icon
4. OpenGL Implementation Chevron down icon Chevron up icon
5. Building a Touch Screen Application with Qt5 Chevron down icon Chevron up icon
6. XML Parsing Made Easy Chevron down icon Chevron up icon
7. Conversion Library Chevron down icon Chevron up icon
8. Accessing Databases Chevron down icon Chevron up icon
9. Developing a Web Application Using Qt Web Engine Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.7
(17 Ratings)
5 star 41.2%
4 star 17.6%
3 star 17.6%
2 star 17.6%
1 star 5.9%
Filter icon Filter
Top Reviews

Filter reviews by




SY Aug 23, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Essential book to understand C++ GUI programming. Very detailed step by step learning process. I will rate this as MUST-BUY to those who are reading this.
Amazon Verified review Amazon
Robert F. Lebo Jun 26, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
On time. No problems.
Amazon Verified review Amazon
Harterly Boey Aug 24, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good reference for C++ GUI programming. This would be helpful for programmer to use C++ to create program with attractive UI
Amazon Verified review Amazon
Kirk Nov 17, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good
Amazon Verified review Amazon
anniw Aug 23, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Great guide book! It is easy and straight forward just like a cookbook!
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.