美文网首页
Qt Quick 动画

Qt Quick 动画

作者: 一个三要不起 | 来源:发表于2019-09-28 15:53 被阅读0次

参考官方文档:https://doc.qt.io/qt-5/qml-qtquick-animation.html

所有动画类型都是继承自Animation,这些动画类都有AnchorAnimation, Animator, ParallelAnimation, ParentAnimation, PathAnimation, PauseAnimation, PropertyAction, PropertyAnimation, ScriptAction, SequentialAnimation

PropertyAnimation类型举例:

import QtQuick 2.13
import QtQuick.Window 2.13

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Test Animation")

    property var colorList: ["white", "aqua", "burlywood", "cadetblue", "coral"]
    property var colorIdx: 0

    Rectangle{
        id: rect
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: colorList[colorIdx]

        PropertyAnimation{
            id: animation
            target: rect
            properties: "width"
            from: 0
            to: root.width
            duration: 3000
            easing.type: Easing.Linear
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                root.color = rect.color
                colorIdx = (colorIdx + 1) % colorList.length
                animation.start()
            }
        }
    }
}

其作用是点击rect时会切换rect的背景颜色,动画效果是让rect 的width值从0变到640(root.width),用时3000毫秒,变化趋势是线性变化。由于rect使用了anchors居中,所以这个动画会类似开幕的效果。

相关文章

  • QT - Quick时间线

    QT - Quick时间线 Qt Quick Timeline模块可启用基于关键帧的动画和参数化。Qt Desig...

  • Qt Quick 动画

    参考官方文档:https://doc.qt.io/qt-5/qml-qtquick-animation.html ...

  • Qt及Qt Quick开发实战精解

    Qt及Qt Quick开发实战精解主要讲解了5个Qt综合应用程序的开发过程和Qt Quick的相关内容。《Qt及Q...

  • Qt及Qt Quick开发实战精解

    Qt及Qt Quick开发实战精解主要讲解了5个Qt综合应用程序的开发过程和Qt Quick的相关内容。《Qt及Q...

  • Qt - Quick控件配置文件(qtquickcontrols

    Qt Quick控件配置文件 Qt Quick Controls支持一个特殊的配置文件qtquickcontrol...

  • QT - Qt Quick编程入门

    Qt Quick编程入门 基于警报应用程序的Qt Quick教程。 本教程介绍如何开发简单的警报应用程序作为Qt ...

  • 说说QtQuick提供的类型

    Qt Quick 提供了标准qml类型,可视化类型,动画类型以及其他qml类型。 标准qml类型 官网的介绍原文请...

  • QML用户界面基础(一)

    QML 允许开发人员以声明的方式构建用户界面。Qt Quick[https://doc.qt.io/qt-5/qt...

  • 小白学qml 1

    前言 作为小白,学习qml真的是非常的简单,快速。 Qt Quick是Qt5中⽤户界⾯技术的涵盖。 Qt Quic...

  • QtQuick2粒子和图形效果原理与实现

    本教程的目标是向您介绍QtQuick2的一些功能,以实现动画和图形效果。本教程主要概述如何在Qt Quick 2中...

网友评论

      本文标题:Qt Quick 动画

      本文链接:https://www.haomeiwen.com/subject/ocqtpctx.html