Use of AnimatedSprite in Qt Quick

Use of AnimatedSprite in Qt Quick

I used to use AnimatedImage for a while and it was strange to use AnimatedSprite. I wanted to give it a try. I didn't try it at all. I put it down, but I didn't have time. OK. Now let's think about it again.

Description of AnimatedSprite

The AnimatedSprite element is used to play genie animations.

Some common attributes are described as follows:

• The source attribute is of the url type and accepts an image containing multiple frames.
• FrameWidth and frameHeight specify the frame size.
• FrameX and frameY specify the upper left corner of the first frame.
• FrameCount specifies the number of frames in this sprite animation.
• FrameDuration specifies the duration of each frame. There is also a related frameRate, which specifies the frame rate, that is, the number of frames played per second. If you specify the frame rate, the frame rate is used first to play the animation.
• The paused attribute is a bool value, indicating whether the animation is paused. The default value is false.
• The running attribute is a bool value, indicating whether the animation is running. The default value is true. It runs as soon as it is started. If you set it to false, the AnimatedSprite object does not run after being constructed. You need to set it to true to start running.
• The loops type is int, indicating the number of loop playback times. The default value is an infinite loop.

Method:

• Pause (), pause Animation
• Resume (), continue playing
• Restart (), play again, effective when the animation is playing
• Advance (), one frame forward, effective when the animation is paused

There are also some attributes. See help.

Image Format

Imatedsprite elements have special requirements on the image format. The following is the image used in our example:

The image needs to tile all frames (different from GIF). In fact, the frame here is an area of the image. The order of tile is from left to right, from top to bottom. If you specify frameX, frameY, frameWidth, frameHeight, and frameCount, AnimatedSprite will analyze the images you provide and generate the relevant frame information.

Example

A Qt Quick Application is created to play numbers.png. The effect looks like a countdown number in front of a movie.

Effect

The main. qml code is here:

import QtQuick 2.3import QtQuick.Window 2.2import QtQuick.Controls 1.2Window {    visible: true;    width: 360;    height: 320;    color: "black";    AnimatedSprite {        id: animated;        width: 64;        height: 64;        anchors.centerIn: parent;        source: "qrc:/numbers.png";        frameWidth: 64;        frameHeight: 64;        frameDuration: 200;        frameCount: 10;        frameX: 0;        frameY: 0;        onCurrentFrameChanged: {            info.text = "%1/%2".arg(animated.currentFrame).arg(animated.frameCount);        }    }    Row{        spacing: 4;        anchors.horizontalCenter: parent.horizontalCenter;        anchors.bottom: parent.bottom;        anchors.bottomMargin: 4;        Text {            id: info;            width: 60;            height: 24;            color: "red";            verticalAlignment: Text.AlignVCenter;            horizontalAlignment: Text.AlignRight;        }        Button {            width: 60;            height: 24;            text: (animated.paused == true) ? "Play" : "Pause";            onClicked: (animated.paused == true) ? animated.resume() : animated.pause();        }        Button {            width: 70;            height: 24;            text: "Advance";            onClicked: animated.advance();        }        Button {            width: 70;            height: 24;            text: "Restart";            onClicked: animated.restart();        }        Button {            width: 60;            height: 24;            text: "Quit";            onClicked: Qt.quit();        }    }}

It's very simple. Don't explain it.

Let's review my Qt Quick series of articles:

• Qt Quick introduction
• QML language basics
• Qt Quick's Hello World graphic explanation
• Simple Qt Quick tutorial
• Signal and slot of Qt Quick event processing
• Qt Quick event processing-mouse, keyboard, and Timer
• Qt Quick event processing-pinch, zoom, and rotate
  
• Dynamic Creation of Qt Quick components and objects
  
• Introduction to Qt Quick Layout
• QML and C ++ mixed programming in Qt Quick
• Qt Quick image processing instance meitu xiuxiu (source code download)
• Explanation of Qt Quick PathView
• Picture digging for Qt Quick instances
• Qt Quick integrated instance File Viewer
• Display the code line number for Qt Quick debugging
• Graffiti program implemented by Qt Quick
• Play GIF animation with Qt Quick
• Drag and drop In Qt Quick (drag and drop)