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.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
            }
        }
    
    
    }
    

    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.