I made an animation that the 4 rectangle is change the x position, one to another.
This is the screen shot of the default position:
I assume that:
– picture1 = A
– picture2 = B
– picture3 = C
– picture4 = D
The position is:
A B
C D
And After the animation is occurred, then the position change to be like this:
B A
D C
After animation (id:anim1) occurred, then strange condition appeared. suddenly both left picture (B & D) move to right (back to earlier position)
BA
DC
Why it couuld be like this?
here is my animation code. (my animation call after transition being run)
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();
}
}
and here is the 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
}
}
I need to solve this problem as soon as possible.
thx for your attention
Here is the full code:
// 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
}
}
}
In your “startgame” state you reset the x of all the cards… change ‘x: 100’ to ‘x: 500’ for card1, and so on.
Also next time when providing a code try to trim it down to the essentials showing the problem and that can still work as a stand-alone, not the whole thing.