【发布时间】：2014-02-02 10:12:27
【问题描述】：
我试图将顶级“cont”矩形动画向右移动，缩小它，然后将其向右移动一点，然后在左滑动时将其向后移动到左侧。同时它也会缩小后面的矩形，它将缩放大小设置为屏幕的大小，并将矩形与屏幕右侧齐平。
谁能给我一些关于我需要怎么做的指示？
查看图片以了解我想要实现的目标
而且我忘了提到如何将缓动应用到动画中？
（来源：paisei.com）
（来源：paisei.com）
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
}
}
}
}
【问题讨论】：
-
那么，你需要让2个动画同时工作吗？对不起，我不是很清楚你想做什么。你能再解释一下吗？对于缓动：只需在“PropertyAnimation”中设置
easing.type属性easing.type: Easing.InOutQuad。附：你的第一句话带来了一些误解。 -
感谢您的回复。我刚看到你的评论。我已经修好了，但非常感谢。 Qt Quick 很棒。感谢您的帮助。
-
也感谢您的好评。是的，qt quick 太棒了 :) 其他人知道你的解决方案会很好，所以你可以在这里写它并将其标记为已解决我想帮助其他人。但是，正如我之前所说 - 请详细描述您的问题。
标签： javascript qt animation swipe qtquick2