Animate Image on changing source property

sf2212

I have an Image component with a init value on "source" property:

       @ Item {
            anchors.centerIn: parent;
            Image {
                property bool selected: false
                fillMode: Image.PreserveAspectFit
                id: worldImage
                x: -48
                y: -55
                width: 97
                height: 99
                transformOrigin: Item.Center
                opacity: 0;
                source: "images/world/symbol_pane_small_tv.png"

                states: [
                    State {
                        name: "LOADING";
                        PropertyChanges { target: worldImage; opacity: 1}
                    }
                ]

                transitions: Transition {
                    NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1000; from:0; to: 1}
                }

                onSourceChanged: {
                    worldImage.state = "LOADING";
                }
            }
        }@

Other component which holds the "new" source property for the image:

@ MenuButtonStyle {
property string imgSrc : "images/world/symbol_pane_small_internet.png";
width: buttonWidth
style: MyButtonBackgroundStyle {
label: ButtonTextStyle {
text: "Internet"
}
}
}@

The source property is changed within an key event which also changes current focus (but this is not really interesting):

@ Keys.onDownPressed: {
var childs = menuItems.children;
var nextEl = null;
for(var i=0;i<childs.length;i++) {
if(childs[i].activeFocus) {
if(i==childs.length-1) {
nextEl = childs[0];
} else {
nextEl = childs[i+1];
}
}
}
nextEl.forceActiveFocus();
worldImage.source = nextEl.imgSrc;
}
@

The problem is know that the animation is only performed once. I must find a way how to reset the opacity value before the "onSourceChanged" event is triggered.

Any suggestions?

jiangcaiyang

Well, you can make a tiled sprite and use Sprite QML type to do animation. it's easy and quick.