如何在QML Slider中添加动画on​​Pressed和onReleased？

Question

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
        }
    }

如何访问滑块的onReleased和onPressed以启动和停止某些动画？

以下是我的尝试：

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 {
            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 }
        }

    }
}

错误：

  

ReferenceError：未定义拇指

Answer 1

我在上面的评论中的意思是：

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

Answer 2

这是一个完整的例子。你必须创建自己的图像，因为我无法附加它们。

我发现使用组件对象在QML中确定范围很棘手。 Slider中的“：style：handle”组件可以“看到”更高级别，但更高级别不能“看到”“：style：handle”组件。

一般策略

1. 在顶级滑块范围内创建属性
2. 使用“：style：handle”组件中的属性，因为它可以“看到”
3. 使用更高级别的onPressedChanged处理程序和被按下的属性来调整低级别组件“看到”的高级属性。

Slider {
    id: portVoltageSlider

    width: 100; height: 27
    maximumValue: 150; minimumValue: -150
    value: 0.00
    stepSize: 10

    anchors { centerIn: parent }

    // style:handle component will be able to see/access this property
    // opacity value of style: SliderStyle:handle.sliderHover
    property real hoverOpacity: 0

    // adjust property on slider pressed
    onPressedChanged: {
        // show slider Hover when pressed, hide otherwise
        if( pressed ) {
            console.log("slider pressed. show hover.")
            hoverShowAnimation.start()
        }
        else {
            console.log("slider released. hide hover.")
            hoverHideAnimation.start()
        }
    }

   // gratuitous animation using opacity
   PropertyAnimation {
        id: hoverShowAnimation
        target: portVoltageSlider; properties: "hoverOpacity"; from: portVoltageSlider.hoverOpacity; to: 1; duration: 500
    }

    PropertyAnimation {
        id: hoverHideAnimation
        target: portVoltageSlider; properties: "hoverOpacity"; from: portVoltageSlider.hoverOpacity; to: 0; duration: 500
    }

   style: SliderStyle {
        id: sliderStyle

        property bool hoverVisible: false

        groove: Rectangle {
            //                        x: slider1.leftPadding
            y: portVoltageSlider.topPadding + portVoltageSlider.availableHeight / 2 - height / 2
            implicitWidth: 200; implicitHeight: 4
            width: portVoltageSlider.availableWidth; height: implicitHeight
            radius: 2
            color: "#bdbebf"

            Rectangle {
                width: portVoltageSlider.visualPosition * parent.width; height: parent.height
                color: "yellow"
                radius: 2
            }
        }

        handle: Image {
            id: sliderHandle

            width: 22; height: 24
            source: "sliderThumb.svg"
            anchors { centerIn: parent }

            Image {
                id: sliderHover

                width: 22; height: 24
                source: "sliderValue.svg"
                anchors { bottom: sliderHandle.top }
                opacity: portVoltageSlider.hoverOpacity

                Label {
                    id: check

                    anchors {centerIn: parent; verticalCenterOffset: -4 }
                    text: portVoltageSlider.value
                    font.pointSize: 6
                    font.bold: true
                }
            }
        }
    }

}

Answer 3

这会有用吗？

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()
            }
        }
    }
}