Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

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

    QML and Qt Quick
    animation qml
    3
    6
    2979
    Loading More Posts
    • 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.
    • ?
      A Former User last edited by A Former User

      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
      
      	Rectangle{
      		property int xspeed: 4
      		property int yspeed: 4
      		property int xpos: 100
      		property int ypos: 100
      
      		id: bouncy
      		width:30
      		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()
      		  }
      	}
      
      1 Reply Last reply Reply Quote 0
      • X
        xargs1 last edited by

        The documentation recommends not using script for animation:

        http://doc.qt.io/qt-5/qtquick-performance.html#animations

        Another way would be to use a PathAnimation:

        ApplicationWindow {
            id: root
            width: 640
            height: 480
            visible: true
        
            Rectangle{
                property int xdir: 1
                property int ydir: 1
        
                id: bouncy
                width:30
                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;
                    else
                        delta_x = x;
        
                    if (ydir == 1)
                        delta_y = root.height - height - y;
                    else
                        delta_y = y
        
                    if (delta_x > delta_y)
                        delta_x = delta_y;
                    else
                        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();
            }
        }
        
        
        ? 1 Reply Last reply Reply Quote 1
        • ?
          A Former User @xargs1 last edited by A Former User

          @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.

          screenshot

          1 Reply Last reply Reply Quote 0
          • Hamed.Masafi
            Hamed.Masafi last edited by

            No timer needed. Use SpriteSequence
            http://doc.qt.io/qt-5/qml-qtquick-spritesequence.html

            example:
            http://doc.qt.io/qt-5/qtquick-imageelements-example.html

            Remote object sharing (OO RPC)
            http://forum.qt.io/topic/60680/remote-object-sharing-oo-rpc-solved

            Advanced, Powerful and easy to use ORM for Qt5
            https://forum.qt.io/topic/67417/advanced-powerful-and-easy-to-use-orm-for-qt5

            ? 1 Reply Last reply Reply Quote 0
            • ?
              A Former User @Hamed.Masafi last edited by

              @Hamed.Masafi

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

              1 Reply Last reply Reply Quote 0
              • Hamed.Masafi
                Hamed.Masafi last edited by

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

                Sprite{
                	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.

                Remote object sharing (OO RPC)
                http://forum.qt.io/topic/60680/remote-object-sharing-oo-rpc-solved

                Advanced, Powerful and easy to use ORM for Qt5
                https://forum.qt.io/topic/67417/advanced-powerful-and-easy-to-use-orm-for-qt5

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post