玩转Qml(14)-动画特效-梯度
本文于 1032 天之前发表,文中内容可能已经过时。
简介
这是《Qml特效-进场动画》系列文章的第二篇,涛哥将会教大家一些Qml进场动画相关的知识。
源码
《玩转Qml》系列文章,配套了一个优秀的开源项目:TaoQuick
github https://github.com/jaredtao/TaoQuick
访问不了或者速度太慢,可以用国内的镜像网站gitee
https://gitee.com/jaredtao/TaoQuick
梯度效果预览
梯度效果,支持从四个方向梯度出现
实现原理
通过数值动画,控制百分比属性percent从0 到100变化
1 | //AGrad.qml |
在Shader中,使用glsl片段着色器实现像素的控制:
1 | in vec2 qt_TexCoord0; |
效果比较简单,以从左向右为例(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);
赏
支付宝打赏
微信打赏
为众人抱薪者,不可使其冻毙于霜雪