qml 动画 ParentAnimation

最新推荐文章于 2023-02-26 16:13:00 发布

原创最新推荐文章于 2023-02-26 16:13:00 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

qt 专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了如何在QtQuick中通过状态器(State)和过渡器(Transition)来改变元素的层级关系，具体演示了如何将蓝色矩形(reblueRect)设置为红色矩形(redRect)的子元素，并在动画效果中平滑地调整其位置到红色矩形左上角的10,10位置。

import QtQuick 2.0

Item {
    width: 200; height: 100

    Rectangle {
        id: redRect
        width: 100; height: 100
        color: "red"
    }

    Rectangle {
        id: blueRect
        x: 150
        width: 50; height: 50
        color: "blue"

        //状态器
        states: State {
            name: "reparented"
            //目标:blueRect,把blueRect的上层设置为redRect，而且位置设置为redRect左上角为起点偏移(10,10)的位置
            ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
        }

        //过度器
        transitions: Transition {
            ParentAnimation {
                NumberAnimation { properties: "x,y"; duration: 1000 }
            }
        }

        MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
    }
}