QmlStates过渡动画以及锚点过渡

最新推荐文章于 2024-11-22 12:54:46 发布

原创最新推荐文章于 2024-11-22 12:54:46 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#qml

工作记录专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何利用Qt库创建一个简单的窗口应用，并实现图形元素的过渡动画。通过导入QtQuick、QtQuick.Window和QtCharts模块，作者创建了一个640x480像素的窗口，内含一个红色矩形。矩形可以切换两种状态，分别是锚点右边和下边对齐。点击矩形时，不仅改变其位置状态，还会增加宽度。此外，博客还详细说明了如何定义和应用过渡动画，以及在组件加载完成后设置初始状态。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3
import QtQml 2.13

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


    Item {
        id: container
        anchors.fill: parent

        // 定义过渡 子类会生效
        transitions:[ Transition {
            AnchorAnimation { duration: 2000 }
        }, Transition {
            NumberAnimation { duration: 2000}
        }]

        // 矩形
        Rectangle {
            id: myRect
            width: 100; height: 100
            color: "red"
        }

        // 状态列表
        states: [

            // 锚点右边走
            State {
                name: "reanchored"
                AnchorChanges { target: myRect; anchors.right: container.right }
            },

            // 锚点下边走
            State {
                name: 'jie'
                AnchorChanges {
                    target: myRect
                    anchors.left: container.left
                }
            }

        ]


        // 点击切换矩形的状态，转换过渡动画
        MouseArea {
            anchors.fill: parent
            onClicked: {
                container.state = 'jie'
                myRect.width = container.width / 2      // 增加宽度
            }
        }

        // 组件加载完成时的设置状态
        Component.onCompleted: container.state = "reanchored"
    }

}