It gives you the error because QML make connections to communicate between changes:
onStateChange
is connected by PropertyChanges
that changes opacity to a view's opacity property.
The onOpacityChanged
signal will be connected to State's when property.
The onWhenChanged
signal will be connected to the state property, thus making binding Loop.
Another thing is that when you make NumberAnimation
within Transition, you do not need to specify the from
and to
properties. The PropertyChanges
sets the correct value.
Anyway, your states does not make sense, you using them wrong. You should also wait for fadeOut, because it will load so fast that you will not see the effect. Simply make two animations:
Rectangle {
id: view
anchors.fill: parent
property var sourceComponent
function loadComponent(component){
fadeIn.stop(); fadeOut.start();
sourceComponent = component;
}
Loader {
id: loader
onLoaded: { fadeOut.stop(); fadeIn.start(); }
}
NumberAnimation on opacity {
id: fadeOut
to: 0.0
onStopped: { loader.sourceComponent= sourceComponent; }
}
NumberAnimation on opacity {
id: fadeIn
to: 1.0
}
}
You should also change the loading to:
property int index: 0
onIndexChanged: { view.loadComponent(com_array[index]); }
But there is better solution: using ShaderEffectSource
to take a frame of Loader before changing the source, and using it to fadeOut meanwhile loading the component.