• 1433阅读
  • 2回复

Qml特效8-进场动画-十字 [复制链接]

上一主题 下一主题
离线dd759378563
 

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


简介

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


关于文章

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


十字效果预览

十字效果,支持由内到外、由外到内两种





实现原理

通过数值动画,控制百分比属性percent从0 到100变化
  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. ShaderEffect {
  4.     ...
  5.     enum Direct {
  6.         FromInner = 0,
  7.         FromOuter = 1
  8.     }
  9.     property int dir : ASquare.Direct.FromInner
  10.     property int percent: 0
  11.     opacity: percent > 0 ? 1 : 0
  12.     NumberAnimation {
  13.         id: animation
  14.         target: r
  15.         property: "percent"
  16.         from: 0
  17.         to: 100
  18.         alwaysRunToEnd: true
  19.         loops: 1
  20.         duration: 1000
  21.     }
  22.     ...
  23. }



在Shader中,使用glsl片段着色器实现像素的控制:
  1. fragmentShader: TCommon.fragmentShaderCommon + (dir === ASquare.Direct.FromInner ? "
  2.         in vec2 qt_TexCoord0;
  3.         uniform float qt_Opacity;
  4.         uniform sampler2D effectSource;
  5.         uniform int dir;
  6.         uniform int percent;
  7.         out vec4 fragColor;
  8.         void main()
  9.         {
  10.             vec4 color = texture2D(effectSource, qt_TexCoord0);
  11.             float p = float(percent) / 200.0;
  12.             float alpha = 0.0;
  13.             if ((0.5 - p <= qt_TexCoord0.x && qt_TexCoord0.x <= 0.5 + p) ||
  14.                ((qt_TexCoord0.x< 0.5 - p || qt_TexCoord0.x > 0.5 + p) && (0.5 - p <= qt_TexCoord0.y && qt_TexCoord0.y < 0.5 + p))
  15.             )
  16.             {
  17.                 alpha = 1.0;
  18.             }
  19.             alpha *= qt_Opacity;
  20.            fragColor = vec4(color.rgb * alpha, alpha);
  21.        }
  22. " : "
  23.         in vec2 qt_TexCoord0;
  24.         uniform float qt_Opacity;
  25.         uniform sampler2D effectSource;
  26.         uniform int dir;
  27.         uniform int percent;
  28.         out vec4 fragColor;
  29.         void main()
  30.         {
  31.             vec4 color = texture2D(effectSource, qt_TexCoord0);
  32.             float p = float(percent) / 200.0;
  33.             float alpha = ((1.0 - step(p, qt_TexCoord0.x)) + (step(1.0 - p, qt_TexCoord0.x))) *
  34.                         ((1.0 - step(p, qt_TexCoord0.y)) + (step(1.0 - p, qt_TexCoord0.y)));
  35.             alpha = alpha * qt_Opacity;
  36.             fragColor = vec4(color.rgb * alpha, alpha);
  37.         }
  38. ")




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

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

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