1.实现点击矩形,让其斜对角移动
2.实现矩形在x轴的0-50之间来回移动
3.实现点击矩形,宽度缩小到30
import QtQuick 2.12
import QtQuick.Window 2.12
//窗口
Window {
visible: true //可见
width: 640 //宽度
height: 480 //高度
title: qsTr("Animation") //标题
//实现点击矩形,让其斜对角移动
Rectangle {
id: greenRect //矩形元素id
width: 88; //矩形元素宽度
height: 88; //矩形元素高度
color: "green" //矩形元素颜色
Behavior on x {PropertyAnimation{}} //点击(行为)触发x轴上的属性动画
Behavior on y {PropertyAnimation{}} //点击(行为)触发y轴上的属性动画
//鼠标区域
MouseArea {
anchors.fill: parent; //整个矩形框
//点击操作
onClicked:
{
parent.x = 50; //点击,矩形框x轴位置到50
parent.y = 50; //点击,矩形框y轴位置到50
}
}
}
//实现矩形在x轴的0-50之间来回移动
Rectangle {
id: redRect //矩形元素id
width: 88; //矩形元素宽度
height: 88; //矩形元素高度
color: "red" //矩形元素颜色
x: 0; //矩形框x坐标
y: 168; //矩形框y坐标
//在x轴上的顺序动画
SequentialAnimation on x {
loops: Animation.Infinite //动画无限循环
PropertyAnimation{ to: 50 } //属性动画,矩形框到x轴的50位置
PropertyAnimation{ to: 0 } //属性动画,矩形框到x轴的0位置
}
//鼠标区域
MouseArea {
anchors.fill: parent //锚定整个矩形框
//点击触发属性动画
onClicked: PropertyAnimation {
target: redRect; //触发目标:矩形框
property: "opacity"; //透明度
to: 0 //完全透明
}
}
}
//实现点击矩形,宽度缩小到30
Rectangle {
id: blueRect //矩形元素id
width: 88 //矩形元素宽度
height: 88 //矩形元素高度
color: "blue"//矩形元素颜色
x:0 //矩形框x坐标
y: 300 //矩形框y坐标
//属性动画
PropertyAnimation {
id: animation //属性动画id
target: blueRect//属性动画目标:blueRect
property:"width"//属性:宽度
to: 30 //宽度到30
duration: 500 //持续时间500ms
}
//鼠标区域元素
MouseArea {
anchors.fill: parent //锚定到整个矩形框
//点击
onClicked:
{
animation.running = true; //属性动画运行状态:正在运行
}
}
}
}