我做了一个动画，4 个矩形是改变 x 位置，一个到另一个。这是默认位置的屏幕截图：
我假设： - 图片1 = A - 图片2 = B - 图片3 = C - 图片4 = D
职位是：
A B
C D
并且在动画发生后，位置变化是这样的：
B A
D C
动画（id：anim1）发生后，出现了奇怪的情况。突然左图（B＆D）都向右移动（回到之前的位置）
BA
DC
为什么会是这样？
这是我的动画代码。（运行过渡后我的动画调用）
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();
}
}
这是anim1：
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
}
}
}