Animate Image on changing source property
-
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?
-
Well, you can make a tiled sprite and use Sprite QML type to do animation. it's easy and quick.