Custom QML Button Gradient animation - HOWTO

[MarkoSan]

Dear Sirs and Madams!

I have following custom QML Button, named UeButton (in file UeButton.qml):

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick 2.5
 
Button
{
    id: ueButton
 
    property string ueText
 
    signal ueSignalButtonClicked
 
    text: ueText
 
    style: ButtonStyle
    {
        background: Rectangle
        {
            antialiasing: true
            smooth: true
            gradient: Gradient
            {
                GradientStop
                {
                    id: ueButtonGradientStopPosition0
 
                    position: 0
                    color: "#ffffff"
                }   // GradientStop
 
                GradientStop
                {
                    id: ueButtonGradientStopPosition1
 
                    position: 0.418
                    color: "#000000"
                }   // GradientStop
            }   // Gradient
 
            border.color: "steelblue"
            border.width: 1
            radius: 4
        }   // background
 
        label: Text
        {
            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 16
 
            text: control.text
        }   // label
    }   // ButtonStyle
 
    MouseArea
    {
        id: ueButtonMouseArea
 
        anchors.fill: parent
 
        onClicked:
        {
            parent.clicked()
            ueButton.ueSignalButtonClicked()
        }
    }   // MouseArea
}   // ueButton

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick 2.5

Button
{
    id: ueButton

    property string ueText

    signal ueSignalButtonClicked

    text: ueText

    style: ButtonStyle
    {
        background: Rectangle
        {
            antialiasing: true
            smooth: true
            gradient: Gradient
            {
                GradientStop
                {
                    id: ueButtonGradientStopPosition0

                    position: 0
                    color: "#ffffff"
                }   // GradientStop

                GradientStop
                {
                    id: ueButtonGradientStopPosition1

                    position: 0.418
                    color: "#000000"
                }   // GradientStop
            }   // Gradient

            border.color: "steelblue"
            border.width: 1
            radius: 4
        }   // background

        label: Text
        {
            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 16

            text: control.text
        }   // label
    }   // ButtonStyle

    MouseArea
    {
        id: ueButtonMouseArea

        anchors.fill: parent

        onClicked:
        {
            parent.clicked()
            ueButton.ueSignalButtonClicked()
        }
    }   // MouseArea
}   // ueButton

To copy to clipboard, switch view to plain text mode 

Now, what I want is when user clicks on button, the GradientStop points gets reversed. How do I achieve this?

Sincerely,
Marko

[MarkoSan]

I've managed to animate gradient with following code chunk (from this example):

SequentialAnimation on color
{
    loops: Animation.Infinite
 
    ColorAnimation
    {
        from: "#636363"
        to: "#303030"
        duration: 250
    }
    ColorAnimation
    {
        from: "#303030"
        to: "#636363"
        duration: 250
    }
}

SequentialAnimation on color
{
    loops: Animation.Infinite

    ColorAnimation
    {
        from: "#636363"
        to: "#303030"
        duration: 250
    }
    ColorAnimation
    {
        from: "#303030"
        to: "#636363"
        duration: 250
    }
}

To copy to clipboard, switch view to plain text mode 

But, how do I trigger this animation once the user clicks on UeButton?

[MarkoSan]

I've managed to animate gradient with following code of UeButton:

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick 2.5
 
Button
{
    id: ueButton
 
    property string ueText
 
    signal ueSignalButtonClicked
 
    text: ueText
 
    style: ButtonStyle
    {
        background: Rectangle
        {
            antialiasing: true
            smooth: true
            gradient: Gradient
            {
                GradientStop
                {
                    id: ueButtonAnimatedGradientStopPosition0
 
                    position: 0
 
                    color: "#ffffff"
 
                    ParallelAnimation on color
                    {
                        loops: 1
                        running: ueButtonMouseArea.pressed
 
                        ColorAnimation
                        {
                            from: "#ffffff"
                            to: "#000000"
                            duration: 25
                        }   // ColorAnimation
 
                        ColorAnimation
                        {
                            from: "#000000"
                            to: "#ffffff"
                            duration: 25
                        }   // ColorAnimation
                    }   // ParallelAnimation
                }   // GradientStop
 
                GradientStop
                {
                    id: ueButtonAnimatedGradientStopPosition1
 
                    position: 0.418
 
                    color: "#000000"
 
                    ParallelAnimation on color
                    {
                        loops: 1
                        running: ueButtonMouseArea.pressed
 
                        ColorAnimation
                        {
                            from: "#000000"
                            to: "#ffffff"
                            duration: 25
                        }   // ColorAnimation
 
                        ColorAnimation
                        {
                            from: "#ffffff"
                            to: "#000000"
                            duration: 25
                        }   // ColorAnimation
                    }   // ParallelAnimation
                }   // GradientStop
            }   // Gradient
 
            border.color: "steelblue"
            border.width: 1
            radius: 4
        }   // background
 
        label: Text
        {
            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 16
 
            text: control.text
        }   // label
    }   // ButtonStyle
 
    MouseArea
    {
        id: ueButtonMouseArea
 
        anchors.fill: parent
 
        onClicked:
        {
            parent.clicked()
            ueButton.ueSignalButtonClicked()
        }
    }   // MouseArea
}   // ueButton

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick 2.5

Button
{
    id: ueButton

    property string ueText

    signal ueSignalButtonClicked

    text: ueText

    style: ButtonStyle
    {
        background: Rectangle
        {
            antialiasing: true
            smooth: true
            gradient: Gradient
            {
                GradientStop
                {
                    id: ueButtonAnimatedGradientStopPosition0

                    position: 0

                    color: "#ffffff"

                    ParallelAnimation on color
                    {
                        loops: 1
                        running: ueButtonMouseArea.pressed

                        ColorAnimation
                        {
                            from: "#ffffff"
                            to: "#000000"
                            duration: 25
                        }   // ColorAnimation

                        ColorAnimation
                        {
                            from: "#000000"
                            to: "#ffffff"
                            duration: 25
                        }   // ColorAnimation
                    }   // ParallelAnimation
                }   // GradientStop

                GradientStop
                {
                    id: ueButtonAnimatedGradientStopPosition1

                    position: 0.418

                    color: "#000000"

                    ParallelAnimation on color
                    {
                        loops: 1
                        running: ueButtonMouseArea.pressed

                        ColorAnimation
                        {
                            from: "#000000"
                            to: "#ffffff"
                            duration: 25
                        }   // ColorAnimation

                        ColorAnimation
                        {
                            from: "#ffffff"
                            to: "#000000"
                            duration: 25
                        }   // ColorAnimation
                    }   // ParallelAnimation
                }   // GradientStop
            }   // Gradient

            border.color: "steelblue"
            border.width: 1
            radius: 4
        }   // background

        label: Text
        {
            color: "#ffffff"
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 16

            text: control.text
        }   // label
    }   // ButtonStyle

    MouseArea
    {
        id: ueButtonMouseArea

        anchors.fill: parent

        onClicked:
        {
            parent.clicked()
            ueButton.ueSignalButtonClicked()
        }
    }   // MouseArea
}   // ueButton

To copy to clipboard, switch view to plain text mode 

Since I did this for the first time, are there any optimizations available?

Sincerely,
Marko