qml的10种缓动曲线动画效果

喵呜角角

于 2024-01-27 12:49:33 发布

阅读量233

点赞数 2

分类专栏： QML 文章标签： qml qt quick qt qt6 动画

本文链接：https://blog.csdn.net/weixin_53989417/article/details/135881403

版权

QML 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

目标：点击曲线图片，底部的球会根据缓动曲线进行左右移动。

main.qml

import QtQuick

Window {
    width: 1500
    height: 600
    visible: true
    title: qsTr("缓动曲线动画")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "gray"

        gradient: Gradient {
            GradientStop {position: 0.0; color: root.color}
            GradientStop {position: 1.0; color: Qt.lighter(root.color, 1.5)}
        }

        Grid {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 150
            rows: 2

            EasingType {
                image_name: "InExpo"

                easingType: Easing.Linear
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "InOutBack"

                easingType: Easing.InOutBack
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "InOutBounce"

                easingType: Easing.InOutBounce
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "InOutCirc"

                easingType: Easing.InOutCirc
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "InOutCubic"

                easingType: Easing.InOutCubic
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "InoutElastic"

                easingType: Easing.InoutElastic
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "InOutExpo"

                easingType: Easing.InOutExpo
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "Linear"

                easingType: Easing.Linear
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "OutExpo"

                easingType: Easing.OutExpo
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }

            EasingType {
                image_name: "SineCurve"

                easingType: Easing.SineCurve
                onClicked: {
                    am.easing.type = easingType
                    box.toggle = !box.toggle
                }
            }
        }

        Image {
            anchors.bottom: parent.bottom
            id: box
            source: "images/精灵球.png"
            scale: 0.7
            property bool toggle
            x: toggle ? width : root.width-width *2
            width: 100; height: 100

            Behavior on x {
                NumberAnimation {
                    id: am
                    duration: 1500
                }
            }
        }

    }
}

EasingType.qml

import QtQuick

Item {
    id: root
    width: 100
    height: 100

    property alias image_name: label.text //图片名称
    property alias source: image.source //图片路径
    property var easingType
    signal clicked

    Image {
        id: image
        source: "images/" + image_name + ".png"
        width: 200
        height: 100

        Text {
            id: label
            text: qsTr("text")
            anchors.left: parent.left
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}