Qt QML：属性动画，X坐标始终返回到旧位置[已编辑]
我制作了一个动画，4个矩形正在改变x的位置，一个接一个。 这是默认位置的屏幕截图： 我假设： -图1=A -图2=B -图3=C -图4=D 职位是：Qt QML：属性动画，X坐标始终返回到旧位置[已编辑],qt,animation,position,qml,qt-quick,Qt,Animation,Position,Qml,Qt Quick,我制作了一个动画，4个矩形正在改变x的位置，一个接一个。 这是默认位置的屏幕截图： 我假设： -图1=A -图2=B -图3=C -图4=D 职位是： A B C D 在动画发生后，位置会发生如下变化： B A D C 动画（id:anim1）发生后，出现了奇怪的情况。突然，两张左侧图片（B&D）向右移动（回到先前的位置） 为什么会这样 这是我的动画代码。（运行转换后的我的动画调用） 下面是动画1： ParallelAnimation{ i
A B
C D
B A
D C
ParallelAnimation{
id: anim1
PropertyAnimation{
target: card1
property: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card3
properties: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card2
properties: "x"
to: 100
duration: 700
}
PropertyAnimation{
target: card4
properties: "x"
to: 100
duration: 700
}
}
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import "../../javascript/Functions.js" as Script
Rectangle {
id: mainScreen
width: 800
height: 600
property variant datas : [0,0,0,0]
/*Main Menu*/
Rectangle{
id: startGame
width: parent.width/2
height: parent.height
anchors.left: parent.left
color: "#08FC39"
Text{
id: txtStartGame
text: "Start Game"
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
color: "White"
font{bold: true; family: "Segoe UI Bold"; pointSize: 15}
}
MouseArea{
id: maStartGame
anchors.fill: parent
onClicked: {
Script.randomPict();
Script.randomAnimation();
mainScreen.state="StartGame"
}
}
}
Rectangle{
id: highScore
width: parent.width/2
height: parent.height
anchors.right: parent.right
color: "#0851FC"
Text{
id: txtHighScore
text: "High Score"
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
color: "white"
font{bold: true; family: "Segoe UI Bold"; pointSize: 15}
}
MouseArea{
id: maHighScore
anchors.fill: parent
onClicked: mainScreen.state="HighScore"
}
}
/*------------------------------*/
/*StartGame*/
Text{
id: startGameTitle
visible: false
anchors{
top: mainScreen.top
topMargin: 20
horizontalCenter: mainScreen.horizontalCenter
}
text: "Choose This Picture"
color: "white"
font{bold:true; family: "Segoe UI Bold"; pointSize: 20}
}
Flipable{
id:card1
width: 150
height: width
visible: false
x:-width
y:100
transform: Rotation {
id: rot1
origin.x: card1.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img1.source = "../../images/models/"+Script.getPict(0)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img1.source = "../../images/models/"+Script.getPict(0)+".jpg"
Script.showBack(rot1);
}
}
}
back:
Image {
id: img1
width: 150
height: width
property variant no: Script.getPict(0);
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot1);
}
}
}
}
Flipable{
id:card2
width: 150
height: width
visible: false
x: mainScreen.width
y: 100
transform: Rotation {
id: rot2
origin.x: card2.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img2.source = "../../images/models/"+Script.getPict(1)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img2.source = "../../images/models/"+Script.getPict(1)+".jpg"
Script.showBack(rot2);
}
}
}
back:
Image {
id: img2
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot2);
}
}
}
}
Flipable{
id:card3
width: 150
height: width
visible: false
x: -width
y: mainScreen.height - width - 50
transform: Rotation {
id: rot3
origin.x: card3.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img3.source = "../../images/models/"+Script.getPict(2)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img3.source = "../../images/models/"+Script.getPict(2)+".jpg"
Script.showBack(rot3);
}
}
}
back:
Image {
id: img3
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot3);
}
}
}
}
Flipable{
id:card4
width: 150
height: width
visible: false
x: mainScreen.width
y: mainScreen.height - width - 50
transform: Rotation {
id: rot4
origin.x: card4.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img4.source = "../../images/models/"+Script.getPict(3)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img4.source = "../../images/models/"+Script.getPict(3)+".jpg"
Script.showBack(rot4);
}
}
}
back:
Image {
id: img4
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot4);
}
}
}
}
/*------------------------------*/
states:[
State{
name: "MainMenu"
PropertyChanges{
target: startGame
width: mainScreen.width/2
}
PropertyChanges{
target: highScore
width: mainScreen.width/2
}
},
State{
name: "StartGame"
PropertyChanges {
target: startGame
width: mainScreen.width
}
PropertyChanges {
target: highScore
width: 0
}
PropertyChanges {
target: txtStartGame
visible: false
}
PropertyChanges{
target: txtHighScore
visible: false
}
PropertyChanges{
target: maStartGame
enabled: false
}
PropertyChanges {
target: card1
visible: true
x: 100
}
PropertyChanges {
target: card2
visible: true
x: mainScreen.width - card2.width - 100
}
PropertyChanges {
target: card3
visible: true
x: 100
}
PropertyChanges {
target: card4
visible: true
x: mainScreen.width - card4.width - 100
}
PropertyChanges {
target: startGameTitle
visible: true
}
},
State{
name: "HighScore"
PropertyChanges {
target: startGame
width: 0
}
PropertyChanges {
target: highScore
width: mainScreen.width
}
PropertyChanges {
target: txtStartGame
visible: false
}
PropertyChanges{
target: txtHighScore
visible: false
}
PropertyChanges{
target: maHighScore
enabled: false
}
}
]
transitions:[
Transition {
from: ""
to: "StartGame"
reversible: false
SequentialAnimation{
PropertyAnimation{
properties: "width"
duration: 300
}
PropertyAnimation{
properties: "x"
duration: 500
}
PauseAnimation { duration: 200 }
ParallelAnimation{
PropertyAnimation{target: rot1; property: "angle"; from:0; to: 180; duration: 1000}
PropertyAnimation{target: rot2; property: "angle"; from:0; to: 180; duration: 1000}
PropertyAnimation{target: rot3; property: "angle"; from:0; to: 180; duration: 1000}
PropertyAnimation{target: rot4; property: "angle"; from:0; to: 180; duration: 1000}
}
PauseAnimation { duration: 1000 }
ScriptAction{
script: anim1.start();
}
}
},
Transition {
from: ""
to: "HighScore"
PropertyAnimation{
properties: "width"
duration: 300
}
}
]
ParallelAnimation{
id: anim1
PropertyAnimation{
target: card1
property: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card3
properties: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card2
properties: "x"
to: 100
duration: 700
}
PropertyAnimation{
target: card4
properties: "x"
to: 100
duration: 700
}
}
}
下一次提供代码时，请尝试将其精简到显示问题的要点，这样仍然可以作为一个独立的部分而不是全部工作。如果将anim1的代码直接放在转换中，会发生什么？此外，我们还需要一个最低限度的可编译代码示例来解决问题，因为问题可能来自代码中的其他地方。我已经发布了新代码。我曾尝试将anim1置于过渡状态，但它不适用于。。我使用Script动作，因为我想用JavaScript添加额外的逻辑。
ParallelAnimation{
id: anim1
PropertyAnimation{
target: card1
property: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card3
properties: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card2
properties: "x"
to: 100
duration: 700
}
PropertyAnimation{
target: card4
properties: "x"
to: 100
duration: 700
}
}
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import "../../javascript/Functions.js" as Script
Rectangle {
id: mainScreen
width: 800
height: 600
property variant datas : [0,0,0,0]
/*Main Menu*/
Rectangle{
id: startGame
width: parent.width/2
height: parent.height
anchors.left: parent.left
color: "#08FC39"
Text{
id: txtStartGame
text: "Start Game"
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
color: "White"
font{bold: true; family: "Segoe UI Bold"; pointSize: 15}
}
MouseArea{
id: maStartGame
anchors.fill: parent
onClicked: {
Script.randomPict();
Script.randomAnimation();
mainScreen.state="StartGame"
}
}
}
Rectangle{
id: highScore
width: parent.width/2
height: parent.height
anchors.right: parent.right
color: "#0851FC"
Text{
id: txtHighScore
text: "High Score"
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
color: "white"
font{bold: true; family: "Segoe UI Bold"; pointSize: 15}
}
MouseArea{
id: maHighScore
anchors.fill: parent
onClicked: mainScreen.state="HighScore"
}
}
/*------------------------------*/
/*StartGame*/
Text{
id: startGameTitle
visible: false
anchors{
top: mainScreen.top
topMargin: 20
horizontalCenter: mainScreen.horizontalCenter
}
text: "Choose This Picture"
color: "white"
font{bold:true; family: "Segoe UI Bold"; pointSize: 20}
}
Flipable{
id:card1
width: 150
height: width
visible: false
x:-width
y:100
transform: Rotation {
id: rot1
origin.x: card1.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img1.source = "../../images/models/"+Script.getPict(0)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img1.source = "../../images/models/"+Script.getPict(0)+".jpg"
Script.showBack(rot1);
}
}
}
back:
Image {
id: img1
width: 150
height: width
property variant no: Script.getPict(0);
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot1);
}
}
}
}
Flipable{
id:card2
width: 150
height: width
visible: false
x: mainScreen.width
y: 100
transform: Rotation {
id: rot2
origin.x: card2.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img2.source = "../../images/models/"+Script.getPict(1)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img2.source = "../../images/models/"+Script.getPict(1)+".jpg"
Script.showBack(rot2);
}
}
}
back:
Image {
id: img2
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot2);
}
}
}
}
Flipable{
id:card3
width: 150
height: width
visible: false
x: -width
y: mainScreen.height - width - 50
transform: Rotation {
id: rot3
origin.x: card3.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img3.source = "../../images/models/"+Script.getPict(2)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img3.source = "../../images/models/"+Script.getPict(2)+".jpg"
Script.showBack(rot3);
}
}
}
back:
Image {
id: img3
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot3);
}
}
}
}
Flipable{
id:card4
width: 150
height: width
visible: false
x: mainScreen.width
y: mainScreen.height - width - 50
transform: Rotation {
id: rot4
origin.x: card4.width/2
origin.y: 0
axis.x: 0; axis.y: 1; axis.z: 0;
angle: 0
onAngleChanged: img4.source = "../../images/models/"+Script.getPict(3)+".jpg";
Behavior on angle {PropertyAnimation{}}
}
front:
Rectangle {
color: "#FAFF70"
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked: {
//img4.source = "../../images/models/"+Script.getPict(3)+".jpg"
Script.showBack(rot4);
}
}
}
back:
Image {
id: img4
width: 150
height: width
MouseArea {
anchors.fill: parent;
onClicked:
{
Script.showFront(rot4);
}
}
}
}
/*------------------------------*/
states:[
State{
name: "MainMenu"
PropertyChanges{
target: startGame
width: mainScreen.width/2
}
PropertyChanges{
target: highScore
width: mainScreen.width/2
}
},
State{
name: "StartGame"
PropertyChanges {
target: startGame
width: mainScreen.width
}
PropertyChanges {
target: highScore
width: 0
}
PropertyChanges {
target: txtStartGame
visible: false
}
PropertyChanges{
target: txtHighScore
visible: false
}
PropertyChanges{
target: maStartGame
enabled: false
}
PropertyChanges {
target: card1
visible: true
x: 100
}
PropertyChanges {
target: card2
visible: true
x: mainScreen.width - card2.width - 100
}
PropertyChanges {
target: card3
visible: true
x: 100
}
PropertyChanges {
target: card4
visible: true
x: mainScreen.width - card4.width - 100
}
PropertyChanges {
target: startGameTitle
visible: true
}
},
State{
name: "HighScore"
PropertyChanges {
target: startGame
width: 0
}
PropertyChanges {
target: highScore
width: mainScreen.width
}
PropertyChanges {
target: txtStartGame
visible: false
}
PropertyChanges{
target: txtHighScore
visible: false
}
PropertyChanges{
target: maHighScore
enabled: false
}
}
]
transitions:[
Transition {
from: ""
to: "StartGame"
reversible: false
SequentialAnimation{
PropertyAnimation{
properties: "width"
duration: 300
}
PropertyAnimation{
properties: "x"
duration: 500
}
PauseAnimation { duration: 200 }
ParallelAnimation{
PropertyAnimation{target: rot1; property: "angle"; from:0; to: 180; duration: 1000}
PropertyAnimation{target: rot2; property: "angle"; from:0; to: 180; duration: 1000}
PropertyAnimation{target: rot3; property: "angle"; from:0; to: 180; duration: 1000}
PropertyAnimation{target: rot4; property: "angle"; from:0; to: 180; duration: 1000}
}
PauseAnimation { duration: 1000 }
ScriptAction{
script: anim1.start();
}
}
},
Transition {
from: ""
to: "HighScore"
PropertyAnimation{
properties: "width"
duration: 300
}
}
]
ParallelAnimation{
id: anim1
PropertyAnimation{
target: card1
property: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card3
properties: "x"
to: 550
duration: 700
}
PropertyAnimation{
target: card2
properties: "x"
to: 100
duration: 700
}
PropertyAnimation{
target: card4
properties: "x"
to: 100
duration: 700
}
}
}
State{
name: "StartGame"
PropertyChanges {
target: startGame
width: mainScreen.width
}
PropertyChanges {
target: highScore
width: 0
}
PropertyChanges {
target: txtStartGame
visible: false
}
PropertyChanges{
target: txtHighScore
visible: false
}
PropertyChanges{
target: maStartGame
enabled: false
}
PropertyChanges {
target: card1
visible: true
x: 100
}
PropertyChanges {
target: card2
visible: true
x: mainScreen.width - card2.width - 100
}
PropertyChanges {
target: card3
visible: true
x: 100
}
PropertyChanges {
target: card4
visible: true
x: mainScreen.width - card4.width - 100
}
PropertyChanges {
target: startGameTitle
visible: true
}
},