发帖 回复
返回列表
  • 2158阅读
  • 1回复

Qml特效11-进场动画-棋盘 [复制链接]

 上一主题 下一主题
离线dd759378563
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2019-06-09
Qml特效11-进场动画-棋盘
目录
(放个目录方便预览。这个目录是从博客复制过来的，点击会跳转到博客)


简介

这是《Qml特效-进场动画》系列文章的第11篇，涛哥将会教大家一些Qml进场动画相关的知识。
进场动画效果 参考了WPS版ppt的动画，基本效果已经全部实现，可以到github TaoQuick项目中预览：
进场动画预览


关于文章

文章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路


棋盘效果预览

棋盘效果，支持向右、向下两个方向





实现原理

通过数值动画，控制百分比属性percent从0 到100变化
复制代码
  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. ShaderEffect {
  4.     ...
  5.     //枚举声明四种方向
  6.     enum Direct {
  7.         ToRight = 0,
  8.         ToBottom = 1
  9.     }
  10.     property int dir : ABoard.Direct.ToRight
  11.     property int percent: 0
  12.     opacity: percent > 0 ? 1 : 0
  13.     NumberAnimation {
  14.         id: animation
  15.         target: r
  16.         property: "percent"
  17.         from: 0
  18.         to: 100
  19.         alwaysRunToEnd: true
  20.         loops: 1
  21.         duration: 1000
  22.     }
  23.     ...
  24. }



在Shader中，使用glsl片段着色器实现像素的控制：
复制代码
  1. fragmentShader: TCommon.fragmentShaderCommon + (dir === ABoard.Direct.ToRight ? "
  2.         in  vec2 qt_TexCoord0;
  3.         uniform float qt_Opacity;
  4.         uniform sampler2D effectSource;
  5.         uniform int dir;
  6.         uniform int percent;
  7.         uniform int rowCount;
  8.         uniform int columnCount;
  9.         out vec4 fragColor;
  10.         void main()
  11.         {
  12.             vec4 color = texture2D(effectSource, qt_TexCoord0);
  13.             int xlen = 100 / columnCount;
  14.             int ylen = 100 / rowCount;
  15.             float p = float(percent) / 100.0;
  16.             int x = int(qt_TexCoord0.x * 100.0);
  17.             int y = int(qt_TexCoord0.y * 100.0);
  18.             float alpha = 0.0;
  19.             int sx = x / xlen;
  20.             int sy = y / ylen;
  21.             int xOffset = 0;
  22.             if (sy % 2 != 0) {
  23.                 xOffset = xlen / 2;
  24.             }
  25.             if (sx * xlen <= x + xOffset && (x + xOffset) % xlen <= int(float(xlen) * p) ) {
  26.                 alpha = 1.0;
  27.             }
  28.             alpha *= qt_Opacity;
  29.             fragColor = vec4(color.rgb * alpha, alpha);
  30.        }
  31. " : "
  32.         in  vec2 qt_TexCoord0;
  33.         uniform float qt_Opacity;
  34.         uniform sampler2D effectSource;
  35.         uniform int dir;
  36.         uniform int percent;
  37.         uniform int rowCount;
  38.         uniform int columnCount;
  39.         out vec4 fragColor;
  40.         void main()
  41.         {
  42.             vec4 color = texture2D(effectSource, qt_TexCoord0);
  43.             int xlen = 100 / columnCount;
  44.             int ylen = 100 / rowCount;
  45.             float p = float(percent) / 100.0;
  46.             int x = int(qt_TexCoord0.x * 100.0);
  47.             int y = int(qt_TexCoord0.y * 100.0);
  48.             float alpha = 0.0;
  49.             int sx = x / xlen;
  50.             int sy = y / ylen;
  51.             int yOffset = 0;
  52.             if (sx % 2 != 0) {
  53.                 yOffset = ylen / 2;
  54.             }
  55.             if (sy * ylen <= y + yOffset && (y + yOffset) % ylen <= int(float(ylen) * p) ) {
  56.                 alpha = 1.0;
  57.             }
  58.             alpha *= qt_Opacity;
  59.             fragColor = vec4(color.rgb * alpha, alpha);
  60.        }
  61. ")
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线big_mouse
禁止发言
只看该作者 1楼 发表于: 2020-04-14
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个