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.751 692,0.817902];
sim_data[1]= [10.000000,9.900498,9.801986, 9.704455,9.607893,9.512226,9.417414,9.323457,9.230 357,9.138112,9.046724];
sim_data[2]= [0.000000,0.000493,0.001946,0.004321,0.007583,0.011 704, 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];
}
}

}
}

rectangle.qml -

import QtQuick 1.0

Rectangle {
id: rect
color:"Red"
}


Thanks.

[wysota]

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