Qt beautification based animation................................................................................................................................................................1

Frontier.............................................................................................................................................................................. 3

1. Qt animation system...................................................................................................................................................... 3
2. Animation examples...................................................................................................................................................... 4

2.1 Simple Attribute Animation................................................................................................................................. 4

2.2 Parallel animation............................................................................................................................................. 4

2.3 State Machine................................................................................................................................................ 5

2.4 Particle effects......................................................................................................................................................................................................... 5

1. Improper animation................................................................................................................................................... 6

3.1 GIF Animation................................................................................................................................. 6

3.2 Flash animation................................................................................................................................. 6

1. Embedded OpenGL animation........................................................................................................................... 7
2. Embedded QML animation.......................................................................................................................................... 7

The front

Interface animation can increase aesthetic feeling. It's convenient to use animation in QML, but it's a little difficult to use in Native. Here, I comb the built-in animation function of Qt.

1. Qt animation system

Qt's animation framework is simple enough to animate QWidget s and other QObject s. It can also be matched with Graphics View, which can also be used in QML and is more convenient.

As shown above, QAbstractAnimation is the base class of all animations. It provides all the elements needed for general animation, including start, stop, pause, etc. It also receives notifications of changes in time.

QProperty Animation (attribute animation) is a commonly used animation, which is a kind of Meta-object system of Qt. It uses a series of curve interpolation to animate.

Complex animation can be accomplished by building a QAbstractAnimation tree, which can be grouped in the QAnimation Group and can include other groups in the grouped animation.

Although interpolation system is commonly used in animation system, state machine can also be used. Through the binding of QState and QProperty Animation, we can control the entry and departure of state.

Note: The animation system uses a global Timer, which updates the playback of all animations through the updates function.

QAbstractAnimation	Base Class of All Animations
QAnimationGroup	Animation Grouping Container
QParallelAnimationGroup	Parallel Animation Group
QPauseAnimation	Pause of serial animation
QPropertyAnimation	Attribute animation
QSequentialAnimationGroup	Serial Animation Group
QVariantAnimation	Base Class of Attribute Animation, Basic Variable Animation
QEasingCurve	Motion Curve of Control Animation
QTimeLine	Control animation timeline

2. Animation examples

2.1 Simple Attribute Animation

It's called attribute animation because animation here changes one of Widget's attributes. But through serial/parallel animation, complex effects can be achieved.

QPushButton button("Animated Button"); button.show(); QPropertyAnimation animation(&button, "geometry"); animation.setDuration(10000); animation.setStartValue(QRect(0, 0, 100, 30)); animation.setEndValue(QRect(250, 250, 100, 30)); animation.start();

QPushButton button("Animated Button"); button.show(); QPropertyAnimation animation(&button, "geometry"); animation.setDuration(10000); animation.setKeyValueAt(0, QRect(0, 0, 100, 30)); // Equivalent to custom motion curves animation.setKeyValueAt(0.8, QRect(250, 250, 100, 30)); animation.setKeyValueAt(1, QRect(0, 0, 100, 30)); animation.start();

QPushButton button("Animated Button"); button.show(); QPropertyAnimation animation(&button, "geometry"); animation.setDuration(3000); animation.setStartValue(QRect(0, 0, 100, 30)); animation.setEndValue(QRect(250, 250, 100, 30)); animation.setEasingCurve(QEasingCurve::OutBounce); // Here we set the velocity curve. animation.start();

2.2 Parallel Animation

Use the QSequential Animation Group (QSequential Animation Group or QParallel Animation Group) to execute multiple animations together:

QPushButton button("Animated Button"); button.show(); QPropertyAnimation anim1(&button, "geometry"); anim1.setDuration(3000); anim1.setStartValue(QRect(0, 0, 100, 30)); anim1.setEndValue(QRect(500, 500, 100, 30)); QPropertyAnimation anim2(&button, "geometry"); anim2.setDuration(3000); anim2.setStartValue(QRect(500, 500, 100, 30)); anim2.setEndValue(QRect(1000, 500, 100, 30)); QSequentialAnimationGroup group; group.addAnimation(&anim1); group.addAnimation(&anim2); group.start();

2.3 state machine

The state machine triggers an attribute animation each time the state is switched:

QPushButton *button = new QPushButton("Animated Button"); button->show(); QStateMachine *machine = new QStateMachine; QState *state1 = new QState(machine); state1->assignProperty(button, "geometry", QRect(0, 0, 100, 30)); machine->setInitialState(state1); QState *state2 = new QState(machine); state2->assignProperty(button, "geometry", QRect(250, 250, 100, 30)); QSignalTransition *transition1 = state1->addTransition(button, SIGNAL(clicked()), state2); transition1->addAnimation(new QPropertyAnimation(button, "geometry")); QSignalTransition *transition2 = state2->addTransition(button, SIGNAL(clicked()), state1); transition2->addAnimation(new QPropertyAnimation(button, "geometry")); machine->start();

2.4 Particle Effect

Only OpenGL has example effects and can be done using QML.

3. Improper animation

3.1 GIF Animation

In practical projects, we often encounter the need to play GIF animation. This kind of "animation" is not strict animation, it needs to use QMovie class to carry out:

QMovie *Movie = new QMovie(":/movie/1"); Movie->setSpeed(1000); Movie->setBackgroundColor(QColor(10, 10, 10)); QLabel *Label = new QLabel(); Label->setMovie(Movie); Label->show(); Movie->start();

Internal use is done by state machine. When all frames are cached, jump function can be used to jump frame pictures manually.

3.2 Flash animation

1. Play Flash directly in Qt

It is also simple to call COM with QAxWidget control, and it can also call COM interface through dynamicCall function.

However, he has one drawback: he does not support transparent Flash.

Qt and Flash call each other: http://blog.csdn.net/ydzheu/article/details/53925189

1. Using Web Framework

To display flash directly through qwebview, you need to download the webkit Flash Plug-in NPSWF32.dll. You can use it directly by calling local files such as file://d:/myswf.swf.

#include <QApplication> #include <QWebView> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWebSettings *settings = QWebSettings::globalSettings(); settings->setAttribute(QWebSettings::PluginsEnabled, true); settings->setAttribute(QWebSettings::JavascriptEnabled, true); QWebView *webView = new QWebView; webView->load(QUrl("file:///d:/myswf.swf")); webView->show(); return app.exec(); }

1. Writing WebKit plug-ins

This method can be used to parse any file, but it is more complex.

4. Embedded OpenGL animation

To embed OpenGL animation into a window, you need to use QOpenGL Widget. OpenGL becomes more complex. By default, OpenGL expects them to be in counterclockwise order.

5. Embedded QML Animation

This is also a viable solution, requiring the help of QQuickWidget.

The new online CSS cleaner website allows you to organize style for websites.