(4) qml动态元素

文章目录

  • 概述
      • 注意
    • 动画元素
    • 变化的策略
      • Animation on 变化
      • behavior on
      • ⽤standalone animation
          • 注意
    • 缓冲曲线(Easing Curves)
    • 动画分组

概述

这⼀章介绍如何控制属性值的变化,通过动画的⽅式在⼀段时间内来改变属性值。这项技术是建⽴⼀个现代化的平滑界⾯的基础,通过使⽤状态和过渡来扩展你的⽤户界⾯。每⼀种状态定义了属性的改变,与动画联系起来的状
态改变称作过渡。
一个动画定义了属性改变时的曲线变化 将一个值过渡到另一个值上面 平滑的曲线算法能引发一段时间内的属性的持续变化

注意

动画控制了属性的改变,也就是值的插⼊。这是⼀个基本的概念,QML是基
于元素,属性与脚本的。每⼀个元素都提供了许多的属性,每⼀个属性都在
等待使⽤动画。在这本书中你将会看到这是⼀个壮阔的场景,你会发现你⾃
⼰在看⼀些动画时欣赏它们的美丽并且肯定⾃⼰的创造性想法。然后请记
住:动画控制了属性的改变,每个元素都有⼤量的属性供你任意使⽤。

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("")Image {source: "image/xk.jpg"anchors.fill: parentImage {x: 40y: 80source: "image/pinwheel.png"NumberAnimation on x {to: 240duration: 6000loops: Animation.Infinite}RotationAnimation on rotation {to: 360duration: 6000loops: Animation.Infinite}}}
}

在这里插入图片描述

上⾯这个例⼦在x坐标和旋转属性上应⽤了⼀个简单的动画。每⼀次动画持续
4000毫秒并且永久循环。x轴坐标动画展⽰了⽕箭的x坐标逐渐移⾄240,旋
转动画展⽰了当前⾓度到360度的旋转。两个动画同时运⾏,并且在加载⽤
户界⾯完成后开始。
现在你可以通过to属性和duration属性来实现动画效果。或者你可以在opacity
或者scale上添加动画作为例⼦,集成这两个参数,你可以实现⽕箭逐渐消失
在太空中,试试吧!

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("")Image {source: "image/xk.jpg"anchors.fill: parentImage {x: 40y: 80source: "image/pinwheel.png"NumberAnimation on x {to: 240duration: 6000loops: Animation.Infinite}NumberAnimation on y {to: 400duration: 6000loops: Animation.Infinite}NumberAnimation on opacity {to: 0.1duration: 6000}RotationAnimation on rotation {to: 360duration: 6000loops: Animation.Infinite}}}
}

加了一些在透明度 和 y轴上的变化 动画效果 会在下落的过程中逐渐透明

动画元素

上面这种类型与 NumberAnimation RotationAnimation 的动画效果有很多其他种类的比如

  • PropertyAnimation(属性动画)使⽤属性值改变播放的动画

  • NumberAnimation(数字动画)使⽤数字改变播放的动画

  • ColorAnimation(颜⾊动画)- 使⽤颜⾊改变播放的动画

  • (旋转动画)- 使⽤旋转改变播放的动画
    除了上⾯这些基本和通常使⽤的动画元素,QtQuick还提供了⼀切特殊场景下 使⽤的动画:

  • PauseAnimation(停⽌动画) 运⾏暂停⼀个动画

  • SequentialAnimation(顺序动画)- 允许动画有序播放

  • ParallelAnimation(并⾏动画)- 允许动画同时播放

  • AnchorAnimation(锚定动画)- 使⽤锚定改变播放的动画

  • ParentAnimation(⽗元素动画)- 使⽤⽗对象改变播放的动画

  • SmotthedAnimation(平滑动画)跟踪⼀个平滑值播放的动画

  • SpringAnimation(弹簧动画)- 跟踪⼀个弹簧变换的值播放的动画

  • PathAnimation(路径动画)- 跟踪⼀个元素对象的路径的动画

  • Vector3dAnimation(3D容器动画) 使⽤QVector3d值改变播放的动画

  • 我们将在后⾯学习怎样创建⼀连串的动画。当使⽤更加复杂的动画时,我们
    可能需要在播放⼀个动画时中改变⼀个属性或者运⾏⼀个脚本。对于这个问 题,QtQuick提供了⼀个动作元素:

  • PropertyAction(属性动作)- 在播放动画时改变属性

  • ScriptAction(脚本动作)- 在播放动画时运⾏脚本

变化的策略

这部分定义了 什么情况下会触发一部分动画
如何启动动画的三种策略

Animation on 变化

第⼀个⽕箭使⽤了Animation on 属性变化的策略来完成。动画会在加载完成
后⽴即播放。

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("")Image {source: "image/xk.jpg"anchors.fill: parentImage {id: im1x: 40y: 80width: 200height: 200source: "image/yzfc.png"NumberAnimation on x {to: 241duration: 6000loops: Animation.Infinite}}}
}

平滑的移动

behavior on

使⽤了behavior on 属性⾏为策略的动画。这个⾏为告诉属性值每
时每刻都在变化,通过动画的⽅式来改变这个值。可以使⽤⾏为元素的
enabled : false来设置⾏为失效。
当on 后面的哪个属性发生变化的时候 我们选择如何跳转到这种变化

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("")Image {source: "image/xk.jpg"anchors.fill: parentImage {id: im1x: 40y: 80width: 200height: 200source: "image/yzfc.png"Behavior on x {NumberAnimation {duration: 4000}}MouseArea {anchors.fill: parentonClicked: {console.log("触发鼠标事件 当前位置" + im1.x)var ne = 40 + Math.random() * (600 - 40)im1.x = neconsole.log("触发鼠标事件 改变后位置" + ne)}}}}
}

⽤standalone animation

使⽤standalone animation独⽴动画策略。这个动画由⼀个私有的元素定义并且可以写在⽂档的任何地⽅。点击⽕箭调⽤动画函数start()来启动动画。每⼀个动画都有start(),stop(),resume(),restart()函数。这个动画⾃⾝可以⽐其他类型的动画更早的获取到更多的相关信息。我们只需要定义目标和标元素的属性需要怎样改变的⼀个动画。我们定义⼀个to属性的值,在这个例⼦中我们也定义了⼀个from属性的值允许动画可以重复运⾏。点击背景能够重新设置所有的⽕箭回到它们的初始位置。第⼀个⽕箭⽆法被重置,只有重启程序重新加载元素才能重置它。

注意

另⼀个启动/停⽌⼀个动画的⽅法是绑定⼀个动画的running属性。当需要⽤
户输⼊控制属性时这种⽅法⾮常有⽤:

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("")Image {source: "image/xk.jpg"anchors.fill: parentImage {id: im1x: 40y: 80width: 200height: 200source: "image/yzfc.png"NumberAnimation {id: animtarget: im1properties: "x"from: 40to: 400duration: 4000}MouseArea {anchors.fill: parentonClicked: {anim.start()}}}}
}

缓冲曲线(Easing Curves)

表示动画变化的速度类型
easing.type的类型
在这里插入图片描述
可以在qt 里查看文档 有多少中可用的变化类型
在这里插入图片描述
这边说明 至少要设置一个缓冲曲线的类型

  • easing.amplitude 仅适用于弹跳曲线和弹性曲线(Easing.InBounce、Easing.OutBounce、Easing.InOutBounce、Easing.OutInBounce、Easing.InElastic、Easing.OutElastic、Easing.InOutElastic 或 Easing.OutInElastic 类型的曲线) 用于调整震动的幅度
  • easing.overshoot 是 QML 动画系统中用于控制缓动曲线过冲量的属性。通过调整该属性的值,可以改变动画在达到目标值后的行为,从而创造出不同的视觉效果。
  • easing.period 仅当 easing.type 为:Easing.InElastic、Easing.OutElastic、Easing.InOutElastic 或 Easing.OutInElastic 时,easing.period 才适用
    easing.period 在 QML 动画系统中的作用主要是用于定义某些缓动曲线类型的周期。具体来说,这个属性对于具有周期性行为的缓动曲线(如某些自定义的周期性缓动曲线)非常重要。以下是关于 easing.period 的详细解释:

定义
easing.period 是一个实数(real)属性,用于指定缓动曲线的周期。
作用
周期控制:easing.period 决定了缓动曲线在动画过程中重复自身模式的频率。较高的值意味着较长的周期,即缓动曲线的模式会在更长的时间内重复;而较低的值则意味着较短的周期,即缓动曲线的模式会在更短的时间内重复。
动画效果:通过设置不同的 easing.period 值,可以创建出具有不同周期特性的动画效果。例如,在周期性缓动曲线中,可以通过调整周期来改变动画的平滑度和节奏感。
与其他属性的配合:easing.period 通常与 easing.type、easing.amplitude 等其他缓动曲线属性一起使用,以创建出复杂而精确的动画效果。

动画分组

这部分看起来有难度 。 用不上暂时不想学习

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

获取(复制)网页上的文字

获取(复制)网页上的文字 今天在搜索历史课本上一段文言文的翻译时,找到的网页,屏蔽了右键,不能选择,当然不让复制啦。对于这样的网站可以采用如下方法进行数据的获取,以chrome为例。 1、网页另…

keil5常见使用技巧记录(更新)

快速到函数定义 F12或自己定义快捷键CTRLK(个人设定) 修改快捷键 下图实例是快速跳转到函数或变量定义位置,当然可以定义其他功能快捷键,如快速注释多行,快速消除注释等 标记全部查找变量的蓝色框取消 CTRLshiftF2…

【YOLOv10改进[Backbone]】图像修复网络AirNet助力YOLOv10目标检测效果 + 含全部代码和详细修改方式 + 手撕结构图 + 全网首发

本文带来的是图像复原网络AirNet,它由基于对比度的退化编码器( CBDE )和退化引导的恢复网络( DGRN )两个模块组成。可以在一个网络中恢复各种退化图像。AirNet不受损坏类型和级别的先验限制,仅使用观察到的损坏图像进行推理。本文中将使用图像修复网络Ai…

Python | 倒叙输出和隔位输出(数组和列表)

数组的概念和特点: 固定大小:数组一旦声明,其大小通常是固定的,不能在运行时动态更改。就好比开设了一个30人的班级,班级大小已经固定,不能再改变班级的规模。相同数据类型: 数组中的所有元素必…

使用Python绘制瀑布图

使用Python绘制瀑布图 瀑布图效果代码 瀑布图 瀑布图(Waterfall Chart)是一种数据可视化工具,用于展示累积数值的变化,尤其适合于展示随时间或过程中的增减变化。它通常用于财务分析,如展示收入、支出和净利润的变化过…

【离散数学】数理逻辑集合论知识点汇总

期末题型: 一、 单选题(每题2分,10题共20分) 命题判定、哈斯图边计算等 二、 填空题(每空1分,共20分) 与非和或非的表示等 三、 简答题(10题,每题6分,共60分&…

安装禅道,帮助测试,测试打磨项目精度。

先检查docker版本。 sudo docker network create --subnet172.172.172.0/24 zentaonet sudo docker run --name zentao2 -p 8080:80 -p 3307:3306 --networkzentaonet --ip 172.172.172.3 -e MYSQL_INTERNALtrue -v /media/cykj/3T/ze…

【设计模式】单例模式(创建型)⭐⭐⭐

1.概念 1.1 什么是单例模式 单例模式属于创建型模式,一个单例类在任何情况下都只存在一个实例, 构造方法必须是私有的、由自己创建一个静态变量存储实例,对外提供一 个静态公有方法获取实例。 1.2 优点与缺点 优点:是内存中只有一个实例&…

【力扣】不同的子序列

一、题目描述 给你两个字符串 s 和 t ,统计并返回在 s 的 子序列 中 t 出现的个数,结果需要对 109 7 取模。 示例 1: 输入:s "rabbbit", t "rabbit"输出: 3 解释: 如下所示, 有 3 种…

【十年java搬砖路】Jumpserver docker版安装及配置Ldap登陆认证

Jumpserver docker 安装启动教程 拉取镜像 docker pull JumpServer启动进行前确保有Redis 和Mysql 创建jumperServer数据库 在MYSQL上执行 创建数据库 登陆MYSQL mysql -u root -p 创建Jumperserveri库 create database jumpserver default charset utf8mb4;可以为jumperSe…

ubuntu 22.04配置静态ip

ubuntu 22.04配置静态ip vim /etc/netplan/01-network-manager-all.yaml# Let NetworkManager manage all devices on this system network:renderer: NetworkManagerethernets:enp4s0f1:addresses:- 192.168.1.18/24dhcp4: falseroutes:- to: defaultvia: 192.168.1.1nameser…

「动态规划」买卖股票的最佳时机

力扣原题链接,点击跳转。 给定一个整数数组prices,prices[i]表示股票在第i天的价格。你最多完成2笔交易。你不能同时参与多笔交易(你必须在再次购买前出售掉之前的股票)。设计一个算法计算最大利润。 我们用动态规划的思想来解决…

【软件开发】Java学习路线

本路径视频教程均来自尚硅谷B站视频,Java学习课程我已经收藏在一个文件夹下,B站文件夹同时会收藏其他Java视频,感谢关注。指路:https://www.bilibili.com/medialist/detail/ml3113981545 2024Java学习路线(快速版&…

揭秘YAML:Python中的PyYAML应用

🍀 前言 博客地址: CSDN:https://blog.csdn.net/powerbiubiu 👋 简介 本章节介绍YAML文件格式的操作,通过Python的第三方库 PyYaml 来实现文件操作,在 Pyhon 代码中无论读取还是写入,都是使用…

React ahooks库和React Query库使用场景分析

文章目录 前言一、在一个前台项目中,如区块链项目,需大量轮询接口,这时候哪个好二、ahooks一般可以用在什么项目上三、推荐react-query一些常用的hook四、推荐ahooks一些常用的hook总结 前言 ahooks和react-query都是好用的react库&#xff…

【机器学习】逻辑回归:原理、应用与实践

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 逻辑回归:原理、应用与实践引言1. 逻辑回归基础1.1 基本概念1.2 Sig…

视频汇聚EasyCVR安防系统对接公安部GA/T 1400视图库布控、告警、订阅流程描述

随着信息技术的飞速发展,视频监控在公共安全领域的应用越来越广泛,对于视频监控系统的要求也日益严格。为了满足公安系统对视频图像信息应用的高标准需求,视频汇聚平台EasyCVR视频监控系统全面支持GA/T 1400标准协议,为公安部门提…

Scala学习笔记8: 包

目录 第八章 包1- 包2- 包的作用域3- 串联式包语句4- 包对象5- 引入end 第八章 包 在Scala中, 包(Package) 用于组织和管理代码, 类似与 Java 中的包 ; 包可以包含类、对象、特质等Scala代码, 并通过层次结构来组织代码 ; 可以使用 package 关键字来定义包, 并使用 . 来表示…

基于JSP的母婴用品网站系统

你好呀,我是计算机学长猫哥!如果有需求可以文末加我。 开发语言:Java 数据库:MySQL 技术:JSP技术 工具:IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员功能界面 用户功能界面 前台首页功能界面 …

Java开发-面试题-0003-List、Set 和 Map的区别

Java开发-面试题-0003-List、Set 和 Map的区别 更多内容欢迎关注我(持续更新中,欢迎Star✨) Github:CodeZeng1998/Java-Developer-Work-Note 技术公众号:CodeZeng1998(纯纯技术文) 生活公众…