程序员经验分享-hwhale

QML入门----图形动画基础（一）

2023-05-16

文章目录

      • 一、图形动画基础
        • 1.颜色
        • 2.渐变（Gradient）
      • 二、图片
        • 1.图片
        • 2.边界图片
        • 3.动态图片
      • 三、缩放、旋转、平移变换
        • 1.使用属性
        • 2.高级变换 （Transform）
      • 四、状态改变使用过渡
      • 五、使用默认行为动画
      • 六、并行或顺序动画组
      • 七、动画师动画
      • 八、控制动画的执行
        • 1.动画回放
        • 2.缓和曲线
      • 九、精灵动画
      • 十、拖拽和弹动（Flickable）
      • 十一、翻转效果（Flipable）

一、图形动画基础

1.颜色

有多种表示方式

  • SVG：“red”
  • 十六进制：#RRGGBB
  • Qt函数：Qt.rgba(1, 0, 0, 1)

2.渐变（Gradient）

使用渐变开销较大，建议只在静态项目中使用。

二、图片

1.图片

Image {
    id: image
    width: 200; height: 200
    fillMode: Image.Stretch
    //实际保存在内存中图片大小为100 * 100像素，可以提高性能。可以应对加载大图片时，内存过大的问题
    sourceSize.width: 100; sourceSize.height: 100
    source: "http://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"

	//可以获取到图片的进度状态，加载完，正在加载
    onStatusChanged: {
        if (image.status === Image.Ready)
            console.log("ready")
        else if (image.status === Image.Loading)
            console.log("loading")
    }
    //图片翻转，镜像
	mirror: true
}

2.边界图片

利用图片创建边框，BorderImage会将原图片分成九个区域。四个角不进行缩放，其他区域可以进行缩放或者平铺。

3.动态图片

AnimatedImage类型，用来播放一系列帧的图片动画，如GIF

当前帧：currentFrame
动画总长度：frameCount ，返回帧的总个数
开始：playing
暂停： paused

三、缩放、旋转、平移变换

1.使用属性

scale：缩放，值小于1缩小，值大于1放大，值负数镜像显示，值默认是1正常显示
rotation：顺时针旋转的度数，默认值为0，负值则会逆时针旋转。旋转也是transformOrigin指定中心点

Rectangle {
    width: 100; height: 100
    color: "lightgrey"

    Rectangle {
        width: 25; height: 25
        color: "red"
    }

    Rectangle {
        width: 25; height: 25
        color: "yellow"
        //x、y控制控件左上角的显示位置
        x: 25; y: 25

		//scal: 控制缩放
		//scale: 1.8
    }
}

在这里插入图片描述
加了缩放，默认原点是当前项目的中心，如果想向上图一样小正方形尖对尖，可以设置项目原点在左上角。
在这里插入图片描述
在这里插入图片描述

 Rectangle {
        width: 25; height: 25
        color: "yellow"
        x: 25; y: 25
		//scal: 控制缩放
		scale: 1.8
		transformOrigin: "TopLeft"
		//rotation控制旋转
		//rotation: 90
    }

在这里插入图片描述

2.高级变换 （Transform）

可以Rotation、Scale、Translate，例如，以Y轴旋转45度

Row {
    x: 10; y: 10; spacing: 10

    Image {
        id: name; source: "cat.jpg"
    }

    Image {
        id: name1; source: "cat.jpg"
        transform: Rotation {
            //指定原点
            origin.x: 30; origin.y: 30
            //代表X轴 Y轴 Z轴，可实现3D效果
            axis {
                x: 0; y: 1; z: 0
            }
            //旋转角度
            angle: 45
        }
    }
}

在这里插入图片描述
例如，将图片在X轴方向放大2倍

	Image {
        x:20; y:10; source: "cat.jpg"
        transform: Scale {
            origin.x: 25; origin.y: 25
            xScale: 2
        }
    }

平移使用Translate，提供了x和y属性

四、状态改变使用过渡

一个button在按压和释放时，背景颜色进行变换

Rectangle {
    width: 75; height: 75
    id: button
    state: "RELEASED"

    MouseArea {
        anchors.fill: parent
        //按压状态
        onPressed: button.state = "PRESSED"
        //释放状态
        onReleased: button.state = "RELEASED"
    }

	//states属性是一个包含了该项目所有状态的列表
    states: [
        State {
            name: "PRESSED"
            PropertyChanges { target: button; color: "lightblue"}
        },
        State {
            name: "RELEASED"
            PropertyChanges { target: button; color: "lightsteelblue"}
        }
    ]
    
	//transitions：可以在不同状态间切换时进行过渡动画
    transitions: [
        Transition {
            from: "PRESSED"
            to: "RELEASED"
            ColorAnimation { target: button; duration: 100}
        },
        Transition {
            from: "RELEASED"
            to: "PRESSED"
            ColorAnimation { target: button; duration: 100}
        }
    ]
}

五、使用默认行为动画

每点击一次，矩形的长宽增大50

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    //Behavior：当width这个属性变化时，就会应用这个动画
    Behavior on width {
        NumberAnimation { id: anim1; duration: 1000 }
    }

    Behavior on height {
        NumberAnimation { id: anim2; duration: 1000 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rect.width += 50; rect.height += 50
        }
    }
}

在这里插入图片描述

六、并行或顺序动画组

SequentialAnimation可以保证动画组顺序执行，ParallelAnimation并行执行

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    SequentialAnimation {
        running: true
        //顺序执行：先变小宽，在变小高。这两个独立动画加入到动画组后，必须作为一个整体，开始或停止
        NumberAnimation { target: rect; property: "width"; to: 30; duration: 1000 }
        NumberAnimation { target: rect; property: "height"; to: 30; duration: 1000 }
    }
}

在这里插入图片描述

七、动画师动画

不同于上面的普通动画类型，有几个特殊的动画类型，只不过很类似。如ColorAnimation、ScaleAnimator、ScaleAnimator等。如下图的并行动画，不仅颜色变，缩放也同时变。

	ParallelAnimation {
        ColorAnimation {
            target: mixBox
            property: "color"
            from: "forestgreen"
            to: "lightsteelblue";
            duration: 1000
        }
        ScaleAnimator {
            target: mixBox
            from: 2
            to: 1
            duration: 1000
        }
        running: true
    }

八、控制动画的执行

1.动画回放

Animation类型包含了start、stop、resume（恢复）、pause（暂停）、resart（重新开始）、complete（完毕）。
需要注意的是stop是从当前位置停下来，complete是将动画执行完毕。

//宽从100增加到500，设置定时器，使其在500毫秒时暂停，此时宽应该增加至300处，实现了动画的暂停
Rectangle {
    width:100; height: 300
    color: "red"
    NumberAnimation on width{
        id: an
        to:500; duration: 1000
    }

    Timer {
        interval: 500; running: true
        onTriggered: {
            an.pause()
        }
    }
}

2.缓和曲线

使用它，可以有效简化动画效果的创建过程，如反弹效果、加速、减速、循环动画。QT中有示例，Easing Curves. 它包含了几十种效果图，如下图这个，斜率先高后平然后在高。速度在变化。
在这里插入图片描述

九、精灵动画

Sprite 精灵引擎是一个随机状态机，如果一张图片包含了多个帧，精灵引擎就可以使用该图片来创建动画。就像QQ飞车中的休闲区，人物有时站立，有时坐着，有时跑，并且可以控制动作时间比例，以至于人物会一直移动，不会看起来很呆板。

十、拖拽和弹动（Flickable）

通过这个弹动效果类型，可以在规定的区域显示更多的内容。回弹的效果也可以单独设置，可以通过flickableDirection来控制弹动的方向。flickDeceleration可设置弹动速度。

Flickable {
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height
    
    Image {
        id: image
        source: "cat.jpg"
    }
}

在这里插入图片描述
contentWidth，contentHeight设置可以进行拖拽的大小，也是在Flickable中显示的内容。Flickable不会自动裁剪它的内容，你可以自己设置clip属性，将其裁剪，不显示设置以外的区域。如下图，只在200,200的范围内拖拽弹动。

Rectangle {
    width: 360 ; height: 360
    color: "blue"
    
    Flickable {
        width: 200; height: 200
        contentWidth: image.width; contentHeight: image.height
        clip: true
        
        Image {
            id: image
            source: "cat.jpg"
        }
    }
}

在这里插入图片描述

十一、翻转效果（Flipable）

通过使用Rotation、State、Transition实现翻转。如下图，设置正面和反面图片，正面图片平铺，点击后，会翻转，再点击，就会初始化为正面。

Flipable {
    id: flipable
    width: 240
    height: 240
    
    property bool flipped: false
    
    front: Image { source: "cat.jpg"; anchors.centerIn: parent }
    back: Image { source: "ball.gif"; anchors.centerIn: parent }
    
    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        //绕Y轴旋转
        axis.x: 0; axis.y: 1; axis.z: 0
        angle: 0    // 默认初始化角度
    }
    
    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        //属性值变为true后，触发翻转180度
        when: flipable.flipped
    }
    
    transitions: Transition {
    	//翻转持续4秒中
        NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
    }
    
    MouseArea {
        anchors.fill: parent
        //每点一次，flipped属性值变化
        onClicked: flipable.flipped = !flipable.flipped
    }
}

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

QML入门----图形动画基础（一） 的相关文章

  • python-gitlab API基本操作以及（下载指定文件或文件夹）

    一 使用python对gitlab进行自动化操作 1 python gitlab模块官网文档 2 gitlab官网文档 二 常用使用功能 span class token comment 1 登录gitlab span def span c

  • python 完美压缩文件夹为zip格式

    一 压缩 1 备注 xff08 1 xff09 os walk xff0c 会返回一个三元组 path xff1a 文件夹本身的地址 xff1b dirNames xff1a 该文件夹中所有目录的名字列表 xff1b fileNames x

  • 模拟执行网页接口

    一 背景 我想使用程序自动执行提交软件操作 xff0c 这时候需要通过谷歌浏览器去查看需要使用哪些请求字段等 二 实现方式 1 先在浏览器上输入账号 密码进行登录 2 打开开发者工具 3 设置浏览目录 4 然后输入相关参数 xff0c 手动

  • Python resquests使用multipart/form-data格式上传参数或文件

    参考 xff1a 井蛙不可语于海 一 需要注意的坑 在resquests中不用加上Content Type xff0c 否则请求无法成功 xff0c 它会有一个默认值 二 代码示例 span class token keyword try

  • QT Expression:_BLOCK_TYPE_IS_VALID断言错误

    一 最近使用QT xff0c 写了一个小小的Demo xff0c 在关闭窗口时总是报错 二 原因 1 Qt初始化时有两种构造方式 xff1a span class token comment xff08 1 xff09 将窗口对象定义在栈上

  • QT 解压tar.gz格式的压缩包

    一 tar gz 以 tar gz为后缀的文件是一种压缩文件 xff0c 在Linux下常见 一般情况下都是源代码的安装包 它其实是先打包成tar格式的文件 xff0c 然后利用gzip压缩技术来压缩 这两天我想在windows下去解压这种

  • QT error C2220: 警告被视为错误 - 没有生成“object”文件

    一 错误代码图 下面的代码会造成这个问题 span class token keyword void span CustomWindow span class token operator span span class token fun

  • QT 复制、粘贴系统剪贴板

    一 复制 可以复制文字 图片到系统剪贴板 xff0c 图片最好将QImage格式复制到剪贴板 xff0c QPixmap要比QImage慢 xff0c 因为QPixmap需要首先转换为QImage格式 QClipboard span cla

  • QT 最常用字符串操作

    文章目录 96 96 QString 96 96 一 查找字符串位置二 截取指定位置的字符串三 判断字符串是否含有空字符四 判断字符串是否为空值五 指定位置插入字符串六 判断是否以某个字符串开始或结尾七 删除空字符八 排序字符串九 切割字符

  • QT 计算字符串、文件md5值

    一 计算字符串md5值 xff08 1 xff09 QCryptographicHash xff0c 提供一种生成加密散列的方法 xff0c Hash叫作散列表 xff0c 也叫作哈希 xff08 2 xff09 当前支持MD4 MD5 S

  • Ubuntu系统装上了以后应该干什么？

    我列出一个Linux Ubuntu装机单 xff1a 可以直接在桌面上新建文本文档 xff0c 复制粘贴我的装机命令单 xff0c 然后文本文档后缀改成sh xff0c 再在属性里设置 允许以程序执行文件 xff0c 就可以了 装机单 xf

  • QT 创建、修改桌面快捷方式，固定任务栏快捷方式

    一 获取系统文件路径 我们用到DesktopLocation和AppDataLocation 二 创建与修改快捷方式路径 修改可以直接将创建的快捷方式覆盖到指定的路径中即可 xff08 1 xff09 桌面快捷方式 QString desk

  • QT UTF-8转GBK编码

    在Qt5中使用Unicode来存储 操作字符串 xff0c windows下是GBK编码 UTF 8 转 GBK QString appLink span class token operator 61 span span class to

  • QT 删除一周前的日志

    1 现象 本地客户端log越来越大 xff0c 写入速度也会变慢 xff0c 所以在启动时进行清理 2 日志文件名 3 代码 span class token keyword void span span class token funct

  • Python脚本转换为exe程序

    一 安装pyinstaller pip install pyinstaller 二 打包程序 xff08 pyinstaller exe在python下的 Scripts 文件夹下 xff09 python pyinstaller exe

  • QT 计算文件夹总大小并转换为B、KB、M、G

    一 计算文件夹总大小 qint64 span class token function fileSize span span class token punctuation span span class token keyword con

  • QT 自定义滑动条（上方有实时方框显示数值，且带有刻度值）

    文章目录 一 效果图二 原理三 示例代码四 还可以使用系统stylesheet语法来自定义滑动条五 设置小数值 一 效果图 这种滑动条是控件所拼接而成 二 原理 xff08 1 xff09 LectureCorrectBoxSliderFo

  • QT 流式布局水平插入小部件（可自动换行）

    一 类似于这样的效果图 由于对象不确定有多少人 xff0c 所以使用代码 xff0c 在布局中添加部件 xff0c 如果一行撑不下 xff0c 则自动添加到第二行 二 使用FlowLayout FlowLayout是一个自定义布局类 xff

  • QT 计算平均分（向上取整或向下取整）

    一 场景 需要计算四门成绩的平均分 xff0c 并向上取整 span class token keyword double span temp span class token operator 61 span span class tok

  • QT 工作遇到的小问题

    文章目录 1 QT中清空布局中所有小控件2 纯代码添加QPushButton xff0c 设置样式checked不生效3 stackedWidget必须在初始化时 xff0c 设置当前页 xff0c 否则有可能顺序会打乱 xff0c 画面顺

随机推荐

热门标签