目标:点击曲线图片,底部的球会根据缓动曲线进行左右移动。
main.qml
import QtQuickWindow {width: 1500height: 600visible: truetitle: qsTr("缓动曲线动画")Rectangle {id: rootanchors.fill: parentcolor: "gray"gradient: Gradient {GradientStop {position: 0.0; color: root.color}GradientStop {position: 1.0; color: Qt.lighter(root.color, 1.5)}}Grid {anchors.fill: parentanchors.margins: 20spacing: 150rows: 2EasingType {image_name: "InExpo"easingType: Easing.LinearonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "InOutBack"easingType: Easing.InOutBackonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "InOutBounce"easingType: Easing.InOutBounceonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "InOutCirc"easingType: Easing.InOutCirconClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "InOutCubic"easingType: Easing.InOutCubiconClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "InoutElastic"easingType: Easing.InoutElasticonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "InOutExpo"easingType: Easing.InOutExpoonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "Linear"easingType: Easing.LinearonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "OutExpo"easingType: Easing.OutExpoonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}EasingType {image_name: "SineCurve"easingType: Easing.SineCurveonClicked: {am.easing.type = easingTypebox.toggle = !box.toggle}}}Image {anchors.bottom: parent.bottomid: boxsource: "images/精灵球.png"scale: 0.7property bool togglex: toggle ? width : root.width-width *2width: 100; height: 100Behavior on x {NumberAnimation {id: amduration: 1500}}}}
}
EasingType.qml
import QtQuickItem {id: rootwidth: 100height: 100property alias image_name: label.text //图片名称property alias source: image.source //图片路径property var easingTypesignal clickedImage {id: imagesource: "images/" + image_name + ".png"width: 200height: 100Text {id: labeltext: qsTr("text")anchors.left: parent.leftanchors.horizontalCenter: parent.horizontalCenter}}MouseArea {anchors.fill: parentonClicked: root.clicked()}
}