Qt Quick播放Gif动画

时间：2014-12-02 13:34:24 阅读：236 评论：0 收藏：0 [点我收藏+]

标签：qml qt quick 动画

Qt Quick提供了一个类 AnimatedImage ，可以播放 Gif 动画，使用简单，这里是一个示例。

这里是用到的 Gif 图片：

bubuko.com,布布扣

AnimatedImage

AnimatedImage 提供了五个属性：

currentFrame，指示当前正在播放的帧序号
frameCount，指示图片的总帧数
paused，表示是否暂停，设置它也可以暂停或继续播放
playing，指示动画是否在播放，默认为 true ，意思是 AnimatedImage 对象创建后立即开始播放
source，类型为 url ，指定要播放的图片地址，可以使本地文件、 qrc 里的资源、网络文件

playGIF示例

playGIF 示例可以播放、暂停 GIF ，显示当前帧和总帧数，还有一个退出按钮，很简单。

新建一个 Qt Quick App 项目，把 shapes.gif 添加到 qrc 文件中，我们在 QML 代码中通过 "qrc:/shapes.gif" 来访问它。

main.qml 内容如下：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

Window {
    visible: true;
    width: animated.width;
    height: animated.height + 40;

    AnimatedImage {
        id: animated;
        source: "qrc:/shapes.gif";

        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 = !animated.paused;
        }

        Button {
            width: 60;
            height: 24;
            text: "Quit";
            onClicked: Qt.quit();
        }
    }
}

main.cpp 都是新建项目向导生成的代码，不必列了。

下面是程序运行时正在播放的效果，“播放/暂停”按钮显示 Pause ：

bubuko.com,布布扣