TheIndependentAquarius February 2016

How to add animation onPressed and onReleased in QML Slider?

http://doc.qt.io/qt-5/qml-qtquick-controls-styles-sliderstyle.html

Slider {
    anchors.centerIn: parent
    style: SliderStyle {
        groove: Rectangle {
            implicitWidth: 200
            implicitHeight: 8
            color: "gray"
            radius: 8
        }
        handle: Rectangle {
            anchors.centerIn: parent
            color: control.pressed ? "white" : "lightgray"
            border.color: "gray"
            border.width: 2
            implicitWidth: 34
            implicitHeight: 34
            radius: 12
        }
    }

How to access the onReleased and onPressed of the slider in order to start and stop some animation?

Here is what I tried:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4

Window {
    visible: true
    Slider
    {
        id: head
        property Rectangle thumb: thumb
        anchors.centerIn: parent
        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                id: thumb
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 34
                implicitHeight: 34
                radius: 12
            }
        }

        onPressedChanged:
        {
            if(pressed)
            {
                console.log("pressed")
                returnAnimation.stop()
            }
            else
            {
                console.log("released")
                returnAnimation.start()
            }
        }

        ParallelAnimation {
              

Answers


folibis February 2016

That what I meant in the comment above:

 Slider {
    ...
    onPressedChanged: {
        if(pressed)
            console.log("pressed")
        else
            console.log("released")
    }
}


Miika Pirttilä February 2016

Would this work?

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4

Window {
    visible: true
    Slider
    {
        id: head
        property Rectangle thumb: thumb

        //Added these signals:
        signal startAnim
        signal stopAnim

        anchors.centerIn: parent
        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                id: thumb
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 34
                implicitHeight: 34
                radius: 12

                //Moved animation within the confines of the object that it actually pertains to
                ParallelAnimation {
                    id: returnAnimation
                    NumberAnimation { target: thumb.anchors; property: "horizontalCenterOffset";
                        to: 0; duration: 200; easing.type: Easing.OutSine }
                    NumberAnimation { target: thumb.anchors; property: "verticalCenterOffset";
                        to: 0; duration: 200; easing.type: Easing.OutSine }
                }

                //Signal connections done here:
                Component.onCompleted: {
                    head.startAnim.connect(returnAnimation.start)
                    head.stopAnim.connect(returnAnimation.stop)
                }
            }
        }

        onPressedChanged:
        {
            if(pressed)
            {
                console.log("pressed")
                startAnim()
            }
            else
            {
                console.log("released")
                stopAnim()
            }
        }
    }
}

Post Status

Asked in February 2016
Viewed 2,978 times
Voted 12
Answered 2 times

Search




Leave an answer