Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Animate Image on changing source property
Forum Updated to NodeBB v4.3 + New Features

Animate Image on changing source property

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 2 Posters 1.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    sf2212
    wrote on 9 May 2014, 13:59 last edited by
    #1

    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?

    1 Reply Last reply
    0
    • J Offline
      J Offline
      jiangcaiyang
      wrote on 10 May 2014, 12:05 last edited by
      #2

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

      1 Reply Last reply
      0

      1/2

      9 May 2014, 13:59

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved