qml 实现一个带动画的switch 按钮

一.效果图

      ====》

二.qml 代码

import QtQuick 2.12
import QtQuick.Controls 2.12

Switch {
    id: control
    implicitWidth: 42
    implicitHeight: 20

    indicator: Rectangle {
        id: bkRectangle
        anchors.fill: parent
        x: control.leftPadding
        y: parent.height / 2 - height / 2
        radius: height / 2
        color: control.checked ? "#3986FF" : "#D9D9D9"

        Rectangle {
            id : smallRect
            width: 14
            height: 14
            radius: height / 2
            color: "white"
            anchors.verticalCenter: parent.verticalCenter

            NumberAnimation on x{
                to: bkRectangle.width - smallRect.width - 3
                running: control.checked ? true : false
                duration: 80
            }

            NumberAnimation on x{
                to: 3
                running: control.checked ? false : true
                duration: 80
            }
        }
    }
}