Qt Quick播放Gif动画

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

    这里是用到的 Gif 图片:

Qt Quick播放Gif动画_第1张图片

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 :

Qt Quick播放Gif动画_第2张图片

    下面是暂停时的效果:

Qt Quick播放Gif动画_第3张图片


    OK ,示例就酱紫了。


回顾一下我的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,Qt,Quick简明教程)