QtQuick制作滚动呈现渐变动画_qt界面过渡动画

QtQuick强大的动画系统以及高度自由的特效制作功能，使得制作动画特效尤为简便。

首先我们需要的效果如下图：

 动画从左到右滚动呈现，且未呈现部分有一定的透明度过渡效果，使得滚动更加流畅自然。

制作这个动画需要用到OpenGL片段着色器，来处理最终到达屏幕的颜色，且使用到动画系统，控制又左到右的呈现。

原理图：

点o为当前动画所到达的呈现位置，若文字最左侧为0 最右侧为1，那么点o为0-1的一个浮点数。

最初点o为0点，文字不展示，点o到达最右侧文字完全显示。

点p为当前着色器处理的纹理坐标，渐变长度为gradient，需要考虑到线性渐变，则点p的透明度越靠近点o越低，如果距离点o大于gradient则完全不透明；如果点p距离点o小于gradient，那么点p的透明度计算公式为 t = (o-p)/gradient;如果点p距离；

下面是着色器代码：

uniform float qt_Opacity;
uniform float divider;
uniform float gradient;
uniform sampler2D source;
varying vec2 qt_TexCoord0;
 
void main(void)
{
    float op = divider - qt_TexCoord0.x;
    if(op < 0){
        gl_FragColor = vec4(0);
        return;
    }
 
    if(op >= gradient || divider == 1.0) {
        gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
        return;
    }
    float t = op / gradient;
    vec4 rgba = texture2D(source, qt_TexCoord0);
    gl_FragColor = rgba * t * qt_Opacity;
}

以下为qml框架代码：

import QtQuick 2.14
import QtQuick.Window 2.14
 
Window {
    width: 1024
    height: 480
    visible: true
    title: qsTr("Hello World")
 
 
    Rectangle{
        anchors.fill: parent
        color: "white"
        Text{
            id: text
            anchors.centerIn: parent
            font.pixelSize: 48
            font.italic: true
            color: "green"
            text: "Transiation Present Animation"
        }
        ShaderEffect{
            id: shaderEffect
            anchors.centerIn: parent
            width: text.implicitWidth
            height: text.implicitHeight
            fragmentShader: "qrc:/transationpresent.frag"
            property real divider: 0
            property real gradient: 0.2
            property variant source: shaderSource
            ShaderEffectSource{
                id: shaderSource
                sourceItem: text
                hideSource: true
            }
        }
        NumberAnimation{
            target: shaderEffect
            property: "divider"
            from: 0
            to: 1
            running: true
            duration: 1000
            loops: Animation.Infinite
 
        }
    }
}