Qt Quick里的AnimatedSprite的用法

之前用 AnimatedImage 时一直对 AnimatedSprite 很奇怪，想试一下怎么用，一下子没试出来，放下了，后来一直没时间。 OK ，今天想起来，又搞了一下。

AnimatedSprite 说明

    AnimatedSprite 元素用来播放精灵动画。

    一些常见的属性解释：

• source 属性是 url 类型的，接受一个包含多帧的图片。
• frameWidth 和 frameHeight 指定帧大小。
• frameX 和 frameY 指定第一帧的左上角。
• frameCount 指定这个精灵动画有多少帧。
• frameDuration 指定每一帧的持续时间。相关的还有一个 frameRate ，指定帧率，即每秒播放多少帧。如果你指定了帧率，优先使用帧率来播放动画。
• paused 属性是 bool 值，指示动画是否处在暂停状态，默认是 false
• running 属性是 bool 值，指示动画是否在运行，默认是 true ，一启动就运行。如果你设置它为 false ，那 AnimatedSprite 对象构造完毕后并不运行，需要将其设置为 true 才开始运行。
• loops 为 int 型，指示循环播放的次数，默认是无限循环

    方法：

• pause() ，暂停动画
• resume() ，继续播放
• restart() ，重新播放，当动画处在播放状态时有效
• advance() ，前进一帧，当动画处在暂停状态时有效

    还有一些属性，看帮助吧。

图片格式

    AnimatedSprite 元素使用的图片格式有特别的要求。下面是我们示例用的图片：

    图片需要平铺所有的帧（和GIF不同），其实这里的帧就是图片里的一个区域。平铺的顺序是从左到右、从上到下。你指定了 frameX 、 frameY 、 frameWidth 、 frameHeight 、 frameCount ，AnimatedSprite 就会分析你提供的图片，生成相关帧的信息。

示例

    创建了一个 Qt Quick Application ，播放 numbers.png ，效果看起来就像电影前面的倒计时数字那样。

    效果如图：

main.qml 代码都在这里：

[javascript]  view plain copy

1. import QtQuick 2.3  
2. import QtQuick.Window 2.2  
3. import QtQuick.Controls 1.2  
4.   
5. Window {  
6.     visible: true;  
7.     width: 360;  
8.     height: 320;  
9.     color: "black";  
10.   
11.     AnimatedSprite {  
12.         id: animated;  
13.         width: 64;  
14.         height: 64;  
15.         anchors.centerIn: parent;  
16.         source: "qrc:/numbers.png";  
17.         frameWidth: 64;  
18.         frameHeight: 64;  
19.         frameDuration: 200;  
20.         frameCount: 10;  
21.         frameX: 0;  
22.         frameY: 0;  
23.   
24.         onCurrentFrameChanged: {  
25.             info.text = "%1/%2".arg(animated.currentFrame).arg(animated.frameCount);  
26.         }  
27.     }  
28.   
29.     Row{  
30.         spacing: 4;  
31.         anchors.horizontalCenter: parent.horizontalCenter;  
32.         anchors.bottom: parent.bottom;  
33.         anchors.bottomMargin: 4;  
34.         Text {  
35.             id: info;  
36.             width: 60;  
37.             height: 24;  
38.             color: "red";  
39.             verticalAlignment: Text.AlignVCenter;  
40.             horizontalAlignment: Text.AlignRight;  
41.         }  
42.   
43.         Button {  
44.             width: 60;  
45.             height: 24;  
46.             text: (animated.paused == true) ? "Play" : "Pause";  
47.             onClicked: (animated.paused == true) ? animated.resume() : animated.pause();  
48.         }  
49.   
50.         Button {  
51.             width: 70;  
52.             height: 24;  
53.             text: "Advance";  
54.             onClicked: animated.advance();  
55.         }  
56.   
57.         Button {  
58.             width: 70;  
59.             height: 24;  
60.             text: "Restart";  
61.             onClicked: animated.restart();  
62.         }  
63.   
64.   
65.         Button {  
66.             width: 60;  
67.             height: 24;  
68.             text: "Quit";  
69.             onClicked: Qt.quit();  
70.         }  
71.     }  
72. }  

    很简单，不解释了。

回顾一下我的Qt Quick系列文章：

• Qt Quick 简介
• QML 语言基础
• Qt Quick 之 Hello World 图文详解
• Qt Quick 简单教程
• Qt Quick 事件处理之信号与槽
• Qt Quick事件处理之鼠标、键盘、定时器
• Qt Quick 事件处理之捏拉缩放与旋转
  
• Qt Quick 组件与对象动态创建详解
  
• Qt Quick 布局介绍
• Qt Quick 之 QML 与 C++ 混合编程详解
• Qt Quick 图像处理实例之美图秀秀（附源码下载）
• Qt Quick 之 PathView 详解
• Qt Quick实例之挖头像
• Qt Quick综合实例之文件查看器
• Qt Quick调试之显示代码行号
• Qt Quick实现的涂鸦程序
• Qt Quick播放GIF动画
• Qt Quick 中的 drag and drop（拖放）