The use of Animatedsprite in Qt quick

Before using Animatedimage Animatedsprite is very strange, want to try how to use, suddenly did not try out, put down, and then have no time. OK, think of it today, and then a bit.

Animatedsprite description

The Animatedsprite element is used to play sprite animations.

Some common attributes are explained:

• The Source property is a URL type that accepts a picture that contains multiple frames.
• Framewidth and Frameheight Specify the frame size.
• FrameX and Framey Specify the upper-left corner of the first frame.
• FRAMECOUNT Specifies how many frames this sprite animation has.
• frameduration specifies the duration of each frame. There is also a framerate that specifies the frame rate, which is how many frames are played per second. If you specify a frame rate, the frame rate is used first to play the animation.
• The Paused property is a bool value that indicates whether the animation is in a paused state, and the default is False
• The running property is a bool value that indicates whether the animation is running, which is true by default, and runs as soon as it starts. If you set it to False, the Animatedsprite object does not run after it is constructed, and it needs to be set to true before it starts running.
• Loops is an int that indicates the number of times the loop is played, by default an infinite loop

Method:

• Pause (), pausing the animation
• Resume (), continue playing
• Restart (), re-play when the animation is in play state
• Advance (), forward one frame, active when the animation is in a paused state

There are some properties, see Help.

Picture format

The image format used by the Animatedsprite element has special requirements. Here is a picture of our example:

The picture needs to tile all the frames (unlike GIF), in fact the frame here is an area in the picture. The order of tiling is from left to right, top to bottom. You specify FrameX, Framey, Framewidth, Frameheight, Framecount, and Animatedsprite will analyze the images you provide and generate information about the relevant frames.

Example

Create a Qt Quick application, play numbers.png, the effect looks like the countdown number in front of the 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 (); }    }}

Very simple, not explained.

Look back at my QT Quick Series articles:

• About Qt Quick
• QML Language Basics
• Qt Quick's Hello World text
• Qt Quick Simple Tutorial
• The signal and slot of Qt Quick event processing
• Qt Quick Event Processing mouse, keyboard, timer
• Pinch scaling and rotation of Qt Quick event processing
  
• Qt Quick component and Object dynamic creation
  
• Introduction to Qt Quick layout
• Qt Quick's QML and C + + mixed programming
• Qt Quick Image Processing example of beauty 美图秀秀 (with source download)
• Qt Quick's Pathview detailed
• Qt Quick Example Digging avatar
• A file viewer for the Qt quick Synthesis instance
• QT Quick Debug Display code line number
• Qt Quick implementation of graffiti program
• Qt Quick Play GIF animation
• Drag and drop in Qt Quick (drag and drop)

The use of Animatedsprite in Qt quick