Optimizing Animations

  • I am developing an application that includes a large number of animations. The animations are currently sequences of png files. As shown below, I am using NumberAnimation to sequence the png files at a 30 hz frame rate.

            id: preludeAnimation
            x: 0
            y: 0
            property int startImage: 304
            visible: true
            source: "../Resources/PNGs/Renderings/"+preludeAnimationDirectory.intValue+"/1-"+startImage+".png"
            NumberAnimation on startImage
                from: 304
                to:  480
                duration: 6000

    Unfortunately, the animations result in dropped frames on my target platform, which is an X86 based 800Mhz AMD process, with 4GB RAM.

    Is there a more efficient, i.e., faster, way to generate the animations using QML?

    Thank you in advance.


  • Hi
    I was developing a game were I had dynamic objects with initial animation when created. If those object were created with the main loop running, the animation were very very slow, else with the main loop stopped, animations were good. I had to do animations with a timer, it worked very well. So do try to use a timer to sequence your images to see if your can get better performance.

  • try to use Sprite Animation instead with atlas sprite

  • Hi,

    You should have a look at V-Play. It will help you enhance the performance and at the same time reduce the lines of code you'll have to write.

    V-Play offers different ways to add animations with high performance to both Apps and Games. You can directly integrate the animations offered by V-Play into any existing Qt application.

    • Animations with TexturePacker
      • Heavily reduce storage and memory consumption, therefore speed up your app or game.
      • Use this for animations that consist of a sequence of images (Sprites)
      • Check out the Tutorial
    • Skeleton-Animations with Spine
      • Flexible way for adding advanced animations
      • Use this if you have a model ("Skeleton") that defines your animation, as explained here
      • Check out the Tutorial

    Code example with Texture Packer Animation:

         TexturePackerAnimatedSpriteVPlay {
           id: nailgunSprite
           source: "../assets/img/squaby.json"
           frameNames: ["nailgun.png"]
           x: 100
           y: 100

    Code Example with Spine Animation:

         Goblins { // note this is the name of the animation
           id: goblin
           skins.state: "GOBLIN" //initial skin
           x: scene.width / 2
           y: scene.height / 2


Log in to reply