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:
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
What's Your Reaction?
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!
