ldigital ldigital - 6 months ago 24
Javascript Question

How to animate multiple objects in qml

and im trying to animate several objects at once, using sequential animation. For my purposes I need to access it from outside of the sequential animation (and number animation) decleration's. This works fine, but only animates one object at a time when set. If i define a number animation per object, this will work -- but i do not want to do this, because later I want to assign the animations within a loop which will vary in size. So im deliberately calling the same number animation object. Is there a way to animate a bunch of objects without defining each number animation for it? Here's some code:

Component.onCompleted: {

seq.access.target = rec1
seq.access.property = "y"
seq.access.to = 50
seq.start()


seq.access.target = rec2
seq.access.property = "y"
seq.access.to = 50
seq.start()

}

Rectangle{
id: rec1
width: 50
height: 50
color: "red"
}
Rectangle{
id: rec2
x: 100
width: 50
height: 50
color: "blue"
}

SequentialAnimation{
id: seq
property alias access: num
NumberAnimation{id: num}
}


UPDATE Hi guy's thanks for your response's. The above problem has been solved by GrecKo's solution, but im still not there yet... i need to be able to make each target or targets setting in a loop. I thought that by getting the above code working, it should/would work if the same targets where in an array:

...
property int i
Component.onCompleted: {

var array = [rec1, rec2]

for(i = 0; i < 2; i++){

seq.access.targets = [array[i]]
seq.access.property = "y"
seq.access.to = 50
seq.start()

}


}

Rectangle{
id: rec1
width: 50
height: 50
color: "red"
}

Rectangle{
id: rec2
x: 100
width: 50
height: 50
color: "blue"
}
SequentialAnimation{
id: seq
property alias access: num
NumberAnimation{id: num}

}


But it does not work. This is what i need to do. Thanks

Answer

If you want to apply the same animation on multiple object, you can use the targets property to specify multiple targets for your animation.

In your example, you would use it like this :

Component.onCompleted: {
    seq.access.targets = [rec1, rec2]
    seq.access.property = "y"
    seq.access.to = 50
    seq.start()
}
Comments