• 1639阅读
  • 1回复

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

上一主题 下一主题
离线dd759378563
 

只看楼主 倒序阅读 楼主  发表于: 2019-06-09
Qml特效5-进场动画-百叶窗
目录
(放个目录方便预览。这个目录是从博客复制过来的,点击会跳转到博客)


简介

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


关于文章

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


百叶窗效果预览

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





实现原理

通过数值动画,控制百分比属性percent从0 到100变化
  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. ShaderEffect {
  4.     ...
  5.     //枚举声明四种方向
  6.     enum Direct {
  7.         FromLeft = 0,
  8.         FromRight = 1,
  9.         FromTop = 2,
  10.         FromBottom = 3
  11.     }
  12.     property int dir: ASlowEnter.Direct.FromLeft
  13.     property int percent: 0
  14.     opacity: percent > 0 ? 1 : 0
  15.     NumberAnimation {
  16.         id: animation
  17.         target: r
  18.         property: "percent"
  19.         from: 0
  20.         to: 100
  21.         alwaysRunToEnd: true
  22.         loops: 1
  23.         duration: 1000
  24.     }
  25.     ...
  26. }



在Shader中,使用glsl片段着色器实现像素的控制:
  1. in vec2 qt_TexCoord0;
  2. uniform float qt_Opacity;
  3. uniform sampler2D effectSource;
  4. uniform int dir;
  5. uniform int percent;
  6. uniform int perLen;
  7. uniform int count;
  8. out vec4 fragColor;
  9. void main()
  10. {
  11.     vec4 color = texture2D(effectSource, qt_TexCoord0);
  12.     int len = 0;
  13.     float coords[] = float[](qt_TexCoord0.x, qt_TexCoord0.y, qt_TexCoord0.x, qt_TexCoord0.y);
  14.     int percents[] = int[](percent, percent, perLen - percent, perLen - percent);
  15.     len = int(coords[dir]* float(perLen) * float(count));
  16.     float alpha =  float(step(percents[dir], mod(len, perLen)));
  17.     float alphas[] = float[](1.0 - alpha, 1.0 - alpha, alpha, alpha);
  18.     alpha = qt_Opacity * alphas[dir];
  19.     fragColor = vec4(color.rgb * alpha, alpha);
  20. }




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

只看该作者 1楼 发表于: 2020-04-14
快速回复
限100 字节
 
上一个 下一个