Getting Animation start ,stop event in QML

While working on my hobby QML Project, I required to detect when particular animation got completed

Well its quite simple to achieve this but initially I struggled with it, I was trying to use onCompleted signal to detect animation end, but latter realised that it comes from component and not from animation.

Actual signal we want to use is onRunningChanged and we can check animation's running property to decide if animation is started or ended. Following is my sample QML code to detect Animation start and stop.

Behavior on rotation {
        PropertyAnimation {
            id: rotAni;
            duration: 500 ;
            onRunningChanged: {
                if (!rotAni.running) {
                    console.log("Animation completed");
                } else {
                    console.log("Animation started");
                }
            }
        }
    }

As requested in comment, I am posting similar example for NumberAnimation as well.

Rectangle {
        width: 360
        height: 360

        gradient:first
        Gradient {
            id:first
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.33; color: "yellow" }
            GradientStop { position: 1.0; color: "green" }
        }
        Gradient {
            id:second
            GradientStop { position: 0.0; color: "red" }
        }

        MouseArea{
            anchors.fill:parent
            onClicked: {
                parent.gradient=second
                numAni.running = true;
            }
        }

        NumberAnimation{
            target:smallRect
            id:numAni
            properties: "x";
            to: 100;
            duration: 1000

            onRunningChanged:{
                if (!numAni.running) {
                    console.log("numAni Animation completed");
                } else {
                    console.log("numAni Animation started");
                }
            }
        }

        Rectangle{
            id:smallRect
            width:10;
            height:10;
        }
    }

Flipping (Rotating) view animation in QML

While I was creating view for my QML application, I thought to add some cool animation effect on view change. So I decided to add view flipping effect on view change event.

I am here sharing simple version of my view flipping code. First in my main view I created simple toolbar with two button, on clicking button it activate or flip according view.

I am skipping toolbar code here, go to end of post to find code for creating toolbar. So to achieve view flipping effect we can use Flipable QML element. We can add front and back to this element and can add animation on Rotation. Folloging code shows how it can be done.

Flipable {
        id: myFlip
        x:0
        y:50
        width: 800
        height: 430

        function showFront() {
            rot.angle=0;
        }

        function showBack() {
            rot.angle=180;
        }

        transform: Rotation {
            id: rot
            origin.x: 400;
            origin.y:100;
            axis.x:0; axis.y:1; axis.z:0
            angle:0

            Behavior on angle { PropertyAnimation{} }
        }

        front: Item {
            Rectangle {
                width: 800
                height: 430
                color:"green"
            }

            Text {
                x: 0
                y:200
                text: "My super cool green view"
            }
        }

        back: Item {

            Rectangle {
                width: 800
                height: 430
                color:"red"
            }

            Text {
                x: 0
                y:200
                text: "My super cool red view"
            }
        }
    }

In above code, I have added two Item element which act as my view and attached it to front side and back side. Then I have added Rotation transformation and added ProperyAnimation when angle changes. Also added two function which shows front or back side by invoking it.

Above code works fine to flip view, but if you have some content in back view then you will see content mirrored. See below snap.

To view proper content we need to remove rotation on content. To do this we can add another Rotation transformation on back view to zero effect of earlier rotation. So our back view code will look like below.

back: Item {

            transform:Rotation {
                origin.x: 400;
                origin.y:100;
                axis.x:0; axis.y:1; axis.z:0
                angle:180
            }

            Rectangle {
                 width: 800
                 height: 430
                 color:"red"
            }

            Text {
                x: 0
                y:200
                text: "My super cool red view"
            }
        }

Now view will look fine, like shown in below pic.

So this was all required to achieve view flipping effect, Following is demo of my sample app.



If you are interested in my simple toolbar then following is code for my toolbar.

    Rectangle {
        id: toolbar
        width:200
        height: 50
        color:"black"

        Image {
            x:10
            y:5
            id: btn1
            source: "btn1.png"

            MouseArea{
                anchors.fill : parent
                onClicked: {
                    console.log("Btn 1 clicked");
                    myFlip.showFront();
                }
            }
        }

        Image {
            x: 60
            y:5
            id: btn2
            source: "btn2.png"
            MouseArea{
                anchors.fill : parent
                onClicked: {
                    console.log("Btn 2 clicked");
                    myFlip.showBack();
                }
            }
        }
    }

Rotation and mirroring QGraphicsItem in Qt

Recently I started to learn Qt Graphics View to convert one of my existing game to use Qt graphics view framework.

During this I learned some new things that I would like to share here.

Rotating QGraphicsItem,

Generally when you rotate QGraphicsItem, it will rotate in reference to item's origin (0,0). To apply rotation in reference to center of item  use following line of code.

graphicsItem->setTransform(QTransform().translate(centerX, centerY).rotate(angle).translate(-centerX, -centerY));

Mirroring or flipping QGraphicsItem,

To mirror item, you can use scale operation on QGraphicsItem. To flip item on y axis you following code,

graphicsItem->scale(-1,1)

here 1 scale factor will keep size to its original size and negative value will flip item on axis. Similarly to flip item on x axis use following code.

graphicsItem->scale(1,-1)