一个人如何创建一个动画,其中一个项目的大小缩放,然后缩小到原来的大小(想想一个"弹跳的球"从顶部/鸟瞰)。到目前为止,我只知道如何通过修改父元素来使用"x/y上的行为"创建一个单向动画。X和parent.y
例如…Rectangle {
id: container;
width: 700
height: 700
function goForIt(parent) {
parent.x = (Math.floor(Math.random()*600));
parent.y = (Math.floor(Math.random()*600));
parent.width += 100;
parent.height += 100;
}
Image {
id: head;
source: "vlad.png";
height: 80;
width: 90;
MouseArea {
anchors.fill: parent
onClicked: goForIt(parent);
}
Behavior on x {
PropertyAnimation {
target: head;
properties: "x";
duration: 1000;
}
}
Behavior on y {
PropertyAnimation {
target: head;
properties: "y";
duration: 1000;
}
}
Behavior on height {
PropertyAnimation {
target: head;
properties: "height";
duration: 1000;
}
}
Behavior on width {
PropertyAnimation {
target: head;
properties: "width";
duration: 1000;
}
}
}
}
你可以创建你想要的动画作为在onClicked处理程序中启动的SequenceAnimation。
import QtQuick 1.0
Rectangle {
id: container;
width: 700
height: 700
function goForIt(parent) {
parent.x = (Math.floor(Math.random()*600));
parent.y = (Math.floor(Math.random()*600));
bounceAnimation.start();
}
Image {
id: head;
source: "vlad.png";
x: 0
y: 0
height: 80;
width: 90;
MouseArea {
anchors.fill: parent
onClicked: goForIt(parent);
}
Behavior on x {
PropertyAnimation {
target: head;
properties: "x";
duration: 1000;
}
}
Behavior on y {
PropertyAnimation {
target: head;
properties: "y";
duration: 1000;
}
}
transform: Scale {
id: scaleTransform
property real scale: 1
xScale: scale
yScale: scale
}
SequentialAnimation {
id: bounceAnimation
loops: 1
PropertyAnimation {
target: scaleTransform
properties: "scale"
from: 1.0
to: 2.0
duration: 500
}
PropertyAnimation {
target: scaleTransform
properties: "scale"
from: 2.0
to: 1.0
duration: 500
}
}
}
}