QML Image Sequence

,

Originally posted on QuicKing, the Kingdom of QML Workaround, the blog I kept in 2011 and 2012. Here’s how that kingdom started and ended.

This is for Flash and web developers adventuring into Qt Quick and QML. It’s very simple to turn an Image object into an image sequence (PNG, JPG, GIF, whatever…) with a few lines and no weird C++ components. 😀

First, create the images, sequence1.png to sequence10.png, and let’s workaround.

Simple workaround

Image {
  property int currentImage:1
  source: "img/sequence"+currentImage+".png"
  Behavior on currentImage {
    PropertyAnimation { duration: 1000 }
  }
  MouseArea {
    anchors.fill: parent
    onClicked: parent.currentImage = 10
  }
}

Done! But if you are a king of workaround, go ahead.

King of workaround

Rectangle {
    width: 300
    height: 300

    property int velocity: 50
    property int currentImage:1
    property int totalImage:10

    Image {
        source: "imgs/man_"+currentImage+".png"

        MouseArea {
            anchors.fill: parent
            onClicked: (currentImage == totalImage)?currentImage = 1:currentImage=totalImage
        }
    }

    Behavior on currentImage {
        PropertyAnimation { duration: (velocity*totalImage); }
        // EXTRAS
        // loops: -1 for infinite sequence
        // easing.type for fluid movement
    }
}

If you want a component, it’s up to you, malandro!

You may also enjoy…

All posts →