QML做渐变色文字动画

最新推荐文章于 2024-08-21 09:34:27 发布

超奇电子

最新推荐文章于 2024-08-21 09:34:27 发布

阅读量1.2k

点赞数 3

分类专栏： QML

本文链接：https://blog.csdn.net/alongsxmx/article/details/103821312

版权

QML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Item {
        id: container
        width:200
        height:200

        Rectangle {
             id: gradientRect;
             width:80
             height: 80
             gradient: Gradient {
                 GradientStop { position: 0; color: "red" }
                 GradientStop { position: 1; color: "steelblue" }
             }
             visible: false
             layer.enabled: true;
             layer.smooth: true
         }

        Text {
            id: text
            anchors.centerIn: parent
            color: "pink"
            text: "Hello world!"
            font.pixelSize: 32
            layer.samplerName: "maskSource"
            layer.enabled: true
                 layer.effect: ShaderEffect {
                     property var colorSource: gradientRect;
                     fragmentShader: "
                               uniform lowp sampler2D colorSource;
                               uniform lowp sampler2D maskSource;
                               uniform lowp float qt_Opacity;
                               varying highp vec2 qt_TexCoord0;
                               void main() {
                                   gl_FragColor =
                                       texture2D(colorSource, qt_TexCoord0)
                                       * texture2D(maskSource, qt_TexCoord0).a
                                       * qt_Opacity;
                               }
                           "
                 }



            SequentialAnimation on font.letterSpacing {
                loops: Animation.Infinite;
                NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
                ScriptAction {
                    script: {
                        container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
                        container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
                    }
                }
            }

            SequentialAnimation on opacity {
                loops: Animation.Infinite;
                NumberAnimation { from: 1; to: 0; duration: 2600 }
                PauseAnimation { duration: 400 }
            }
        }
    }

效果如下：