Important: Please read the Qt Code of Conduct -

[SOLVED] Is this a reasonable way to do continuous sprite animation in QML?

  • I've been playing around with QML, trying to get beyond the basics (or my basics. . . ;-)

    Looking into animations, I was wondering how to do a continuous "sprite" type animation. None of the built in types seems to do what I wanted so I made the one below using a Timer.(the classic "Bouncing ball" screensaver type thing).

    Is this a valid approach? It works ok. I am wondering about the load/performance if there were many such "sprites", all with their own timers (and not doing a more sophisticated approach with one timer updating all the sprites).

    Is there a better way to do this sort of continuous animation?

    	import QtQuick 2.5
    		property int xspeed: 4
    		property int yspeed: 4
    		property int xpos: 100
    		property int ypos: 100
    		id: bouncy
    		height: 30
    		color: "red"
    		x: xpos
    		y: ypos
    		function updatePosition(){
    		   xpos += xspeed
    			if (xpos >= bouncy.parent.width - bouncy.width || xpos <= 0){
    				xspeed *= -1
    		   ypos += yspeed
    			if (ypos >= bouncy.parent.height - bouncy.height || ypos <= 0){
    				yspeed *= -1
    		Timer {
    			  interval: 15; running: true; repeat: true;
    			  onTriggered: updatePosition()

  • The documentation recommends not using script for animation:

    Another way would be to use a PathAnimation:

    ApplicationWindow {
        id: root
        width: 640
        height: 480
        visible: true
            property int xdir: 1
            property int ydir: 1
            id: bouncy
            height: 30
            color: "red"
            x: 100
            y: 100
            function next_path() {
                var delta_x, delta_y;
                if (x == 0 || x == root.width - width)
                    xdir= -xdir;
                if (y == 0 || y == root.height - height)
                    ydir= -ydir;
                if (xdir == 1)
                    delta_x = root.width - width - x;
                    delta_x = x;
                if (ydir == 1)
                    delta_y = root.height - height - y;
                    delta_y = y
                if (delta_x > delta_y)
                    delta_x = delta_y;
                    delta_y = delta_x;
                delta_x *= xdir;
                delta_y *= ydir;
                anim.path.pathElements[0].relativeX = delta_x;
                anim.path.pathElements[0].relativeY = delta_y;
                anim.duration = 3000 / root.width * Math.abs(delta_x);
                anim.running = true;
            PathAnimation {
                id: anim
                target: bouncy
                path: Path { PathLine { } }
                onStopped: bouncy.next_path();
            Component.onCompleted: bouncy.next_path();

  • @xargs1

    Thanks! I think I'm starting to get the declarative thing now.

    I came across this video from Qt dev 2015: The 8 mistakes of QtQuick newcomers which gives a fuller explanation.


  • @Hamed.Masafi

    That's something different and doesn't seem to be relevant to a randomized animation.

  • The Sprite type has a property named to. In the to you can set randomized next sprite step.
    For example:

    	name: "still"
    	source: "content/BearSheet.png"
    	frameCount: 1
    	frameWidth: 256
    	frameHeight: 256
    	frameDuration: 100
    	to: {"still":0.9, "blink":0.1, "floating":0}

    In this Sprite after finish in 1/10 times Sprite named blink will be rendered and in 9/10 times this Sprite will be repeated. For more details aboud sequence you can read the example that I posted in past.

Log in to reply