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 }
}
}
}
QML-动画效果示例
最新推荐文章于 2024-07-16 10:12:41 发布