Qml Behavior属性变化时的默认动画

最新推荐文章于 2025-04-18 18:08:46 发布

原创最新推荐文章于 2025-04-18 18:08:46 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qml

工作记录专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何在Qt环境中利用QtQuick创建一个带有鼠标点击动画效果的绿色矩形。通过设置Behavioronx属性，当矩形被点击时，它会在600毫秒内使用OutBounce缓动函数进行位置切换。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.13

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item {
        id: root
        width: 320
        height: 120

        Rectangle {
            id:  rect
            color: "green"
            width: 120
            height: 120

            // 属性变化时动画
            Behavior on x {
                // 动画类型
                NumberAnimation {
                    duration: 600
                    easing.type: Easing.OutBounce
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (rect.x == 0)
                        rect.x = 200
                    else
                        rect.x = 0
                }
            }
        }
    }
}