QML-动画效果示例

最新推荐文章于 2024-06-14 11:15:55 发布

logstach

最新推荐文章于 2024-06-14 11:15:55 发布

阅读量347

点赞数 9

文章标签： c++

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

版权

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 {
        width: 75; height: 75; radius: width
        id: ball
        color: "salmon"

        MouseArea {
            anchors.fill: parent
            onPressed: ball.state = "PRESSED"
            onReleased: ball.state = "RELEASED"
            onClicked: {
                ball.x +=30
                ball.y +=20
            }

        }
        NumberAnimation {
            id: animateOpacity
            target: ball
            properties: "opacity"
            from: 0.1
            to: 1.0
            duration: 1000
       }
        PropertyAnimation {
            id: animateColor;
            target: ball;
            properties: "color";
            to: "green";
            duration: 1000
        }


        //状态设定
        states: [
           State {
               name: "PRESSED"
               PropertyChanges { target: ball; color: "lightblue"}
           },
           State {
               name: "RELEASED"
               PropertyChanges { target: ball; color: "blue"}
           }
        ]

        //设定从一种状态变化到另一种状态的时间
        transitions: [
           Transition {
               from: "PRESSED"
               to: "RELEASED"
               ColorAnimation { target: ball; duration: 1000}
           },
           Transition {
               from: "RELEASED"
               to: "PRESSED"
               ColorAnimation { target: ball; duration: 10}
           }
        ]



        //动画效果
        Behavior on x {
            NumberAnimation {
                id: bouncebehavior
                easing {
                    type: Easing.OutElastic
                    amplitude: 1.0
                    period: 0.5
                }
            }
        }
        Behavior on y {
            animation: bouncebehavior
        }
        Behavior {
            ColorAnimation { target: ball; duration: 100 }
        }
    }

}