首页 > 代码库 > Qt Quick里的AnimatedSprite的用法
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 代码都在这里:
import QtQuick 2.3 import QtQuick.Window 2.2 import QtQuick.Controls 1.2 Window { 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(); } } }
很简单,不解释了。
回顾一下我的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(拖放)
Qt Quick里的AnimatedSprite的用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。