Animating rectangle from left to right in QtQuick 2.0
-
Im trying to animate the top level "cont" rectangle to the right, downscale it, and move it over the right a little bit and the back to left on left swipe. At the same time it will down scale the back rectangle also, It will set the scale size to that of the screen and will place the rectangle flush to the right of the screen.
Would anyone be ale to give me some pointers on how I need to do it?
Check pictures for reference to what I'm trying to achieve
"http://www.paisei.com/normal-state.png" and "http://www.paisei.com/swiped-state.png"
And I forgot to mention how would I apply easing to the animation as well?
@import QtQuick 2.0
import QtQuick.Controls 1.1Item {
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 } } }
}@