Qt开发框架入门级教程:用例 - QML中的动画 qtUIqmlc++
程序员文章站
2022-06-01 08:21:07
...
Qt Quick提供了动画属性的功能。动画属性允许属性值在中间值之间移动,替代立即更改为目标值。要为项目的位置设置动画,您可以为控制项目位置的属性(例如 x 和 y)设置动画,以便项目的位置在到达目标位置途中的每一帧都发生变化。
流畅的用户界面
QML旨在促进流畅UI的创建,这些是用户界面,其中UI组件具有动画效果,而不是突然出现、消失或跳跃。Qt Quick提供了两种简单的方法让UI组件随着动画移动,来替代立即出现在新的位置上。
状态和转换
Qt Quick允许您在State对象中声明各种UI状态,这些状态由基本状态的属性更改组成,可以作为组织UI逻辑的有用方式。Transitions是您可以与项目关联的对象,用来定义其属性因状态更改而更改时将如何设置动画。
可以使用 Item::states 和 Item::transitions 属性声明项的状态和转换,状态在项目的状态列表属性内声明,通常是组件的根项目。 在同一项目上定义的转换用于动画状态的变化。以下是一个示例:
Item { id: container width: 320 height: 120 Rectangle { id: rect color: "red" width: 120 height: 120 TapHandler { onTapped: container.state === '' ? container.state = 'other' : container.state = '' } } states: [ // This adds a second state to the container where the rectangle is farther to the right State { name: "other" PropertyChanges { target: rect x: 200 } } ] transitions: [ // This adds a transition that defaults to applying to all state changes Transition { // This applies a default NumberAnimation to any changes a state change makes to x or y properties NumberAnimation { properties: "x,y" } } ] }
动画属性更改
Behaviors可用于指定属性更改时要使用的动画,然后这将应用于所有更改,无论其来源如何。 以下示例使用behaviors为在屏幕上移动的按钮设置动画。
Item { width: 320 height: 120 Rectangle { color: "green" width: 120 height: 120 // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property Behavior on x { NumberAnimation { //This specifies how long the animation takes duration: 600 //This selects an easing curve to interpolate with, the default is Easing.Linear easing.type: Easing.OutBounce } } TapHandler { onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0 } } }
其他动画
并非所有动画都必须绑定到特定的属性或状态,您还可以更一般地创建动画,并在动画中指定目标项目和属性。 以下是执行此操作的不同方法的一些示例:
Item { width: 320 height: 120 Rectangle { color: "blue" width: 120 height: 120 // By setting this SequentialAnimation on x, it and animations within it will automatically animate // the x property of this element SequentialAnimation on x { id: xAnim // Animations on properties start running by default running: false loops: Animation.Infinite // The animation is set to loop indefinitely NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad } NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad } PauseAnimation { duration: 250 } // This puts a bit of time between the loop } TapHandler { // The animation starts running when you click within the rectangle onTapped: xAnim.running = true } } } Item { width: 320 height: 120 Rectangle { id: rectangle color: "yellow" width: 120 height: 120 TapHandler { // The animation starts running when you click within the rectangle onTapped: anim.running = true; } } // This animation specifically targets the Rectangle's properties to animate SequentialAnimation { id: anim // Animations on their own are not running by default // The default number of loops is one, restart the animation to see it again NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 } NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 } } }
Qt商用组件推荐
- QtitanRibbon - Ribbon UI组件:是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
- QtitanChart - Qt类图表组件:是一个C ++库,代表一组控件,这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
- QtitanDataGrid - Qt网格组件:提供了一套完整的标准 QTableView 函数和传统组件无法实现的独特功能。使您能够将不同来源的各类数据加载到一个快速、灵活且功能强大的可编辑网格中,支持排序、分组、报告、创建带状列、拖放按钮和许多其他方便的功能。
- QtitanNavigation:QtitanNavigationDesignUI 组件是一组 GUI 控件,它实现了菜单、导航框、命令栏等导航界面,并让您以更少的滚动和点击次数有效地查看所有实体(工作区、网格或其他项目)。
- QtitanDocking:允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题!
Qt技术交流群:166830288 欢迎一起进群讨论