dd759378563 |
2019-06-09 18:23 |
Qml特效2-进场动画-梯度
Qml特效2-进场动画-梯度
目录 (放个目录方便预览。这个目录是从博客复制过来的,点击会跳转到博客)
简介 这是《Qml特效-进场动画》系列文章的第二篇,涛哥将会教大家一些Qml进场动画相关的知识。 进场动画效果 参考了WPS版ppt的动画,基本效果已经全部实现,可以到github TaoQuick项目中预览: 进场动画预览 关于文章 《Qml组件化编程》系列文章,已经发布了10篇,暂时没有更多内容了,后续可能会更新,看情况。 涛哥开始了新的系列文章《Qml特效》,计划是三部曲《Qml特效-进场动画》 《Qml特效-页面切换动画》《Qml特效-3D特效》,欢迎大家关注。 文章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路 转载声明:文章采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可, 转载请注明出处, 谢谢合作 ©涛哥 梯度效果预览 梯度效果,支持从四个方向梯度出现
实现原理 通过数值动画,控制百分比属性percent从0 到100变化
- //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片段着色器实现像素的控制:
- 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);
|
|