0
我做了一個動畫，4矩形是改變x位置，一個到另一個。 這是默認位置的屏幕截圖：QML：屬性動畫，X座標總是回到原來的位置[編輯]
我假定： - 圖片1 = 甲 - 圖片2 = 乙 - 圖片3 = Ç - 圖片4 = d
的立場是：
A B
C D
和A壓腳提升時發生了動畫，那麼位置變化是這樣的：
B A
D C
動畫後（ID：anim1）發生，然後奇怪的狀況出現。突然兩個左圖（B & d）右移（回到前面位置）
BA
DC
爲什麼couuld是這樣嗎？
這是我的動畫代碼。 （過渡正在運行後，我的電話的動畫）
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
}
}
我需要儘快解決這個問題。 THX的關注
下面是完整的代碼：
// 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的代碼直接放入Transition中會發生什麼？此外，我們還需要一個最小的可編譯代碼示例來找出問題，因爲它看起來問題可能來自您的代碼中的其他位置 – coyotte508
我已經發布了新代碼。我曾嘗試將anim1放入Transition，但它不起作用。我使用ScriptAction，因爲我想在其中添加使用Javascript的額外邏輯。 –