Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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