查看完整版本: [-- Qml特效4-进场动画-对角线 --]

QTCN开发网 -> Qt应用版 -> Qml特效4-进场动画-对角线 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

dd759378563 2019-06-09 18:26

Qml特效4-进场动画-对角线

Qml特效4-进场动画-对角线
目录
(放个目录方便预览。这个目录是从博客复制过来的,点击会跳转到博客)


简介

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


关于文章

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


效果预览

对角线效果,支持从四个方向出现





实现原理

通过数值动画,控制百分比属性percent从0 到100变化
  1. //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中,使用片段着色器实现像素的控制:
  1. 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);
    }






big_mouse 2020-04-14 21:43


查看完整版本: [-- Qml特效4-进场动画-对角线 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled