Como criar gradientes animados em Qt/QML ✨

Por conta da escassez de conteúdo avançado disponível sobre alguns tópicos em QML, criar componentes modernos pode ser muuuuuuito desafiador. Nesse tutorial vou te ensinar a criar um gradiente animado utilizando Qt 6.5, sem enrolação. Vou usar o botão de exemplo, já que foi uma task real que precisei fazer, mas pode ser aplicado à qualquer componente, já que esse código vai ser bem fácil de abstrair. 1. Criando o botao import QtQuick import QtQuick.Window import QtQuick.Controls.Basic Window { width: 640 height: 480 visible: true Button { id: animatedButton height: 44 width: 156 anchors.centerIn: parent contentItem: Text { text: "Button" font { bold: true pixelSize: 16 } color: "#EBECED" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } background: Rectangle { id: backgroundRectangle anchors.fill: parent color: "black" } HoverHandler { cursorShape: Qt.PointingHandCursor } } } Output: 2. Adicionando o gradiente ao background Aqui vamos definir 3 propriedades para utilizar no GradientStop, que é o responsável por aplicar a cor no ponto definido pela propriedade position Button { id: animatedButton property color firstColor: "#A10A0B" property color secondColor: "#C8191E" property color thirdColor: "#FF2F3A" height: 44 width: 156 anchors.centerIn: parent contentItem: Text { text: "Button" font { bold: true pixelSize: 16 } color: "#EBECED" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } background: Rectangle { id: backgroundRectangle anchors.fill: parent gradient: Gradient { orientation: Gradient.Horizontal // Aqui você pode escolher qual será a orientação do Gradiente (O default é Vertical) GradientStop { position: 0 color: animatedButton.firstColor } GradientStop { position: 0.5 color: animatedButton.secondColor } GradientStop { position: 0.7 color: animatedButton.secondColor } GradientStop { position: 1 color: animatedButton.thirdColor } } radius: 4 } Output: ˖°✧ aqui já ficou lindo, né? ✧˖° 3. Criando e executando a animação Eu optei por utilizar o SequentialAnimation pois ele me permite executar multiplas animações uma após a outra, dando o efeito de movimento que eu precisava pra essa task. E o ColorAnimation é quem vai cuidar da troca de uma cor pra outra (Da cor definida no meu gradiente inicial, para uma cor nova que eu vou definir) SequentialAnimation { id: gradientAnimation ColorAnimation { from: "#FF2F3A" to: "#A10A0B" duration: 450 targets: animatedButton properties: "firstColor" } ColorAnimation { from: "#FF2F3A" to: "#A10A0B" duration: 450 targets: animatedButton properties: "secondColor" } ColorAnimation { from: "#FF2F3A" to: "#A10A0B" duration: 450 targets: animatedButton properties: "thirdColor" } // Aqui você vai definir o número de vezes que essa animação deve ser executada // Caso queira que ela execute sem parar, você vai usar o Animation.Infinite loops: Animation.Infinite } Por último, você vai escolher quando essa animação será executada utilizando a função restart() Eu optei por executá-la quando o componente é criado, então adicionei ao onCompleted, chamando a função pelo id da animação: Component.onCompleted: gradientAnimation.restart() E Assim ficou o Código completo com a animação executando: import QtQuick import QtQuick.Window import QtQuick.Controls.Basic import QtQuick.Layouts Window { width: 640 height: 480 visible: true Component.onCompleted: gradientAnimation.restart() Button { id: animatedButton property color firstColor: "#A10A0B" property color secondColor: "#C8191E" property color thirdColor: "#FF2F3A" height: 44 width: 156 anchors.centerIn: parent contentItem: Text { text:

Viral News

Mar 24, 2024 - 00:03

Como criar gradientes animados em Qt/QML ✨

Por conta da escassez de conteúdo avançado disponível sobre alguns tópicos em QML, criar componentes modernos pode ser muuuuuuito desafiador. Nesse tutorial vou te ensinar a criar um gradiente animado utilizando Qt 6.5, sem enrolação.

Vou usar o botão de exemplo, já que foi uma task real que precisei fazer, mas pode ser aplicado à qualquer componente, já que esse código vai ser bem fácil de abstrair.

1. Criando o botao

import QtQuick
import QtQuick.Window
import QtQuick.Controls.Basic

Window {
    width: 640
    height: 480
    visible: true

    Button {
        id: animatedButton
        height: 44
        width: 156
        anchors.centerIn: parent

        contentItem: Text {
            text: "Button"
            font {
                bold: true
                pixelSize: 16
            }
            color: "#EBECED"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        background: Rectangle {
            id: backgroundRectangle
            anchors.fill: parent
            color: "black"
        }

        HoverHandler {
            cursorShape: Qt.PointingHandCursor
        }
    }
}

Output:

2. Adicionando o gradiente ao `background`

Aqui vamos definir 3 propriedades para utilizar no GradientStop, que é o responsável por aplicar a cor no ponto definido pela propriedade position

Button {
        id: animatedButton
        property color firstColor: "#A10A0B"
        property color secondColor: "#C8191E"
        property color thirdColor: "#FF2F3A"
        height: 44
        width: 156
        anchors.centerIn: parent

        contentItem: Text {
            text: "Button"
            font {
                bold: true
                pixelSize: 16
            }
            color: "#EBECED"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        background: Rectangle {
            id: backgroundRectangle
            anchors.fill: parent
            gradient: Gradient {
                orientation: Gradient.Horizontal // Aqui você pode escolher qual será a orientação do Gradiente (O default é Vertical)
                GradientStop {
                    position: 0
                    color: animatedButton.firstColor
                }
                GradientStop {
                    position: 0.5
                    color: animatedButton.secondColor
                }
                GradientStop {
                    position: 0.7
                    color: animatedButton.secondColor
                }
                GradientStop {
                    position: 1
                    color: animatedButton.thirdColor
                }
            }
            radius: 4
        }

Output:

˖°✧ aqui já ficou lindo, né? ✧˖°

3. Criando e executando a animação

Eu optei por utilizar o SequentialAnimation pois ele me permite executar multiplas animações uma após a outra, dando o efeito de movimento que eu precisava pra essa task.
E o ColorAnimation é quem vai cuidar da troca de uma cor pra outra (Da cor definida no meu gradiente inicial, para uma cor nova que eu vou definir)

SequentialAnimation {
            id: gradientAnimation
            ColorAnimation {
                from: "#FF2F3A"
                to: "#A10A0B"
                duration: 450
                targets: animatedButton
                properties: "firstColor"
            }
            ColorAnimation {
                from: "#FF2F3A"
                to: "#A10A0B"
                duration: 450
                targets: animatedButton
                properties: "secondColor"
            }
            ColorAnimation {
                from: "#FF2F3A"
                to: "#A10A0B"
                duration: 450
                targets: animatedButton
                properties: "thirdColor"
            }

            // Aqui você vai definir o número de vezes que essa animação deve ser executada
            // Caso queira que ela execute sem parar, você vai usar o Animation.Infinite
            loops: Animation.Infinite
}

Por último, você vai escolher quando essa animação será executada utilizando a função `restart()`

Eu optei por executá-la quando o componente é criado, então adicionei ao onCompleted, chamando a função pelo id da animação:

Component.onCompleted: gradientAnimation.restart()

E Assim ficou o Código completo com a animação executando:

import QtQuick
import QtQuick.Window
import QtQuick.Controls.Basic
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true

    Component.onCompleted: gradientAnimation.restart()

    Button {
        id: animatedButton
        property color firstColor: "#A10A0B"
        property color secondColor: "#C8191E"
        property color thirdColor: "#FF2F3A"
        height: 44
        width: 156
        anchors.centerIn: parent

        contentItem: Text {
            text: "Button"
            font {
                bold: true
                pixelSize: 16
            }
            color: "#EBECED"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        background: Rectangle {
            id: backgroundRectangle
            anchors.fill: parent
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop {
                    position: 0
                    color: animatedButton.firstColor
                }
                GradientStop {
                    position: 0.5
                    color: animatedButton.secondColor
                }
                GradientStop {
                    position: 0.7
                    color: animatedButton.secondColor
                }
                GradientStop {
                    position: 1
                    color: animatedButton.thirdColor
                }
            }
            radius: 4
        }
        SequentialAnimation {
            id: gradientAnimation
            ColorAnimation {
                from: "#FF2F3A"
                to: "#A10A0B"
                duration: 450
                targets: animatedButton
                properties: "firstColor"
            }
            ColorAnimation {
                from: "#FF2F3A"
                to: "#A10A0B"
                duration: 450
                targets: animatedButton
                properties: "secondColor"
            }
            ColorAnimation {
                from: "#FF2F3A"
                to: "#A10A0B"
                duration: 450
                targets: animatedButton
                properties: "thirdColor"
            }

            loops: Animation.Infinite
        }

        HoverHandler {
            cursorShape: Qt.PointingHandCursor
        }
    }
}

Output:

Conclusão

Este tutorial mostrou como criar e animar gradientes em QML, utilizando um botão como exemplo. As técnicas apresentadas podem ser adaptadas para enriquecer outros componentes de sua interface de usuário.

Espero que tenha sido útil para alguém e sintam-se livres para comentar ou perguntar algo nos comentários!

Grande abraço e tchauuu

Tags:

Buy Google 5 Star Reviews

What's Your Reaction?

Dislike

Love

Funny

Angry

Sad

Wow

Viral News Code whisperer by profession, narrative alchemist by passion. With 6 years of tech expertise under my belt, I bring a unique blend of logic and imagination to ViralNews360. Expect everything from tech explainers that melt your brain (but not your circuits) to heartwarming tales that tug at your heartstrings. Come on in, the virtual coffee's always brewing!