QML Book 学习基础3(动画)

 

目录

主要动画元素

例子:

 非线性动画

分组动画


Qt 动画是一种在 Qt 框架下创建交互式和引人入胜的图形用户界面的方法,我们可以认为是对某个基础元素的多个设置                        

主要动画元素

  • PropertyAnimation-属性值变化时的动画

  • NumberAnimation-qreal类型值变化时的动画

  • ColorAnimation-颜色值变化时的动画

  • RotationAnimation-旋转值变化时的动画

特殊点的

  • PauseAnimation-为动画提供暂停

  • SequentialAnimation-允许按顺序运行动画

  • ParallelAnimation-允许并行运行动画

  • AnchorAnimation-锚定值变化时的动画

  • ParentAnimation-为父元素对象中,值发生变化时的动画

  • SmoothDaniation-允许属性平滑跟踪值

  • SpringAnimation-允许特性跟踪类似弹簧的运动中的值

  • PathAnimation-一个项沿路径变化的动画

  • Vector3dAnimation -为QVector3d值发生变化时的动画

Qt Quick提供了动作元素类型,可以在任何可以使用其他动画元素的地方

  • PropertyAction动画期间,立即更改指定的属性

  • ScriptAction-定义要在动画期间运行的脚本

例子:

PropertyAnimation属性动画提供了一种对属性值的更改进行动画处理的方法。
Image
{id:rootwidth: 400;height: 400//背景source: "illustration_2.png"//运行状态property bool runing: falseImage{id:logosource: "logo.png"x:(root.width-logo.width)/2y:(root.height-logo.height)/2//沿X轴移动PropertyAnimation on x{//沿X轴移动到root.width-logo.widthto:root.width-logo.width//时间2sduration:2000running: root.runing}// 旋转PropertyAnimation on rotation{to:360 //旋转角度duration:2000running: root.runing}//透明度PropertyAnimation on opacity{to:0.1duration:2000running: root.runing}//响应消息改变运行状态MouseArea{anchors.fill: parentonClicked:  root.runing = true}}
}

 

 非线性动画

我们现在定义的所有动画都使用线性插值,因为动画的初始缓和类型是Easing.Linear。最好通过一个小的绘图进行可视化下,其中y轴是要设置动画的属性,x轴是时间(持续时间)。线性插值将从动画开始时的“from”值到动画结束时的“to”值绘制一条直线。因此,缓和类型定义了曲线的变化

 关于这段你们可以看示例关键字Easing Curves Example官方示例,或者下面代码

//EasingType.qml
import QtQuick 2.0Item {id:rootwidth: 200;height: 200property alias image: label.textproperty alias source: image.sourceproperty var easingTyep;signal clickedImage{id:imageanchors.fill: parentsource: imageText {id: labeltext: qsTr("text")anchors.horizontalCenter: parent.horizontalCenteranchors.bottom: parent.botton}}MouseArea{anchors.fill: parentonClicked: root.clicked()}
}
//主函数
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.2Rectangle
{id:rootwidth: childrenRect.widthheight: childrenRect.heightcolor: "green"gradient: Gradient{GradientStop{position: 0;color:"#8bafce" }GradientStop{position: 1;color:"#8edf80"}}ColumnLayout{spacing: 20Grid{spacing: 10columns: 5EasingType{image:'InExpo.png'easingTyep: Easing.LinearonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'InOutBack.png'easingTyep: Easing.OutExpoonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'InOutBounce.png'easingTyep: Easing.InOutBounceonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'InOutCirc.png'easingTyep: Easing.InOutCirconClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'InOutCubic.png'easingTyep: Easing.InOutCubiconClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'InOutElastic.png'easingTyep: Easing.InOutElasticonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'InOutExpo.png'easingTyep: Easing.InOutExpoonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'Linear.png'easingTyep: Easing.LinearonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'OutExpo.png'easingTyep: Easing.OutExpoonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}EasingType{image:'SineCurve.png'easingTyep: Easing.SineCurveonClicked:{animation.easing.type=easingTyepbox.toggle = !box.toggle}}}Rectangle{id:boxproperty bool togglewidth: 100height:100x:toggle?20:root.width - width - 20gradient:Gradient{GradientStop{position: 0;color: "#eaea81"}GradientStop{position: 1;color: "#f4cccc"}}Behavior on x{NumberAnimation{id:animationduration: 1000}}}}
}

 用别的图展示一下吧

 

分组动画

顾名思义,可以对动画进行分组。分组可以通过两种方式完成:并行或顺序。可以使用 or 元素,该元素充当其他动画元素的动画容器。这些分组动画本身就是动画,可以完全按照动画使用。SequentialAnimation与ParallelAnimation

 

import QtQuick 2.0Rectangle {id:rootImage{id:didix:30;y:300source:"InOutCirc.png"focus:falsesignal clickedMouseArea{anchors.fill: parentonClicked:{anim.restart()}}}//ParallelAnimationSequentialAnimation{id:animNumberAnimation {target: didiproperty: "y"to: 200duration: root.duration}NumberAnimation {target: didiproperty: "x"to: 150duration: root.duration}}}

动画嵌套

分组动画也可以嵌套。例如,一个连续动画可以有两个并行动画作为子动画,依此类推。我们可以通过足球的例子来形象化这一点。这个想法是从左到右扔一个球并为其行为添加动画效果

 

 主函数主要是将图层分成二块

import QtQuick 2.12
import QtQuick.Window 2.12Window {id:rootwidth: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle {id: skywidth: root.widthheight: 300gradient: Gradient {GradientStop { position: 0.0; color: "#0080FF" }GradientStop { position: 1.0; color: "#66CCFF" }}}Rectangle {id: groundanchors.top: sky.bottomanchors.bottom: root.bottomwidth: parent.width;height: root.heightgradient: Gradient {GradientStop { position: 0.0; color: "#00FF00" }GradientStop { position: 1.0; color: "#00803F" }}}BrightSquare{}
}

为了理解动画,我们需要将其剖析为对象的积分变换。我们需要记住,动画会为属性更改设置动画。以下是不同的转换:

  • 从左到右的 x 平移 (X1)

  • 从下到上 () 的 y 平移,然后是从上到下()的平移,有一些弹跳Y1Y2

  • 在整个动画持续时间内旋转 360 度 (ROT1)

 

import QtQuick 2.0Rectangle {id:rootImage{id:didix:10;y:450source:"InOutCirc.png"focus:falsesignal clickedMouseArea{anchors.fill: parentonClicked:{didi.y = 480 - didi.heightdidi.rotation = 0anim.restart()}}}//ParallelAnimation//SequentialAnimationParallelAnimation{id:animSequentialAnimation{NumberAnimation {target: didiproperty: "y"to: 100duration: root.durationeasing.type:Easing.OutCirc}NumberAnimation {target: didiproperty: "y"to: 400duration: root.durationeasing.type:Easing.OutCirc}}NumberAnimation {target: didiproperty: "x"to: 300duration: root.duration}RotationAnimation{target: didiproperty: "rotation"to:360duration: root.duration}}}

 

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

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

相关文章

【操作系统】聊聊局部性原理是如何提升性能的

对于目前数据主导的系统,大多数都是Java/Go 技术栈MySQL,但是随着时间的推移,数据库数据的数据量过多,并且会频繁访问热点数据,为了提升系统的性能,一般都是加入缓存中间件、Redis。 局部性原理 我们知道…

springboot小知识:配置feign服务超时时间

背景:当前项目通过feign服务调用了其他两个项目的接口,但是由于特殊需求,需要调整某一个项目的feign服务的默认超时时间: 默认连接超时10秒,默认读取超时时间 60秒 1.找到定义的FeignClient 2.根据FeignClient定义的名…

创建python环境——Anaconda

在Windows中安装Anaconda和简单使用 一.Anaconda发行概述 Anaconda是一个可以便捷获取和管理包,同时对环境进行统一管理的发行版本,它包含了conda、 Python在内的超过180个科学包及其依赖项。 1.Anaconda发行版本具有以下特点: (1)包含了…

Redis笔记——(狂神说)

Nosql概述 为什么要用NoSql? 1、单机mysql的年代:90年代,网站访问量小,很多使用静态网页html写的,服务器没压力。 当时瓶颈是:1)数据量太大一个机器放不下。2)数据的索引(BTree),一个机器内存也…

京东商品详情数据(H5端,PC端)高效对接第三方API接口

利用电商API获取数据的步骤 1.申请API接口注册Key和secret接入:首先要在相应电商平台上注册账号并申请API接口。 2.获取授权:在账号注册成功后,需要获取相应的授权才能访问电商API。 3.调用API:根据电商API提供的请求格式&…

【Spring】什么是 AOP(面向切面编程) ? 为什么要有 AOP ? 如何实现 Spring AOP ?

文章目录 前言一、什么是 AOP ?二、为什么要使用 AOP ?三、 AOP 的组成四、Spring AOP 的实现1, 添加依赖2, 定义切面3, 定义切点4, 定义通知5, 创建连接点 总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 JavaSE基础: 基础语法…

Excel:如何实现分组内的升序和降序?

一、POWER 1、构建辅助列D列,在D2单元格输入公式: -POWER(10,COUNTA($A$2:A2)3)C2 2、选中B1:D10,注意不能宣导A列的合并单元格,进行以下操作: 3、删除辅助列即可 二、COUNTA 第一步,D2建立辅助列&#xf…

【开个空调】语音识别+红外发射

废话少说,直接上空调板子:YAPOF3。红外接收发射模块用的某宝上发现的YF-33(遗憾解码还没搞清楚,不然做个lirc.conf功能才多)。最后是语音识别用的幻尔的,某宝自然也有,它是个i2c的接口。 本篇胡说八道其实纯粹为了留个…

Nacos安装

一、下载Nacos1.4.1二、单机版本安装 2.1 将下载的nacos安装包传输到服务器2.2 解压文件2.3 进入bin目录下 单机版本启动2.4 关闭nacos2.5 访问Nacos地址 IP:8848/nacos三、集群版本的安装 3.1 复制nacos安装包,修改为nacos8849,nacos8850&am…

android手机销售app(IDEA,SpringBoot,SSM,MySQL)+支付宝支付+全套视频教程

本项目亮点: 支付宝支付 eCharts柱状图图表数据统计 【项目功能介绍】 本系统包含后台管理和前端app双端系统,后台管理的功能包含: 登录, 退出, 修改管理员信息(基本信息与头像),资源管理,角色管理,资源权限分配,字典管理,用户管理,图书管理,订单管理,订单统计; a…

常见的下载方式

一. 使用 window.open() 使用场景 // 1. 先封装一个实习下载的函数 export const download (path) > {window.open(下载的接口,例如:/fs/download?path path) } // 2. 使用:在需要下载的地方调用download函数,传入下载的u…

AP5192 DC-DC降压恒流LED汽车头灯摩托车电动车大灯电源驱动

AP5192是一款PWM工作模式,高效率、外围简单、 内置功率MOS管,适用于4.5-100V输入的高精度 降压LED恒流驱动芯片。最大电流1.5A。 AP5192可实现线性调光和PWM调光,线性调光 脚有效电压范围0.55-2.6V. AP5192 工作频率可以通过RT 外部电阻编程 来设定&…

Zebec Protocol 与 PGP 深度合作,将流支付更广泛的应用于薪资支付领域

随着传统机构的入局,以及相关加密合规法规的落地,加密支付正在成为一种备受欢迎的全新支付方式。加密支付基于区块链底层,不受地域、时间等的限制,能够实时到账,具备去中心化、非许可等特性。 流支付是一种具备创新性的…

【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息 文章目录 一、前言二、安装和基础使用三、不同平台的支持情况四、如何自定义 Toast五、在实际业务中的应用六、完整的业务代码示例(基于 Web 端)七、总结 一、前言 在这篇文章中,…

异步迭代器

一、什么是异步迭代器? 实现了 __aiter__() 和 __anext__() 方法的对象。__anext__ 必须返回一个 awaitable对象。async for 会处理异步迭代器的 __anext__() 方法所返回的可等待对象,直到其引发一个 StopAsyncIteration 异常。 二、实例 class Async…

QT 相关设置

目录 1.安装QT2.安装好之后需要做一些设置2.1 基本的字体及主题设置2.2 格式化美化代码插件设置 1.安装QT 具体教程不写了 2.安装好之后需要做一些设置 2.1 基本的字体及主题设置 进入选项 选择喜欢的主题 字号字体设置 2.2 格式化美化代码插件设置 先下载一个格式化插…

适配器设计模式

目录 一、适配器模式1.类适配器模式2.对象适配器模式3.接口适配器 二、适配器模式应用场景三、适配器模式的优缺点 一、适配器模式 B站:java架构师 定义:适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而…

Mysql 事物与存储引擎

MySQL事务 MySQL 事务主要用于处理操作量大,复杂度高的数据。比如说,在人员管理系统中, 要删除一个人员,即需要删除人员的基本资料,又需要删除和该人员相关的信息,如信箱, 文章等等。这样&#…

黑马点评环境搭建导入

一开始配置maven的时候,发现怎么都无法查看maven的版本,后来才知道是JAVA_HOME的问题,开头多了一个空格(因为我是直接复制过去的),然后搜网上通过命令行可以看到肉眼看不到的bug。 通过命令行的方式改正确后…

C++笔记之单例通过GetInstance传递参数

C笔记之单例通过GetInstance传递参数 code review! 文章目录 C笔记之单例通过GetInstance传递参数例1.普通指针的单例例2.结合智能指针和std::call_once例3.编译不通过的错误例子,在GetInstance内不可以使用std::make_shared来创建对象 例1.普通指针的单例 运行 …