Qml特效5-进场动画-百叶窗 [复制链接]

上一主题下一主题查看指定楼层

离线dd759378563

新手上路

只看楼主正序阅读楼主发表于: 2019-06-09

Qml特效5-进场动画-百叶窗
目录
(放个目录方便预览。这个目录是从博客复制过来的，点击会跳转到博客)

简介

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

关于文章

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

百叶窗效果预览

百叶窗效果，支持向左、向右、向上、向下四个方向

实现原理

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

复制代码

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;
uniform int perLen;
uniform int count;
out vec4 fragColor;
void main()
{
vec4 color = texture2D(effectSource, qt_TexCoord0);
int len = 0;
float coords[] = float[](qt_TexCoord0.x, qt_TexCoord0.y, qt_TexCoord0.x, qt_TexCoord0.y);
int percents[] = int[](percent, percent, perLen - percent, perLen - percent);
len = int(coords[dir]* float(perLen) * float(count));
float alpha = float(step(percents[dir], mod(len, perLen)));
float alphas[] = float[](1.0 - alpha, 1.0 - alpha, alpha, alpha);
alpha = qt_Opacity * alphas[dir];
fragColor = vec4(color.rgb * alpha, alpha);
}

涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路

分享到 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

离线big_mouse

禁止发言

只看该作者 1楼发表于: 2020-04-14

发帖回复

返回列表


	http://www.qtcn.org/bbs 访问内容超出本站范围，不能确定是否安全


	关闭您还没有登录，快捷通道只有在登录后才能使用。立即登录还没有帐号？赶紧注册一个


	关闭选中1篇全选

帖子

Qml特效5-进场动画-百叶窗 [复制链接]