gpt4 book ai didi

qt - 如何在 QML 中创建 'scale up, then down' 动画?

转载 作者:行者123 更新时间:2023-12-04 14:49:53 25 4
gpt4 key购买 nike

如何创建一个动画,其中项目按比例放大,然后缩小到其原始大小(从顶部/鸟瞰的角度考虑一个“弹跳球”)。到目前为止,我只知道如何通过修改 parent.x 和 parent.y 来使用“x/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
}
}
}
}

关于qt - 如何在 QML 中创建 'scale up, then down' 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8391733/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com