| dd759378563 |
2019-06-09 18:33 |
Qml特效11-进场动画-棋盘
Qml特效11-进场动画-棋盘
目录
(放个目录方便预览。这个目录是从博客复制过来的，点击会跳转到博客)
简介
这是《Qml特效-进场动画》系列文章的第11篇，涛哥将会教大家一些Qml进场动画相关的知识。
进场动画效果 参考了WPS版ppt的动画，基本效果已经全部实现，可以到github TaoQuick项目中预览：
进场动画预览
关于文章
文章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路
棋盘效果预览
棋盘效果，支持向右、向下两个方向
实现原理
通过数值动画，控制百分比属性percent从0 到100变化
- import QtQuick 2.12
import QtQuick.Controls 2.12
ShaderEffect {
...
//枚举声明四种方向
enum Direct {
ToRight = 0,
ToBottom = 1
}
property int dir : ABoard.Direct.ToRight
property int percent: 0
opacity: percent > 0 ? 1 : 0
NumberAnimation {
id: animation
target: r
property: "percent"
from: 0
to: 100
alwaysRunToEnd: true
loops: 1
duration: 1000
}
...
}
在Shader中，使用glsl片段着色器实现像素的控制：
- fragmentShader: TCommon.fragmentShaderCommon + (dir === ABoard.Direct.ToRight ? "
in vec2 qt_TexCoord0;
uniform float qt_Opacity;
uniform sampler2D effectSource;
uniform int dir;
uniform int percent;
uniform int rowCount;
uniform int columnCount;
out vec4 fragColor;
void main()
{
vec4 color = texture2D(effectSource, qt_TexCoord0);
int xlen = 100 / columnCount;
int ylen = 100 / rowCount;
float p = float(percent) / 100.0;
int x = int(qt_TexCoord0.x * 100.0);
int y = int(qt_TexCoord0.y * 100.0);
float alpha = 0.0;
int sx = x / xlen;
int sy = y / ylen;
int xOffset = 0;
if (sy % 2 != 0) {
xOffset = xlen / 2;
}
if (sx * xlen <= x + xOffset && (x + xOffset) % xlen <= int(float(xlen) * p) ) {
alpha = 1.0;
}
alpha *= qt_Opacity;
fragColor = vec4(color.rgb * alpha, alpha);
}
" : "
in vec2 qt_TexCoord0;
uniform float qt_Opacity;
uniform sampler2D effectSource;
uniform int dir;
uniform int percent;
uniform int rowCount;
uniform int columnCount;
out vec4 fragColor;
void main()
{
vec4 color = texture2D(effectSource, qt_TexCoord0);
int xlen = 100 / columnCount;
int ylen = 100 / rowCount;
float p = float(percent) / 100.0;
int x = int(qt_TexCoord0.x * 100.0);
int y = int(qt_TexCoord0.y * 100.0);
float alpha = 0.0;
int sx = x / xlen;
int sy = y / ylen;
int yOffset = 0;
if (sx % 2 != 0) {
yOffset = ylen / 2;
}
if (sy * ylen <= y + yOffset && (y + yOffset) % ylen <= int(float(ylen) * p) ) {
alpha = 1.0;
}
alpha *= qt_Opacity;
fragColor = vec4(color.rgb * alpha, alpha);
}
")
|
|
