dd759378563 |
2019-06-09 18:26 |
Qml特效4-进场动画-对角线
Qml特效4-进场动画-对角线 目录 (放个目录方便预览。这个目录是从博客复制过来的,点击会跳转到博客)
简介 这是《Qml特效-进场动画》系列文章的第4篇,涛哥将会教大家一些Qml进场动画相关的知识。 进场动画效果 参考了WPS版ppt的动画,基本效果已经全部实现,可以到github TaoQuick项目中预览: 进场动画预览 关于文章 文章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路 效果预览 对角线效果,支持从四个方向出现
实现原理 通过数值动画,控制百分比属性percent从0 到100变化
- //ADiagonal.qml
import QtQuick 2.12 import QtQuick.Controls 2.12 ShaderEffect { ... //枚举声明四种方向 enum Direct { FromLeftTop = 0, FromRightTop = 1, FromLeftBottom = 2, FromRightBottom = 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中,使用片段着色器实现像素的控制:
- 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 ps[] = float[](2.0f * p - qt_TexCoord0.x - qt_TexCoord0.y, qt_TexCoord0.y - (1.0f - 2.0f *(1.0 - p)) - qt_TexCoord0.x, qt_TexCoord0.x + (1.0f - 2.0f * p) - qt_TexCoord0.y, qt_TexCoord0.y - 2.0f * (1.0 - p) + qt_TexCoord0.x); float alpha = step(0, ps[dir]); float alphas[] = float[](alpha, 1.0f - alpha, 1.0f - alpha, alpha); alpha = alphas[dir]; fragColor = vec4(color.rgb * alpha, alpha); }
|
|