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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.