QML之动画的使用(含源码+注释)

文章目录

  • 一、动画效果示例图
  • 二、个人理解
  • 三、源码
  • 总结

一、动画效果示例图

下图演示四组动画效果分别包含数值动画(单个方块、多个方块),顺序动画,并行动画等效果
在这里插入图片描述

二、个人理解

  1. NumberAnimation:改变控件属性值的动画效果,可针对坐标位置(x,y)、大小(width、height)、透明度等参数改变动画。
  2. SequentialAnimation:顺序动画,作用域包含的多个动画从上到下依次运行动画效果。
  3. ParallelAnimation:并行动画,作用域包含的多个动画同时运行。
  4. 其他动画:QML还包含PropertyAnimation、RotationAnimation、ColorAnimation等动画效果,可根据实际需求使用具体效果。

三、源码

import QtQuick 2.0
import QtQuick.Controls 2.12

Item {

        Button {
            id: btnNumForSingle
            text: "属性动画(单个)"
            onClicked: {
                rect1.resetPos() // 重置方块位置
                numAnimForSingle.start() // 动画启动
            }
        }

        Button {
            id: btnNumForMuilt
            text: "属性动画(多个)"
            anchors.left: btnNumForSingle.right
            onClicked: {
                numAnimForMulti.resetPos() // 重置方块位置
                numAnimForMulti.start() // 动画启动
            }
        }

        Button {
            id: btnNumForSequen
            text: "顺序动画"
            anchors.left: btnNumForMuilt.right
            onClicked: {
                rect1.resetPos() // 重置方块位置
                sequentialAnim.start() // 动画启动
            }
        }

        Button {
            id: btnNumForParallel
            text: "并行动画"
            anchors.left: btnNumForSequen.right
            onClicked: {
                rect1.resetPos() // 重置方块位置
                parallelAnim.start() // 动画启动
            }
        }

        Rectangle {
            id: rect1
            x: 20
            y: 300
            width: 50
            height: 50
            visible: true
            color: "skyblue"
            function resetPos() {
                x = 20
                y = 300
            }
        }



        Rectangle {
            id: rect2
            x: 20
            y: 370
            width: 50
            height: 50
            visible: true
            color: "lightgreen"
            function resetPos() {
                x = 20
                y = 370
            }
        }

    // 单元素动画
    NumberAnimation {
        id: numAnimForSingle
        target: rect1
        property: "x"
        duration: 2000
        to: 500
        easing.type: Easing.InOutQuad   // 动画效果
    }

    // 多元素对象动画
    NumberAnimation {
        id: numAnimForMulti
        targets: [rect1, rect2]
        properties: "x,y"
        duration: 2000
        to:350
        function resetPos() {
            rect1.resetPos()
            rect2.resetPos()
        }
    }

    //! 多动画组合
    // 顺序动画
    SequentialAnimation {
        id:sequentialAnim
        NumberAnimation {
            target: rect1
            property: "x"
            duration: 2000
            to: 500
        }

        NumberAnimation {
            target: rect1
            property: "y"
            duration: 2000
            to: 200
        }

    }

    // 并行动画
    ParallelAnimation {
        id:parallelAnim
        NumberAnimation {
            target: rect1
            property: "x"
            duration: 2000
            to: 500
        }

        NumberAnimation {
            target: rect1
            property: "y"
            duration: 2000
            to: 200
        }
    }
}

总结

记录一下简易的QML动画效果使用,包含的动画效果考研根据需求使用,可能会有意想不到的收获。

友情提示——哪里看不懂可私哦,让我们一起互相进步吧
(创作不易,请留下一个免费的赞叭 谢谢 o/)

注:文章为作者编程过程中所遇到的问题和总结,内容仅供参考,若有错误欢迎指出。
注:如有侵权,请联系作者删除

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/221108.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣题:字符的统计-12.4

力扣题-12.4 [力扣刷题攻略] Re:从零开始的力扣刷题生活 力扣题1:657. 机器人能否返回原点 解题思想:进行统计即可 class Solution(object):def judgeCircle(self, moves):""":type moves: str:rtype: bool""&qu…

解决vue ssr服务端渲染运行时报错:net::ERR_PROXY_CONNECTION_FAILED

现象: 从代码里找了半天也没有找到问题,但是由于ssr服务端渲染配置本身非常复杂,步骤又繁琐, 而且报错又很多,不知道哪里出了问题。 感觉是header或者cookie丢失造成的,因为据说ssr本身有这样的缺陷&…

深信服行为管理AC设置用户定时注销

PS:设置用户无流量注销及每天定时注销 AC版本:AC13.0.62.001 Build20221107 官方通告: 截止标准版本AC12.0.80和AC13.0.80,暂不支持指定周期时间内注销一次所有用户,仅支持每天的固定时间注销所有用户,每…

『亚马逊云科技产品测评』活动征文|基于亚马逊EC2云服务器安装Bolo开源博客

授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器(Elastic Compute Cloud)是亚马…

通过keepalived+nginx实现 k8s apiserver节点高可用

一、环境准备 K8s 主机配置: 配置: 4Gib 内存/4vCPU/60G 硬盘 网络:机器相互可以通信 k8s 实验环境网络规划: podSubnet(pod 网段) 10.244.0.0/16 serviceSubnet(service 网段): 1…

nodejs+vue+ElementUi酒店餐饮客房点餐管理系统

系统非功能需求,只能是为了满足客户需求之外的非功能性要求。系统需要具有数据完整性验证的功能,对界面上非法的数据和不完整的数据进行提示,不能直接保存到数据库中,造成不完整性因素。运行软件:vscode 前端nodejsvueElementUi 语…

Linux 基础知识整理(三)

Linux文件和目录 Linux系统是一种典型的多用户系统,不同的用户有不一样的地位和权限。为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的规定。 root权限最高,可以通过ls -l 或…

【踩坑记录】apex包的安装

你是不是也遇到了ModuleNotFoundError: No module named ‘packaging‘ error: subprocess-exited-with-error错误? apex介绍 此存储库包含nvidia维护的实用程序,以简化Pytorch中的混合精度和分布式训练。 这里的一些代码最终将包含在上游Pytorch中。 A…

vue3里面生命周期的使用

前言: vue2里面的生命周期和vue3生命周期是非常的相似的,我们通过访问生命周期钩子来处理不同场景之间的应用。 生命周期钩子的函数定义:每一个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听,编译模…

算法学习系列(五):N皇后、数独

目录 引言一、N皇后问题代码实现测试 二、数独问题代码实现测试 引言 这个N皇后问题是很典型的一个递归问题,就是还是要掌握,所谓递归其实就是dfs,一层一层深入下去。数独和N皇后的思路是一样的,只不过一些细节不同而已。 一、N…

使用pyscenedetect进行视频场景切割

1. 简介 在视频剪辑有转场一词:一个视频场景转换到另一个视频场景,场景与场景之间的过渡或转换,就叫做转场。 本篇介绍一个强大的开源工具PySceneDetect,它是一款基于opencv的视频场景切换检测和分析工具,项目地址: h…

探秘 Sass 之路:掌握强大的 CSS 预处理器(上)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

uni-app 微信小程序之swiper轮播图

1. 实现效果 2. 完成代码 <template><view class"components-home"><view style"margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;"><image srchttps://xxx.com/img/wccQQP.png modewidthFix classpng …

AI助力智慧农业,基于YOLOv3开发构建农田场景下的庄稼作物、田间杂草智能检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

Ubuntu系统下使用apt-get安装Redis

记录一下Ubuntu20.04 64位系统下使用apt-get安装Redis 首先检查一下系统是否安装过redis whereis redismywmyw-K84HR:~$ whereis redis redis: mywmyw-K84HR:~$ 更新软件包 sudo apt-get update -y安装redis sudo apt-get install redis-server -ymywmyw-K84HR:~$ sudo apt…

ELasticsearch:什么是语义搜索?

语义搜索定义 语义搜索是一种解释单词和短语含义的搜索引擎技术。 语义搜索的结果将返回与查询含义匹配的内容&#xff0c;而不是与查询中的单词字面匹配的内容。 语义搜索是一组搜索引擎功能&#xff0c;其中包括根据搜索者的意图及其搜索上下文理解单词。 此类搜索旨在通过…

【S32K3环境搭建】-0.1-安装S32 Design Studio for S32 Platform 3.5

目录&#xff08;S32DS安装步骤详细&#xff09; 1 安装S32 Design Studio for S32 Platform 3.5准备工作 2 下载S32 Design Studio for S32 Platform 3.5安装包 2.1 获取S32DS的License许可 3 安装S32 Design Studio for S32 Platform 3.5 4 打开S32 Design Studio for S…

【网络奇缘】- 如何自己动手做一个五类|以太网|RJ45|网络电缆

​ ​ &#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 本篇文章关于计算机网络的动手小实验---如何自己动手做一个网线&#xff0c; 也是为后面的物理层学习进…

【LabVIEW学习】5.数据通信之TCP协议,控制电脑的一种方式

一。tcp连接以及写数据&#xff08;登录&#xff09; 数据通信--》协议--》TCP 1.tcp连接 创建while循环&#xff0c;中间加入事件结构&#xff0c;创建tcp连接&#xff0c;写入IP地址与端口号 2.写入tcp数据 登录服务器除了要知道IP地址以及端口以外&#xff0c;需要用户名与密…

nodejs+vue+微信小程序+python+PHP在线购票系统的设计与实现-计算机毕业设计推荐

伴随着信息时代的到来&#xff0c;以及不断发展起来的微电子技术&#xff0c;这些都为在线购票带来了很好的发展条件。同时&#xff0c;在线购票的范围不断增大&#xff0c;这就需要有一种既能使用又能使用的、便于使用的、便于使用的系统来对其进行管理。在目前这种大环境下&a…