QML-状态过渡

最新推荐文章于 2024-06-15 11:46:27 发布

logstach

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量340

点赞数 9

文章标签：前端 c++

本文链接：https://blog.csdn.net/weixin_60819724/article/details/136250383

版权

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    width: 640
    height: 480
    color: "white"
    title: qsTr("My QML")
    //窗口显示与否
    visible: true


        Rectangle {
            id: flashingblob
            width: 75; height: 75
            color: "blue"
            opacity: 1.0

            //立刻触发
            PropertyAnimation on x{
                to: 100
                duration: 1000

            }
            PropertyAnimation on y{
                to: 100
                duration: 1000
            }
            PropertyAnimation on width{
                to: 300
                duration: 2000
            }
//            PropertyAnimation on color{
//                to:"black"
//                duration: 2000
//            }

            //立刻触发-状态过渡
            SequentialAnimation on color{

                ColorAnimation {
                    to: "yellow";
                    duration: 1000
                }

                ColorAnimation {
                    to: "black"
                    duration: 1000
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    animateColor.start()//颜色变化
                    animateOpacity.start()//透明度变化
                    animateWidth.start()//几何变化
                }
            }
            //点击触发
            PropertyAnimation {
                id: animateColor;
                target: flashingblob;
                properties: "color";
                to: "green";
                duration: 1000
            }
            NumberAnimation {
                id: animateOpacity
                target: flashingblob
                properties: "opacity"
                from: 0.1
                to: 1.0
                duration: 1000

           }
            NumberAnimation {
                id:animateWidth
                target: flashingblob
                properties: "width"
                from: 75
                to: 150
                duration: 1000

            }
        }
}