我试图将顶层“cont”矩形设置为右侧的动画，缩小它的尺寸，并将其向右移动一点点，然后向左移动到左侧滑动。同时它也会向下缩放后面的矩形，它会将缩放大小设置为屏幕的大小，并将矩形刷新到屏幕右侧。
有人可以给我一些关于我需要做什么的指示吗？
检查图片以参考我正在尝试实现的目标
我忘了提及如何将动画也应用到动画中？
Normal State http://paisei.com/normal-state.png Swiped State http://paisei.com/swiped-state.png
import QtQuick 2.0
import QtQuick.Controls 1.1
Item {
id: root
// default size, but scalable by user
height: 450
width: 300
signal clickInit();
MouseArea{
anchors.fill: parent
signal swipeRight;
signal swipeLeft;
signal swipeUp;
signal swipeDown;
property int startX;
property int startY;
onPressed: {
startX = mouse.x;
startY = mouse.y;
}
onReleased: {
var deltax = mouse.x - startX;
var deltay = mouse.y - startY;
if (Math.abs(deltax) > 50 || Math.abs(deltay) > 50) {
if (deltax > 30 && Math.abs(deltay) < 30) {
// swipe right
console.log("swiped right");
downSizeToRight.start()
swipeRight();
} else if (deltax < -30 && Math.abs(deltay) < 30) {
console.log("swiped left")
// swipe left
upSizeFromRight.start()
swipeLeft()
} else if (Math.abs(deltax) < 30 && deltay > 30) {
console.log("swiped down")
// swipe down
swipeDown()
} else if (Math.abs(deltax) < 30 && deltay < 30) {
console.log("swiped up")
// swipe up
swipeUp()
}
}
}
Rectangle{
id: bg
gradient: Gradient {
GradientStop { position: 0.0; color: "#000000" }
GradientStop { position: 1.0; color: "#fff" }
}
height : cont.height + 80
width : cont.width + 80
y:cont.y - 40
x: cont.x - 80
}
Rectangle{
id: cont
width:parent.width
height:parent.height
transform: Scale {
id: scaleTransform
property real scale: 1
xScale: scale
yScale: scale
}
SequentialAnimation {
id: downSizeToRight
loops: 1
PropertyAnimation {
target: scaleTransform
properties: "scale"
from: 1.0
to: 0.5
duration: 300
}
}
SequentialAnimation {
id: upSizeFromRight
loops: 1
PropertyAnimation {
target: scaleTransform
properties: "scale"
from: 0.5
to: 1.0
duration: 300
}
}
Label {
id: label1
y: 226
text: qsTr("Hi this is just a load of text that i cant write in that makes no sence for testing")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
anchors.right: parent.right
anchors.rightMargin: 5
anchors.left: parent.left
anchors.leftMargin: 5
}
}
}
}
答案 0 :(得分：0)
对于那些有兴趣做这样的事情的人来说，这是我的解决方案，但我仍然有一个错误，我现在仍然试图找到一个修正，这是在规模前面回到左边的动画右边后面的矩形向后飞到左边覆盖左后方矩形。它有点难以描述，但如果你编译并向左和向右滑动，你会看到错误。
而且我也是qt quick的初学者，所以如果你觉得有更好的方法在这段代码中做任何事情，那么任何改变都会受到赞赏。
谢谢
import QtQuick 2.0
MouseArea {
id:screen
width: 320
height: 460
property int startX;property int startY
signal swipeRight;signal swipeLeft;signal swipeUp;signal swipeDown
property int size_addition:100
property bool swiped: false
property int swiped_direction:1
property int aniSpeed: 200;
states: [
State {
name: "frontToRight"
PropertyChanges {target: front;x:(screen.width - (screen.width/3) + (screen.width/24) - 25)}
PropertyChanges {target: front;scale:0.5}
PropertyChanges {target: right;x:screen.width}
PropertyChanges {target: left;scale:1}
},
State {
name: "frontToLeft"
PropertyChanges {target: front;x:-(screen.width - (screen.width/3) + (screen.width/24) - 25)}
PropertyChanges {target: front;scale:0.5}
PropertyChanges {target: right;scale:1}
}
]
onPressed: {startX=mouse.x;startY=mouse.y;}
onReleased: {
var swipe_a = 115; var deltax = mouse.x - startX; var deltay = mouse.y - startY
if (Math.abs(deltax) > 100 || Math.abs(deltay) > 100) {
if (deltax > swipe_a && Math.abs(deltay) < swipe_a) {swipeRight()}
else if (deltax < -swipe_a && Math.abs(deltay) < swipe_a){swipeLeft()}
else if (Math.abs(deltax) < swipe_a && deltay > swipe_a) {swipeDown()}
else if (Math.abs(deltax) < swipe_a && deltay < swipe_a) {swipeUp()}
}
}
onSwipeRight: {
//scale to right
if(front.height == screen.height && swiped_direction!=0 && swiped_direction!=2)
{screen.state = "frontToRight";swiped = true;swiped_direction = 0;}
//back to center from left
else if(swiped && swiped_direction!=0)
{screen.state = "";swiped = false;swiped_direction = 1;}
}
onSwipeLeft: {
//scale to left // here is where my swipe problem lies
if(front.height == screen.height && swiped_direction!=2 && swiped_direction!=0)
{screen.state = "frontToLeft";swiped = true;swiped_direction = 2;}
//back to center from right
else if(swiped && swiped_direction!=2)
{screen.state = "";screen.swiped = false;screen.swiped_direction = 1;}
}
Rectangle{
id:left
color:"#0500ff"
height:screen.height
width:screen.width
transformOrigin: Item.Right
scale:1.2
Behavior on scale{NumberAnimation{duration:aniSpeed}}
Text{
text:"Left"
anchors.fill: parent
font.pixelSize: 70
}
}
Rectangle{
id:right
color:"#028000"
height:screen.height
width:screen.width
transformOrigin: Item.Left
Behavior on scale{NumberAnimation{duration:aniSpeed}}
scale:1.2
Text{
text:"Right"
anchors.fill: parent
font.pixelSize: 70
}
}
Rectangle{
id:front
color:"red"
height:screen.height
width:screen.width
Behavior on scale{ NumberAnimation{duration:aniSpeed;}}
Behavior on x{NumberAnimation{duration:aniSpeed}}
Text{
text:"Front"
anchors.fill: parent
font.pixelSize: 70
}
}
}
答案 1 :(得分：0)
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
MouseArea {
id:screen
width: 320
height: 460
property int startX;property int startY
signal swipeRight;signal swipeLeft;signal swipeUp;signal swipeDown
property int size_addition:100
property bool swiped: false
property int swiped_direction:1
property int aniSpeed: 200;
states: [
State {
name: "frontToRight"
PropertyChanges {target: front;x:(screen.width - (screen.width/3) + (screen.width/24) - 25)}
PropertyChanges {target: front;scale:0.5}
//PropertyChanges {target: right;x:screen.width}
PropertyChanges {target: left;scale:1}
},
State {
name: "frontToLeft"
PropertyChanges {target: front;x:-(screen.width - (screen.width/3) + (screen.width/24) - 25)}
PropertyChanges {target: front;scale:0.5}
PropertyChanges {target: right;scale:1}
}
]
onPressed: {startX=mouse.x;startY=mouse.y;}
onReleased: {
var swipe_a = 115; var deltax = mouse.x - startX; var deltay = mouse.y - startY
if (Math.abs(deltax) > 100 || Math.abs(deltay) > 100) {
if (deltax > swipe_a && Math.abs(deltay) < swipe_a) {swipeRight()}
else if (deltax < -swipe_a && Math.abs(deltay) < swipe_a){swipeLeft()}
else if (Math.abs(deltax) < swipe_a && deltay > swipe_a) {swipeDown()}
else if (Math.abs(deltax) < swipe_a && deltay < swipe_a) {swipeUp()}
}
}
我通过设置左面板的z属性来修复它。有没有更好的方法呢？而且我也尝试过一些缓和措施让动画看起来好一些，但似乎没什么好看的。有没有人有建议？
onSwipeRight: {
//scale to right
if(front.height == screen.height && swiped_direction!=0 && swiped_direction!=2)
{screen.state = "frontToRight";swiped = true;swiped_direction = 0;left.z=2}
//back to center from left
else if(swiped && swiped_direction!=0)
{screen.state = "";swiped = false;swiped_direction = 1;}
}
onSwipeLeft: {
//scale to left // here is where the righ tbg menu swipe problem lies
if(front.height == screen.height && swiped_direction!=2 && swiped_direction!=0)
{screen.state = "frontToLeft";swiped = true;swiped_direction = 2;left.z=0}
//back to center from right
else if(swiped && swiped_direction!=2)
{screen.state = "";screen.swiped = false;screen.swiped_direction = 1;}
}
Rectangle{
id:left
color:"#0500ff"
height:screen.height
width:screen.width
z:0
transformOrigin: Item.Right
scale:1.2
Behavior on scale{NumberAnimation{duration:aniSpeed}}
Text{
text:"Left"
anchors.fill: parent
font.pixelSize: 70
}
}
Rectangle{
id:right
z:1
color:"#028000"
height:screen.height
width:screen.width
transformOrigin: Item.Left
Behavior on scale{NumberAnimation{duration:aniSpeed}}
scale:1.2
Text{
text:"Right"
anchors.fill: parent
font.pixelSize: 70
}
}
Rectangle{
id:front
color:"red"
height:screen.height
width:screen.width
z:2
Behavior on scale{ NumberAnimation{duration:aniSpeed;}}
Behavior on x{NumberAnimation{duration:aniSpeed}}
Text{
text:"Front"
anchors.fill: parent
font.pixelSize: 70
}
}
}
答案 2 :(得分：0)
我修复了我在这款应用中遇到的其他一些问题。所以我重新启动它，这是没有错误的新版本，并且非常好用。
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.0
GestureArea {
id:main
width: 470
height: 700
property int swiped_direction:1
property bool swiped:false
property int aniSpeed: 90
onSwipeRight: {doRightSwipeProcess()}
onSwipeLeft: {doLeftSwipeProcess()}
states: [
State {
name: "toLeft"
PropertyChanges {target: front;x:(main.width - (main.width/3) + (main.width/24) - 25)}
PropertyChanges {target: front;scale:0.5}
PropertyChanges {target: left;scale:1}
},
State {
name: "toRight"
PropertyChanges {target: front;x:-(main.width - (main.width/3) + (main.width/24) - 25)}
PropertyChanges {target: front;scale:0.5}
PropertyChanges {target: right;scale:1}
}
]
Rectangle{
id:front
width:main.width
height:main.height
property int direction:1
color:"#fff"
Behavior on scale{NumberAnimation{duration:aniSpeed;}}
Behavior on x{NumberAnimation{duration:aniSpeed}}
z:2
}
Image{
id:left
source:"images/app_bg_left.png"
Behavior on scale{NumberAnimation{duration: main.aniSpeed}}
width:main.width
height:main.height
transformOrigin: Item.Right
scale:1.3
anchors.right:{if(scale<1.3){return main.right}else{return main.left}}
z:0
}
Settings{
id:right
//source:"images/app_bg_right.png"
Behavior on scale{NumberAnimation{duration: main.aniSpeed}}
width:main.width
height:main.height
transformOrigin: Item.Left
scale:1.3
anchors.left:{if(scale<1.3){return main.left}else{return main.right}}
z:1
onDoLeftSwipe: doLeftSwipeProcess()
onDoRightSwipe: doRightSwipeProcess()
}
function doRightSwipeProcess(){
//scale to right
if(front.height == main.height && swiped_direction!=0 && swiped_direction!=2)
{main.state = "toLeft";swiped = true;swiped_direction = 0;front.direction = 0}
//back to center from left
else if(swiped && swiped_direction!=0)
{main.state = "";swiped = false;swiped_direction = 1;front.direction = 1;}
}
function doLeftSwipeProcess(){
//scale to left // here is where the righ tbg menu swipe problem lies
if(front.height == main.height && swiped_direction!=2 && swiped_direction!=0)
{main.state = "toRight";swiped = true;swiped_direction = 2;front.direction = 2}
//back to center from right
else if(swiped && swiped_direction!=2)
{main.state = "";main.swiped = false;main.swiped_direction = 1;front.direction = 1}
}
}