Property Animation 简单的例子

官方文档可参考：https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html

成品预览

代码示例

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Property Animation 例子")

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "lightblue"
        //anchors.centerIn: parent  /* 不可以设置 anchors 否则 x 是固定的 */

        PropertyAnimation {
            id: animation01
            target: rect    /* 选择动画绑定的目标对象 */
            property: "x"
            to: root.width - rect.x - rect.width
            duration: 1000
            easing.type: Easing.OutInCubic
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                animation01.start()
            }
        }

    }
}

注意：代码开头的 import QtQuick 2.15 需根据您使用的版本来填写，我本人使用的是 Qt 15.2 。关于具体的 import 可以参考官方文档。

感兴趣的朋友可以来关注我的 Qt 学习笔记，大家一起进步！
https://zhuanlan.zhihu.com/p/455631607