Qt Quick 动画

参考官方文档: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居中,所以这个动画会类似开幕的效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.初识 Qt5 本书将为大家介绍使用 Qt 5.x 版本开发应用程序的不同方面。我们将专注于新的 Qt Quic...
    赵者也阅读 2,620评论 0 8
  • Animation Animation类是所有动画(scale、alpha、translate、rotate)的基...
    四月一号阅读 1,936评论 0 10
  • 本笔记的原文本链接 Property Animation Overview 属性动画总览 The property...
    Jaesoon阅读 1,149评论 2 3
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,758评论 0 10
  • 【趁现在、别等待】 前天给人事经理开会分配了任务,时间截止于本周末。出乎我的意料两个人已经把想法和方案弄好了,该准...
    姐是纺织姑娘阅读 47评论 0 0