logo头像

单枪匹马亦对饮,历经磨难记初心

玩转Qml(14)-动画特效-梯度

本文于 520 天之前发表,文中内容可能已经过时。

gallery-img

简介

这是《Qml特效-进场动画》系列文章的第二篇,涛哥将会教大家一些Qml进场动画相关的知识。

源码

《玩转Qml》系列文章,配套了一个优秀的开源项目:TaoQuick

github https://github.com/jaredtao/TaoQuick

访问不了或者速度太慢,可以用国内的镜像网站gitee

https://gitee.com/jaredtao/TaoQuick

梯度效果预览

梯度效果,支持从四个方向梯度出现

实现原理

通过数值动画,控制百分比属性percent从0 到100变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//AGrad.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
ShaderEffect {
...
//枚举声明四种方向
enum Direct {
FromLeft = 0,
FromRight = 1,
FromTop = 2,
FromBottom = 3
}
property int dir: ASlowEnter.Direct.FromLeft
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片段着色器实现像素的控制:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
in vec2 qt_TexCoord0;
uniform float qt_Opacity;
uniform sampler2D effectSource;
uniform int dir;
uniform int percent;
out vec4 fragColor;
void main()
{
vec4 color = texture2D(effectSource, qt_TexCoord0);
float p = float(percent) / 100.0f;
float alpha = 1.0f;

if (dir == 0 ) {
alpha = 1.0 - step(p, qt_TexCoord0.x);
} else if (dir == 1){
alpha = 1.0 - step(p, 1.0 - qt_TexCoord0.x);
} else if (dir == 2) {
alpha = 1.0f - step(p, qt_TexCoord0.y);
} else if (dir == 3) {
alpha = 1.0f - step(p, 1.0 - qt_TexCoord0.y);
}
fragColor = vec4(color.rgb, alpha);
}

效果比较简单,以从左向右为例(dir == 0), 说明一下:

先是把percent 归一化处理 (float p = percent / 100.0),

纹理坐标qt_TexCoord0.x的取值范围为 0 - 1,按照Qml的坐标系统,左边为0,右边为1。

之后纹理坐标与p进行比较,坐标小于p则显示(透明度为1),大于p则不显示(透明度为0). (也可以直接用discard丢弃片段)

step是glsl内置函数,step(p, qt_TexCoord0.x) 就是x小于p返回0,大于等于p返回1。 结果正好与上面分析的相反,用1 减去即可: alpha = 1.0 - step(p, qt_TexCoord0.x);

最终输出颜色即可:

fragColor = vec4(color.rgb, alpha);

支付宝打赏 微信打赏

为众人抱薪者,不可使其冻毙于霜雪