QML Animation

[ujwala]

I have an application where I want to show animation using QML for n seconds.
For e.g I want to change the size of rectangle for each second.The input will be an array storing size of the rectangle at each second.

input[5] ={10,20,30,5,9}

In this case I want to run simulation for 5 second for different sizes.
Initally the size of rectangle will be height=width=input[0].
On completion of a second the height=width=input[1] and so on.

I dont want to hardcode here as the input will be dynamic.
I am new to QML so don't know whether this requirement is possible to implement with QML.

Can anybody help me in this?

Thanks in advance.

[wysota]

Create a SequentialAnimation component and add your animations there. Have a look at Dynamic Object Management in QML for information how to create objects on the fly.

[ujwala]

Hi,
As per my understanding SequentialAnimation works on some property/attribute of QML object. For e.g. width/height of rectangle object. It keeps the property incrementing to some limit.
But in my case the value of the property(width/height) is defined in an array. So how I can apply SequentialAnimation in this case.

Currently I am able to create the objects dynamically but not able to show the animation.

main.qml -

import QtQuick 1.0
 
Rectangle {
    id: container
    width: 1500; height: 1000
 
 
    Component.onCompleted: {
        var component = Qt.createComponent("rectangle.qml");
 
        // Define an array
        var sim_data = new Array(3); // 10 rectangles for 3 secs
        var t = 0;
        for(var i = 0;i<3;i++)
           sim_data[i] = new Array(10);
 
        sim_data[0]= [0.000000,0.098023,0.192176,0.282582, 0.369357,0.452661,0.532547,0.609014,0.682063,0.751692,0.817902];
        sim_data[1]= [10.000000,9.900498,9.801986, 9.704455,9.607893,9.512226,9.417414,9.323457,9.230357,9.138112,9.046724];
        sim_data[2]= [0.000000,0.000493,0.001946,0.004321,0.007583,0.011704, 0.016680,0.022509,0.029193,0.036732];
 
 
        var col = ["red","yellow","green","blue","black"];
 
        // working
 
        for(var t=0; t < 3; t++)
            {
                var y = 100 * t + 150;
                console.log("At t = ", t);
 
                for (var i=0; i<10; i++)
                {
                    var object = component.createObject(container);
                    object.width = sim_data[t][i] + 100;
                    object.height = sim_data[t][i] + 100;
 
                    console.log("width = ", object.width);
                    console.log("height = " ,object.height);
                    object.x = 150 * i;
                    object.y = 100;
                    object.color = col[t];
                }
            }
 
    }
}

import QtQuick 1.0

Rectangle {
    id: container
    width: 1500; height: 1000


    Component.onCompleted: {
        var component = Qt.createComponent("rectangle.qml");

        // Define an array
        var sim_data = new Array(3); // 10 rectangles for 3 secs
        var t = 0;
        for(var i = 0;i<3;i++)
           sim_data[i] = new Array(10);

        sim_data[0]= [0.000000,0.098023,0.192176,0.282582, 0.369357,0.452661,0.532547,0.609014,0.682063,0.751692,0.817902];
        sim_data[1]= [10.000000,9.900498,9.801986, 9.704455,9.607893,9.512226,9.417414,9.323457,9.230357,9.138112,9.046724];
        sim_data[2]= [0.000000,0.000493,0.001946,0.004321,0.007583,0.011704, 0.016680,0.022509,0.029193,0.036732];


        var col = ["red","yellow","green","blue","black"];

        // working

        for(var t=0; t < 3; t++)
            {
                var y = 100 * t + 150;
                console.log("At t = ", t);

                for (var i=0; i<10; i++)
                {
                    var object = component.createObject(container);
                    object.width = sim_data[t][i] + 100;
                    object.height = sim_data[t][i] + 100;

                    console.log("width = ", object.width);
                    console.log("height = " ,object.height);
                    object.x = 150 * i;
                    object.y = 100;
                    object.color = col[t];
                }
            }

    }
}

To copy to clipboard, switch view to plain text mode 

rectangle.qml -

import QtQuick 1.0
 
Rectangle {
    id: rect
	color:"Red"
	}

import QtQuick 1.0

Rectangle {
    id: rect
	color:"Red"
	}

To copy to clipboard, switch view to plain text mode 

Thanks.

[wysota]

So you don't want the animation to be smooth? If so, then simply use a timer.