Applying animation to all images in a grid layout in QML, instead of animating each one

Question

I have this code and the thing is I need to apply animation on all of the images, but couldn't find any way of doing it. Any help is appreciated.

Image {
    id: img3 
    source: "iconborder.jpg" 
    height:80
    width:80

    Image {
        id: img3icon
        source: "greenStone.jpg"
        height:70
        width:70
        z:1
        anchors.centerIn:img3
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

@Laszlo : The images are one for border of the icon and another one for the actual Icon. Sorry about that, I am just a beginner and have a little idea of how things work here. — Jino, Jan 02 '14 at 07:21

score 1 · Accepted Answer · answered Jan 02 '14 at 07:40

It is odd that you are using parent/child images instead of siblings as that would look more natural to me, but either way, here goes the relevant code from the color animation example that would be easy to adjust to your weird image parent/child code if you do not wish to change that to siblings:

...
// the sun, moon, and stars
Item {
    width: parent.width; height: 2 * parent.height
    NumberAnimation on rotation { from: 0; to: 360; duration: 10000; loops: Animation.Infinite }
    Image {
        source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter
        rotation: -3 * parent.rotation
    }
    Image {
        source: "images/moon.png"; y: parent.height - 74; anchors.horizontalCenter: parent.horizontalCenter
        rotation: -parent.rotation
    }
...

As you can see, the images are siblings, and their animation is based on the animation of the parent. This way, both images will have the same animation effect as you wish.

Applying animation to all images in a grid layout in QML, instead of animating each one

1 Answers1