发帖 回复
返回列表
  • 3022阅读
  • 0回复

Qt编写自定义控件33-图片切换动画 [复制链接]

 上一主题 下一主题
离线liudianwu
总版主
 
只看楼主 倒序阅读 楼主  发表于: 2019-07-21

一、前言
在很多看图软件中，切换图片的时候可以带上动画过渡或者切换效果，显得更人性化，其实主要还是炫一些，比如百叶窗、透明度变化、左下角飞入等，无论多少种效果，核心都是围绕QPainter来进行，将各种动画效果对应的图片的区域动态计算并绘制出来，配合以QPropertyAnimation动画属性产生线性插值，比如渐入飞入时候，可以中间快速两端慢速。目前动画类型有9种，后期还会不断增加。
* 1：图像1渐渐变淡,图像2渐渐显现
* 2：百叶窗效果
* 3：图像从右向左翻转
* 4：从外到内水平分割
* 5：图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
* 6：图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
* 7：图像1从下至上退出可视区域,同时图像2从下至上进入可视区域
* 8：图像1从上至下退出可视区域,同时图像2从上至下进入可视区域
* 9：图像1不动,同时图像2从右下到左上

二、实现的功能
* 1:支持多种等待样式风格 圆弧状风格 旋转圆风格 三角圆弧 线条风格 圆环风格
* 2:可设置范围值和当前值
* 3:可设置前景色背景色
* 4:可设置顺时针逆时针旋转
* 5:支持任意大小缩放
* 6:支持设置旋转速度间隔


三、效果图



四、头文件代码
复制代码
  1. #ifndef IMAGEANIMATION_H
  2. #define IMAGEANIMATION_H
  4. /**
  5. * 图片切换动画控件 作者:赵彦博(QQ:408815041 zyb920@hotmail.com) 2019-6-10
  6. * 1:可设置动画类型,默认9种,后期会增加更多
  7. * FadeEffect = 0,             //图像1渐渐变淡,图像2渐渐显现
  8. * BlindsEffect = 1,           //百叶窗效果
  9. * FlipRightToLeft = 2,        //图像从右向左翻转
  10. * OutsideToInside = 3,        //从外到内水平分割
  11. * MoveLeftToRightEffect = 4,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
  12. * MoveRightToLeftEffect = 5,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
  13. * MoveBottomToUpEffect = 6,   //图像1从下至上退出可视区域,同时图像2从下至上进入可视区域
  14. * MoveUpToBottomEffect = 7,   //图像1从上至下退出可视区域,同时图像2从上至下进入可视区域
  15. * MoveBottomToLeftUpEffect = 8//图像1不动,同时图像2从右下到左上
  16. * 2:可设置两张图片的路径名称或者图片
  17. * 3:可设置动画因子
  18. */
  20. #include <QWidget>
  22. class QPropertyAnimation;
  24. #ifdef quc
  25. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  26. #include <QtDesigner/QDesignerExportWidget>
  27. #else
  28. #include <QtUiPlugin/QDesignerExportWidget>
  29. #endif
  31. class QDESIGNER_WIDGET_EXPORT ImageAnimation : public QWidget
  32. #else
  33. class ImageAnimation : public QWidget
  34. #endif
  36. {
  37.     Q_OBJECT
  38.     Q_ENUMS(AnimationType)
  39.     Q_PROPERTY(float factor READ getFactor WRITE setFactor)
  40.     Q_PROPERTY(QString imageName1 READ getImageName1 WRITE setImageName1)
  41.     Q_PROPERTY(QString imageName2 READ getImageName2 WRITE setImageName2)
  42.     Q_PROPERTY(QPixmap pixmap1 READ getPixmap1 WRITE setPixmap1)
  43.     Q_PROPERTY(QPixmap pixmap2 READ getPixmap2 WRITE setPixmap2)
  44.     Q_PROPERTY(AnimationType animationType READ getAnimationType WRITE setAnimationType)
  46. public:
  47.     enum AnimationType {
  48.         FadeEffect = 0,             //图像1渐渐变淡,图像2渐渐显现
  49.         BlindsEffect = 1,           //百叶窗效果
  50.         FlipRightToLeft = 2,        //图像从右向左翻转
  51.         OutsideToInside = 3,        //从外到内水平分割
  52.         MoveLeftToRightEffect = 4,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
  53.         MoveRightToLeftEffect = 5,  //图像1从左至右退出可视区域,同时图像2从左至右进入可视区域
  54.         MoveBottomToUpEffect = 6,   //图像1从下至上退出可视区域,同时图像2从下至上进入可视区域
  55.         MoveUpToBottomEffect = 7,   //图像1从上至下退出可视区域,同时图像2从上至下进入可视区域
  56.         MoveBottomToLeftUpEffect = 8//图像1不动,同时图像2从右下到左上
  57.     };
  59.     explicit ImageAnimation(QWidget *parent = 0);
  60.     ~ImageAnimation();
  62. protected:
  63.     void paintEvent(QPaintEvent *);
  64.     void fadeEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  65.     void blindsEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  66.     void flipRightToLeft(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  67.     void outsideToInside(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  68.     void moveLeftToRightEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  69.     void moveRightToLeftEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  70.     void moveBottomToUpEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  71.     void moveUpToBottomEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  72.     void moveBottomToLeftUpEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2);
  74. private:
  75.     float factor;                   //动画因子(0 - 1.0之间变化)
  76.     QString imageName1;             //图片1路径名称
  77.     QString imageName2;             //图片2路径名称
  78.     QPixmap pixmap1;                //图片1
  79.     QPixmap pixmap2;                //图片2
  80.     AnimationType animationType;    //动画效果类型
  82.     QPropertyAnimation *animation;  //动画属性
  84. public:
  85.     float getFactor()               const;
  86.     QString getImageName1()         const;
  87.     QString getImageName2()         const;
  88.     QPixmap getPixmap1()            const;
  89.     QPixmap getPixmap2()            const;
  90.     AnimationType getAnimationType()const;
  92.     QSize sizeHint()                const;
  93.     QSize minimumSizeHint()         const;
  95. public Q_SLOTS:
  96.     //设置动画因子
  97.     void setFactor(float factor);
  99.     //设置图片1+图片2路径名称
  100.     void setImageName1(const QString &imageName1);
  101.     void setImageName2(const QString &imageName2);
  103.     //设置图片1+图片2
  104.     void setPixmap1(const QPixmap &pixmap1);
  105.     void setPixmap2(const QPixmap &pixmap2);
  107.     //设置动画类型
  108.     void setAnimationType(const AnimationType &animationType);
  110.     //启动+停止动画
  111.     void start();
  112.     void stop();
  113. };
  115. #endif // IMAGEANIMATION_H

五、核心代码
复制代码
  1. void ImageAnimation::paintEvent(QPaintEvent *)
  2. {
  3.     if (pixmap1.isNull() || pixmap2.isNull()) {
  4.         return;
  5.     }
  7.     QPainter painter(this);
  8.     painter.setRenderHint(QPainter::Antialiasing, true);
  10.     switch (animationType) {
  11.     case 0:
  12.         fadeEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  13.         break;
  14.     case 1:
  15.         blindsEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  16.         break;
  17.     case 2:
  18.         flipRightToLeft(&painter, geometry(), factor, pixmap1, pixmap2);
  19.         break;
  20.     case 3:
  21.         outsideToInside(&painter, geometry(), factor, pixmap1, pixmap2);
  22.         break;
  23.     case 4:
  24.         moveLeftToRightEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  25.         break;
  26.     case 5:
  27.         moveRightToLeftEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  28.         break;
  29.     case 6:
  30.         moveBottomToUpEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  31.         break;
  32.     case 7:
  33.         moveUpToBottomEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  34.         break;
  35.     case 8:
  36.         moveBottomToLeftUpEffect(&painter, geometry(), factor, pixmap1, pixmap2);
  37.         break;
  38.     default:
  39.         break;
  40.     }
  41. }
  43. void ImageAnimation::fadeEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
  44. {
  45.     int w = rect.width();
  46.     int h = rect.height();
  47.     int alpha = 255 * (1.0f - factor);
  49.     QPixmap alphaPixmap(pixmap1.size());
  50.     alphaPixmap.fill(Qt::transparent);
  52.     QPainter p1(&alphaPixmap);
  53.     p1.setCompositionMode(QPainter::CompositionMode_Source);
  54.     p1.drawPixmap(0, 0, pixmap1);
  55.     p1.setCompositionMode(QPainter::CompositionMode_DestinationIn);
  56.     p1.fillRect(alphaPixmap.rect(), QColor(0, 0, 0, alpha));
  57.     p1.end();
  59.     int x = (w - pixmap1.width()) / 2;
  60.     int y = (h - pixmap1.height()) / 2;
  61.     painter->drawPixmap(x, y, alphaPixmap);
  63.     alpha = 255 * (factor);
  64.     alphaPixmap.fill(Qt::transparent);
  65.     QPainter p2(&alphaPixmap);
  66.     p2.setCompositionMode(QPainter::CompositionMode_Source);
  67.     p2.drawPixmap(0, 0, pixmap2);
  68.     p2.setCompositionMode(QPainter::CompositionMode_DestinationIn);
  69.     p2.fillRect(alphaPixmap.rect(), QColor(0, 0, 0, alpha));
  70.     p2.end();
  72.     painter->drawPixmap(x, y, alphaPixmap);
  73. }
  75. void ImageAnimation::blindsEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
  76. {
  77.     int i, n, w, h, x1, y1, x2, y2, dh, ddh;
  79.     w = rect.width();
  80.     h = rect.height();
  81.     x1 = (w - pixmap1.width()) / 2;
  82.     y1 = (h - pixmap1.height()) / 2;
  83.     x2 = (w - pixmap2.width()) / 2;
  84.     y2 = (h - pixmap2.height()) / 2;
  86.     painter->drawPixmap(x1, y1, pixmap1);
  88.     n = 10;
  89.     dh = pixmap2.height() / n;
  90.     ddh = factor * dh;
  91.     if (ddh < 1) {
  92.         ddh = 1;
  93.     }
  95.     for(i = 0; i < n; i++) {
  96.         painter->drawPixmap(x2, y2 + i * dh, pixmap2, 0, i * dh, pixmap2.width(), ddh);
  97.     }
  98. }
  100. void ImageAnimation::flipRightToLeft(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
  101. {
  102.     int x1, y1, x2, y2, w, h;
  103.     float rot;
  104.     QTransform trans;
  106.     w = rect.width();
  107.     h = rect.height();
  108.     x1 = (w - pixmap1.width()) / 2;
  109.     y1 = (h - pixmap1.height()) / 2;
  110.     x2 = (w - pixmap2.width()) / 2;
  111.     y2 = (h - pixmap2.height()) / 2;
  113.     rot = factor * 90.0f;
  114.     trans.translate(w * (1 - factor), h / 2);
  115.     trans.rotate(rot, Qt::YAxis);
  116.     trans.translate(-w, -h / 2);
  118.     painter->setTransform(trans);
  119.     painter->drawPixmap(x1, y1, pixmap1);
  120.     painter->resetTransform();
  122.     trans.reset();
  123.     rot = 90 * (factor - 1);
  124.     trans.translate(w * (1 - factor), h / 2);
  125.     trans.rotate(rot, Qt::YAxis);
  126.     trans.translate(0, -h / 2);
  128.     painter->setTransform(trans);
  129.     painter->drawPixmap(x2, y2, pixmap2);
  130.     painter->resetTransform();
  131. }
  133. void ImageAnimation::outsideToInside(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
  134. {
  135.     int   w, h, x1, y1, x2, y2, x3, y3, dh, ddh;
  137.     w = rect.width();
  138.     h = rect.height();
  139.     x1 = (w - pixmap1.width()) / 2;
  140.     y1 = (h - pixmap1.height()) / 2;
  141.     painter->drawPixmap(x1, y1, pixmap1);
  143.     dh = pixmap2.height() / 2;
  144.     ddh = factor * dh;
  145.     if (ddh < 1) {
  146.         ddh = 1;
  147.     }
  149.     x2 = (w - pixmap2.width()) / 2;
  150.     y2 = (h - pixmap2.height()) / 2;
  151.     painter->drawPixmap(x2, y2, pixmap2, 0, 0, pixmap2.width(), ddh);
  153.     x3 = (w - pixmap2.width()) / 2;
  154.     y3 =  dh * (1.0f - factor) + h / 2;
  155.     if(y3 != h / 2) {
  156.         y3 += 1;
  157.     }
  159.     painter->drawPixmap(x3, y3, pixmap2, 0, pixmap2.height() - ddh, pixmap2.width(), ddh);
  160. }
  162. void ImageAnimation::moveLeftToRightEffect(QPainter *painter, const QRect &rect, float factor, const QPixmap &pixmap1, const QPixmap &pixmap2)
  163. {
  164.     int x, y, w, h, x1, y1, x2, y2;
  166.     w = rect.width();
  167.     h = rect.height();
  168.     x1 = (w - pixmap1.width()) / 2;
  169.     y1 = (h - pixmap1.height()) / 2;
  170.     x2 = (w - pixmap2.width()) / 2;
  171.     y2 = (h - pixmap2.height()) / 2;
  173.     x = x1 + w * factor;
  174.     y = y1;
  175.     painter->drawPixmap(x, y, pixmap1);
  177.     x = x2 + w * (factor - 1);
  178.     y = y2;
  179.     painter->drawPixmap(x, y, pixmap2);
  180. }

六、控件介绍
1. 超过149个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏，flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
2. 每个类都可以独立成一个单独的控件，零耦合，每个控件一个头文件和一个实现文件，不依赖其他文件，方便单个控件以源码形式集成到项目中，较少代码量。qwt的控件类环环相扣，高度耦合，想要使用其中一个控件，必须包含所有的代码。
3. 全部纯Qt编写，QWidget+QPainter绘制，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等编译器，支持任意操作系统比如windows+linux+mac+嵌入式linux等，不乱码，可直接集成到Qt  Creator中，和自带的控件一样使用，大部分效果只要设置几个属性即可，极为方便。
4. 每个控件都有一个对应的单独的包含该控件源码的DEMO，方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
5. 每个控件的源代码都有详细中文注释，都按照统一设计规范编写，方便学习自定义控件的编写。
6. 每个控件默认配色和demo对应的配色都非常精美。
7. 超过130个可见控件，6个不可见控件。
8. 部分控件提供多种样式风格选择，多种指示器样式选择。
9. 所有控件自适应窗体拉伸变化。
10.  集成自定义控件属性设计器，支持拖曳设计，所见即所得，支持导入导出xml格式。
11. 自带activex控件demo，所有控件可以直接运行在ie浏览器中。
12. 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体，享受图形字体带来的乐趣。
13. 所有控件最后生成一个dll动态库文件，可以直接集成到qtcreator中拖曳设计使用。
14. 目前已经有qml版本，后期会考虑出pyqt版本，如果用户需求量很大的话。

七、SDK下载
- SDK下载链接：https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取码：877p
- 下载链接中包含了各个版本的动态库文件，所有控件的头文件，使用demo，自定义控件+属性设计器。
- 自定义控件插件开放动态库dll使用（永久免费），无任何后门和限制，请放心使用。
- 目前已提供26个版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控件和完善控件，不定期更新SDK，欢迎各位提出建议，谢谢！
- widget版本（QQ：517216493）qml版本（QQ：373955953）三峰驼（QQ：278969898）。
- 涛哥的知乎专栏 Qt进阶之路 https://zhuanlan.zhihu.com/TaoQt
- 欢迎关注微信公众号【高效程序员】，C++/Python、学习方法、写作技巧、热门技术、职场发展等内容，干货多多，福利多多！
  
欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493  WX：feiyangqingyun  QQ群：751439350
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个