Qt to write custom controls 33 animated picture switch

I. Introduction

In many plug-in software, the time switch can take pictures or animated transitions transition effects appear to be more humane, in fact, mainly dazzle some, such as blinds, change transparency, such as flying into the bottom left corner, no matter how many kinds of effects, both core QPainter is carried around, the dynamic calculation region corresponding to image various animation effects and plotted, cooperate to produce the animation property QPropertyAnimation linear interpolation, such as getting into the fly, they can quickly intermediate ends slow. Currently there are nine types of animation, the latter will continue to increase.

• 1: 1 and gradually fades the image, the image gradually appear 2
• 2: Shades effect
• 3: flip the image from right to left
• 4: from the outside in a horizontal split
• 5: 1 from left to right to exit the image visible region, while the image from left to right into the visible area 2
• 6: 1 Exit image viewable area from left to right, while the image from left to right into the visible area 2
• 7: 1 from the bottom exit image visible region, while the image 2 from the bottom into the visible region
• 8: 1 the image from top to bottom exit visible region, while the image from top to bottom into the visible region 2
• 9: 1 the image does not move, while the image from the lower right to the upper left 2

Second, the realization of functions

• 1: support a variety of styles to wait for the arc-shaped style style style triangle rotating circle arc line style ring style
• 2: the settable range and current values
• 3: foreground background color may be provided
• 4: counter clockwise rotation may be provided
• 5: Support any size scaling
• 6: support setting rotational speed interval

Third, renderings

Fourth, the header file code

#ifndef IMAGEANIMATION_H
#define IMAGEANIMATION_H

/**
 * 图片切换动画控件 作者:赵彦博(QQ:408815041 [email protected]) 2019-6-10
 * 1:可设置动画类型,默认9种,后期会增加更多
 * FadeEffect = 0,             //图像1渐渐变淡,图像2渐渐显现
 * BlindsEffect = 1,           //百叶窗效果
 * FlipRightToLeft = 2,        //图像从右向左翻转
 * OutsideToInside = 3,        //从外到内水平分割
 * MoveLeftToRightEffect = 4,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
 * MoveRightToLeftEffect = 5,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
 * MoveBottomToUpEffect = 6,   //图像1从下至上退出可视区域,同时图像2从下至上进入可视区域
 * MoveUpToBottomEffect = 7,   //图像1从上至下退出可视区域,同时图像2从上至下进入可视区域
 * MoveBottomToLeftUpEffect = 8//图像1不动,同时图像2从右下到左上
 * 2:可设置两张图片的路径名称或者图片
 * 3:可设置动画因子
 */

#include <QWidget>

class QPropertyAnimation;

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ImageAnimation : public QWidget
#else
class ImageAnimation : public QWidget
#endif

{
    Q_OBJECT
    Q_ENUMS(AnimationType)
    Q_PROPERTY(float factor READ getFactor WRITE setFactor)
    Q_PROPERTY(QString imageName1 READ getImageName1 WRITE setImageName1)
    Q_PROPERTY(QString imageName2 READ getImageName2 WRITE setImageName2)
    Q_PROPERTY(QPixmap pixmap1 READ getPixmap1 WRITE setPixmap1)
    Q_PROPERTY(QPixmap pixmap2 READ getPixmap2 WRITE setPixmap2)
    Q_PROPERTY(AnimationType animationType READ getAnimationType WRITE setAnimationType)

public:
    enum AnimationType {
        FadeEffect = 0,             //图像1渐渐变淡,图像2渐渐显现
        BlindsEffect = 1,           //百叶窗效果
        FlipRightToLeft = 2,        //图像从右向左翻转
        OutsideToInside = 3,        //从外到内水平分割
        MoveLeftToRightEffect = 4,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
        MoveRightToLeftEffect = 5,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
        MoveBottomToUpEffect = 6,   //图像1从下至上退出可视区域,同时图像2从下至上进入可视区域
        MoveUpToBottomEffect = 7,   //图像1从上至下退出可视区域,同时图像2从上至下进入可视区域
        MoveBottomToLeftUpEffect = 8//图像1不动,同时图像2从右下到左上
    };

    explicit ImageAnimation(QWidget *parent = 0);
    ~ImageAnimation();

protected:
    void paintEvent(QPaintEvent *);
    void fadeEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void blindsEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void flipRightToLeft(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void outsideToInside(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveLeftToRightEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveRightToLeftEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveBottomToUpEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveUpToBottomEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
    void moveBottomToLeftUpEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);

private:
    float factor;                   //动画因子(0 - 1.0之间变化)
    QString imageName1;             //图片1路径名称
    QString imageName2;             //图片2路径名称
    QPixmap pixmap1;                //图片1
    QPixmap pixmap2;                //图片2
    AnimationType animationType;    //动画效果类型

    QPropertyAnimation *animation;  //动画属性

public:
    float getFactor()               const;
    QString getImageName1()         const;
    QString getImageName2()         const;
    QPixmap getPixmap1()            const;
    QPixmap getPixmap2()            const;
    AnimationType getAnimationType()const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public Q_SLOTS:
    //设置动画因子
    void setFactor(float factor);

    //设置图片1+图片2路径名称
    void setImageName1(const QString &imageName1);
    void setImageName2(const QString &imageName2);

    //设置图片1+图片2
    void setPixmap1(const QPixmap &pixmap1);
    void setPixmap2(const QPixmap &pixmap2);

    //设置动画类型
    void setAnimationType(const AnimationType &animationType);

    //启动+停止动画
    void start();
    void stop();
};

#endif // IMAGEANIMATION_H

Fifth, the core code

void ImageAnimation::paintEvent(QPaintEvent *)
{
    if (pixmap1.isNull() || pixmap2.isNull()) {
        return;
    }

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    switch (animationType) {
    case 0:
        fadeEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 1:
        blindsEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 2:
        flipRightToLeft(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 3:
        outsideToInside(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 4:
        moveLeftToRightEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 5:
        moveRightToLeftEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 6:
        moveBottomToUpEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 7:
        moveUpToBottomEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    case 8:
        moveBottomToLeftUpEffect(&painter, geometry(), factor, pixmap1, pixmap2);
        break;
    default:
        break;
    }
}

void ImageAnimation::fadeEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int w = rect.width();
    int h = rect.height();
    int alpha = 255 * (1.0f - factor);

    QPixmap alphaPixmap(pixmap1.size());
    alphaPixmap.fill(Qt::transparent);

    QPainter p1(&alphaPixmap);
    p1.setCompositionMode(QPainter::CompositionMode_Source);
    p1.drawPixmap(0, 0, pixmap1);
    p1.setCompositionMode(QPainter::CompositionMode_DestinationIn);
    p1.fillRect(alphaPixmap.rect(), QColor(0, 0, 0, alpha));
    p1.end();

    int x = (w - pixmap1.width()) / 2;
    int y = (h - pixmap1.height()) / 2;
    painter->drawPixmap(x, y, alphaPixmap);

    alpha = 255 * (factor);
    alphaPixmap.fill(Qt::transparent);
    QPainter p2(&alphaPixmap);
    p2.setCompositionMode(QPainter::CompositionMode_Source);
    p2.drawPixmap(0, 0, pixmap2);
    p2.setCompositionMode(QPainter::CompositionMode_DestinationIn);
    p2.fillRect(alphaPixmap.rect(), QColor(0, 0, 0, alpha));
    p2.end();

    painter->drawPixmap(x, y, alphaPixmap);
}

void ImageAnimation::blindsEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int i, n, w, h, x1, y1, x2, y2, dh, ddh;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;

    painter->drawPixmap(x1, y1, pixmap1);

    n = 10;
    dh = pixmap2.height() / n;
    ddh = factor * dh;
    if (ddh < 1) {
        ddh = 1;
    }

    for(i = 0; i < n; i++) {
        painter->drawPixmap(x2, y2 + i * dh, pixmap2, 0, i * dh, pixmap2.width(), ddh);
    }
}

void ImageAnimation::flipRightToLeft(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int x1, y1, x2, y2, w, h;
    float rot;
    QTransform trans;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;

    rot = factor * 90.0f;
    trans.translate(w * (1 - factor), h / 2);
    trans.rotate(rot, Qt::YAxis);
    trans.translate(-w, -h / 2);

    painter->setTransform(trans);
    painter->drawPixmap(x1, y1, pixmap1);
    painter->resetTransform();

    trans.reset();
    rot = 90 * (factor - 1);
    trans.translate(w * (1 - factor), h / 2);
    trans.rotate(rot, Qt::YAxis);
    trans.translate(0, -h / 2);

    painter->setTransform(trans);
    painter->drawPixmap(x2, y2, pixmap2);
    painter->resetTransform();
}

void ImageAnimation::outsideToInside(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int   w, h, x1, y1, x2, y2, x3, y3, dh, ddh;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    painter->drawPixmap(x1, y1, pixmap1);

    dh = pixmap2.height() / 2;
    ddh = factor * dh;
    if (ddh < 1) {
        ddh = 1;
    }

    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;
    painter->drawPixmap(x2, y2, pixmap2, 0, 0, pixmap2.width(), ddh);

    x3 = (w - pixmap2.width()) / 2;
    y3 =  dh * (1.0f - factor) + h / 2;
    if(y3 != h / 2) {
        y3 += 1;
    }

    painter->drawPixmap(x3, y3, pixmap2, 0, pixmap2.height() - ddh, pixmap2.width(), ddh);
}

void ImageAnimation::moveLeftToRightEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
{
    int x, y, w, h, x1, y1, x2, y2;

    w = rect.width();
    h = rect.height();
    x1 = (w - pixmap1.width()) / 2;
    y1 = (h - pixmap1.height()) / 2;
    x2 = (w - pixmap2.width()) / 2;
    y2 = (h - pixmap2.height()) / 2;

    x = x1 + w * factor;
    y = y1;
    painter->drawPixmap(x, y, pixmap1);

    x = x2 + w * (factor - 1);
    y = y2;
    painter->drawPixmap(x, y, pixmap2);
}

Sixth, the controls described

1. More than 149 exquisite control, covers a variety of dashboards, progress bar, the progress of the ball, compass, graphs, scales, thermometers, navigation bar, navigation bar, flatui, highlight the button, slide the selector, the lunar calendar and so on. Qwt far more than the number of controls integration.
2. Each class can be independently as a separate control, zero coupling each control file and a header file to achieve a code amount, independent of other files to facilitate individual control integrated into the project source code form, less. qwt interlocking control class, highly coupled, want to use one of the controls, must contain all the code.
3. Write all pure Qt, QWidget + QPainter to draw, to support any Qt version Qt4.6 Qt5.12, support for mingw, msvc, gcc compiler, etc., support any operating system such as windows + linux + mac + embedded linux, which does not garbled can be directly integrated into Qt Creator, a built-in controls and use the same, most of the effects can be as long as several properties are set, very convenient.
4. DEMO separate source containing the control corresponding to each control has a convenient reference. It also provides integrated use of all controls a DEMO.
5. Source code for each control has detailed Chinese annotation, are prepared in accordance with unified design specifications, easy to learn to write custom controls.
6. Each control default color and demo corresponding color is very beautiful.
7. More than 130 visible control, six invisible control.
8. Portion control provides a variety of styles style selection, multiple choice style indicator.
9. All controls changes adaptive stretched form.
10. Integrated design custom attribute that supports drag design, WYSIWYG support the import and export in xml format.
11. Activex control that comes with demo, all controls can be run directly in the browser ie.
12. Fontawesome integrated graphics font + Alibaba iconfont collection of hundreds of graphic fonts, font fun graphic brings.
13. All controls and finally generate a dll dynamic library files, can be integrated directly into qtcreator designed for use in drag.
14. Already qml version, the latter will consider a pyqt version, if the user is in great demand then.

Seven, SDK download

• SDK download link: https: //pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ extraction code: 877p
• Download link is included in the various versions of the dynamic library files, header files of all the controls, the use of demo, custom controls + properties designer.
• Open plug-in custom dynamic library dll use (permanent free), and the back door without any restrictions, ease of use.
• 26 now available version dll, which includes qt5.12.3 msvc2017 32 + 64 mingw 32 + 64 in.
• From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
• widget versions (QQ: 517216493) qml versions (QQ: 373955953) sambong camel (QQ: 278969898).
• Qt's advanced column know almost Taoge road https://zhuanlan.zhihu.com/TaoQt
• Welcome concern public micro-channel number] [efficient programmers, content C ++ / Python, learning, writing skills, popular technology, career development, a lot of dry goods, benefits a lot!