Qt – Creating a simple Scale animation

Here is a simple way to create scale animation using QT & QML.

To do a scale animation we need to change the scale value of an element at some rate.

• Scale value of 1 indicates that the element is in its actual size.
• Scale value of 0.5 indicates that the element is 50% less than its actual size.

Here is how the animation looks like.

Scale animation using QT & QML

The video shows two different ways of animating an image to achieve the same result.

Method 1: Using a ScaleAnimator directly on the element that you want to modify. In the below piece of code, the Image “img_circle” is animated using ScaleAnimator. I have used two of these animation element inside a Sequential animation block which plays it forever.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "black"

    Image{
        id: img_circle
        source: "./circle.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        transformOrigin: Item.Center

        SequentialAnimation{
            running: true
            loops: Animation.Infinite
            ScaleAnimator{
                id: scaleanim_up
                target: img_circle
                from: 0.2
                to: 1
                duration: 300
            }
            ScaleAnimator{
                id: scaleanim_down
                target: img_circle
                from: 1
                to: 0.2
                duration: 300
            }
        }
}

Method 2: Using a transform option. Here I use the transform option for the Image element and tie a variable “scalevalue” to its xScale and yScale. Then I do a property animation on that variable which changes the image’s xScale and yScale factor indirectly.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "black"

    Image{
        id: img_circle
        source: "./circle.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        transformOrigin: Item.Center

         transform: Scale{
            id: scale_circle
            property real scalevalue: 1
            origin.x: img_circle.width/2
            origin.y: img_circle.height/2
            xScale: scalevalue
            yScale: scalevalue
        }
        SequentialAnimation{
            running: true
            loops: Animation.Infinite
            PropertyAnimation{
                target: scale_circle
                properties: "scalevalue"
                from: 0.5
                to: 1
                duration: 250
            }
            PropertyAnimation{
                target: scale_circle
                properties: "scalevalue"
                from: 1
                to: 0.5
                duration: 250
            }
        }
    }
}

Note: It is always recommended to have your image in bigger size and scale it down/up for better results. If you have an image of smaller size and try to scale it beyond its actual size, you may get bad quality.