目录
(放个目录方便预览。知乎不支持目录,这个目录是从博客复制过来的,点击会跳转到博客)
- 简介
- 关于文章
- 圆盒效果预览
- 实现原理
简介
这是《Qml特效-进场动画》系列文章的第7篇,涛哥将会教大家一些Qml进场动画相关的知识。
进场动画效果 参考了WPS版ppt的动画,基本效果已经全部实现,可以到github TaoQuick项目中预览:
进场动画预览
关于文章
文章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路
圆盒效果预览
圆盒效果,支持由内到外、由外到内两种
实现原理
通过数值动画,控制百分比属性percent从0 到100变化
import QtQuick 2.12
import QtQuick.Controls 2.12
ShaderEffect {
...
enum Direct {
FromInner = 0,
FromOuter = 1
}
property int dir : ASquare.Direct.FromInner
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片段着色器实现像素的控制:
fragmentShader: TCommon.fragmentShaderCommon + (dir === ASquare.Direct.FromInner ? "
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.0;
float dis = distance(qt_TexCoord0, vec2(0.5, 0.5));
float alpha = 1.0 - step(p, dis);
alpha *= qt_Opacity;
fragColor = vec4(color.rgb * alpha, alpha);
}
" : "
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.0;
float dis = distance(qt_TexCoord0, vec2(0.5, 0.5));
float alpha = step(1.0 - p, dis);
alpha *= qt_Opacity;
fragColor = vec4(color.rgb * alpha, alpha);
}
")