查看完整版本: [-- Qml特效10-进场动画-轮子 --]

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

dd759378563 2019-06-09 18:32

Qml特效10-进场动画-轮子

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


简介

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


关于文章

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


轮子效果预览

轮子效果,支持顺时针、逆时针两个反向,以及扇形方向







实现原理

通过数值动画,控制百分比属性percent从0 到100变化
  1. import QtQuick 2.12
    import QtQuick.Controls 2.12
    ShaderEffect {
        ...
        enum Direct {
            Clockwise = 0,
            CounterClockwise = 1
        }
        property int dir : AWheel.Direct.Clockwise
        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片段着色器实现像素的控制:
  1. fragmentShader: TCommon.fragmentShaderCommon + (dir === AWheel.Direct.CounterClockwise ? "
            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 per = float(percent) / 100.0 * -360.0;
                const vec2 origin = vec2(0.5, 0.5);
                const vec2 a = vec2(0.5, 0.0);
                vec2 c = qt_TexCoord0 - origin;
                float alpha = 0.0;
                if (per >= -180.0) {
                    if (qt_TexCoord0.y > 0.5) {
                        if (cos(radians(per))* length(c) * length(a) < dot(c, a)) {
                            alpha = 1.0;
                        }
                    }
                } else {
                    if (qt_TexCoord0.y < 0.5) {
                        if (cos(radians(per))* length(c) * length(a) > dot(c, a)) {
                            alpha = 1.0;
                        }
                    } else {
                        alpha = 1.0;
                    }
                }
                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 per = float(percent) / 100.0 * 360.0;
                const vec2 origin = vec2(0.5, 0.5);
                const vec2 a = vec2(0.5, 0.0);
                vec2 c = qt_TexCoord0 - origin;
                float alpha = 0.0;
                if (per <= 180.0) {
                    if (qt_TexCoord0.y < 0.5) {
                        if (cos(radians(per))* length(c) * length(a) < dot(c, a)) {
                            alpha = 1.0;
                        }
                    }
                } else {
                    if (qt_TexCoord0.y > 0.5) {
                        if (cos(radians(per))* length(c) * length(a) > dot(c, a)) {
                            alpha = 1.0;
                        }
                    } else {
                        alpha = 1.0;
                    }
                }
                alpha *= qt_Opacity;
                fragColor = vec4(color.rgb * alpha, alpha);
           }
    ")



扇形效果:
  1. in vec2 qt_TexCoord0;
    uniform float qt_Opacity;
    uniform sampler2D effectSource;
    uniform int percent;
    out vec4 fragColor;
    void main()
    {
         vec4 color = texture2D(effectSource, qt_TexCoord0);
         float per = float(percent) / 100.0 * 180;
         const vec2 origin = vec2(0.5, 0.5);
         const vec2 a = vec2(0.5, 0.0);
         vec2 c = qt_TexCoord0 - origin;
         float alpha = 0.0;
         if (cos(radians(per))* length(c) * length(a) < dot(c, a)) {
             alpha = 1.0;
         }
         alpha *= qt_Opacity;
         fragColor = vec4(color.rgb * alpha, alpha);
    }





big_mouse 2020-04-14 21:42


查看完整版本: [-- Qml特效10-进场动画-轮子 --] [-- top --]



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